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