Angular · Theory

Lists

Theory

12/43

Lists

*ngFor="let s of students" repeats a row. trackBy: byId so Angular reuses DOM when the array updates. Without trackBy, a filter can steal input focus.

Board: two students. Delete the first. With trackBy id, the second row keeps what you typed. With index keys, it glitches. Same lesson as React keys.

Trap: *ngFor on a Map. Convert to an array. Another trap: mutating the array in place under OnPush and wondering why nothing redraws — assign a new array.

Diagram

  students[]
     │ *ngFor + trackBy id
     ▼
  row per student

Exam tip

*ngFor + trackBy. Delete-first demo.

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;
  }
}

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

Short notes

Def*ngFor repeats rows. trackBy keeps identity.
RuletrackBy on lists that edit/filter.
TrapIndex-only identity on an editable list.

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; } }

Lists

Example

Short notes

Questions

Lists

Example

Short notes

Questions