Angular · Theory

Dynamic Comp

Theory

30/43

Dynamic Comp

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

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

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

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

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

Exam tip

What is Dynamic Comp? Show this: the smallest Dynamic Comp example you can type. Trap: only saying “Dynamic Comp” 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;
  }
}

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

Short notes

DefDynamic Comp — a short Dynamic Comp example in a campus SPA.
Rulethe smallest Dynamic Comp example you can type
Traponly saying “Dynamic Comp” 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; } }

Dynamic Comp

Example

Short notes

Questions

Dynamic Comp

Example

Short notes

Questions