Angular · Theory
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.
OnPush + new array reference demo.
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.