Lists — Angular Technical Interview Questions & Answers

Lists

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.

Technical Interview Tip: *ngFor + trackBy. Delete-first demo.

Code Examples for Lists

Lists — working 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.

How to Explain Lists to an Interviewer

Why trackBy?

Reuse DOM Stop focus bugs on filter/delete