Angular · Theory

Animations

Theory

36/43

Animations

Animations is a Angular topic. In plain words you use it for a short Animations example in a campus SPA. Don’t start with a slogan — start with that picture.

Smallest example: the smallest Animations example you can type. Type it, run it, and say what you see. If you can do that from memory, you know Animations.

From the example next to this theory — Animations: toggle open.

Trap — only saying “Animations” with no example. Fix that before you talk about advanced Angular.

Viva — what is Animations? Then show the smallest Animations example you can type. Then name the trap.

Exam tip

What is Animations? Show this: the smallest Animations example you can type. Trap: only saying “Animations” with no example.

Example

import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  template: `
    <h1>{{ title }}</h1>
    <button (click)="toggle()">Toggle</button>
    <p *ngIf="open">Panel open</p>
  `,
})
export class AppComponent {
  title = "Angular practice";
  open = true;
  toggle() {
    this.open = !this.open;
  }
}

Animations: toggle open. Say whether the panel is on screen after one click.

Short notes

DefAnimations — a short Animations example in a campus SPA.
Rulethe smallest Animations example you can type
Traponly saying “Animations” with no example
Usea campus SPA

import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <h1>{{ title }}</h1> <button (click)="toggle()">Toggle</button> <p *ngIf="open">Panel open</p> `, }) export class AppComponent { title = "Angular practice"; open = true; toggle() { this.open = !this.open; } }

Animations

Example

Short notes

Questions

Animations

Example

Short notes

Questions