Change Detection — Angular Technical Interview Questions & Answers

Change Detection

Change Detection

  • Default change detection checks the tree after events. OnPush checks when inputs change by reference, or you markForCheck, or an event fires inside that component.
  • Board: OnPush table. Push into students array. Screen stays old. Assign students = [...students, row] and it updates. Trap: mutating under OnPush and blaming Angular.

Technical Interview Tip: OnPush + new array reference demo.

Code Examples for Change Detection

Change Detection — 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;
  }
}

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

How to Explain Change Detection to an Interviewer

Why OnPush looks ‘stuck’?

Mutated same reference Need new array or markForCheck