Change detection is how Angular reflects application-state changes in the HTML shown to the user. When an interaction changes a component value, Angular checks template bindings and updates the affected content. The conventional approach requires little instruction from the developer about which bindings a change might affect, but that simplicity has a performance cost. section 10.0 section 10.3.1
In conventional change detection:
- Zone.js modifies browser JavaScript APIs so operations such as event-handler calls can trigger a check. section 10.3
- Angular works through components and evaluates their template expressions. It uses changed results to update only the affected HTML through the browser DOM API. section 10.3
- Angular cannot infer which expressions depend on a changed value, so it evaluates expressions even when their inputs have not changed. An expensive getter can therefore delay an unrelated update. section 10.3.2
Inspect a button click
Add console messages to a button handler and the component getters used by its template, then click the button with the browser console open. A click that changes the displayed message still reads the count and total getters. During development, Angular may read template values twice to check that they are stable; that extra check is absent from deployment builds. section 10.3 section 10.3.2
Listing 10.7. Performing additional work in the component.ts file in the src/app folder
...
get count(): number {
let result = this.model.getProducts().length;
let total = 0;
for (let i = 0; i < 1000000000; i++) {
total += 1;
}
console.log(`count value read: ${result}`);
return result;
}
...
This getter adds a costly loop to a count calculation. Because conventional detection reevaluates the getter after either button click, even an unrelated interaction can pause the display. section 10.3.2
Signals offer a way to describe relationships between values: writable signals hold mutable values, and computed signals derive values from them. Angular can then determine the effect of a change without evaluating unaffected template expressions. For example, a mouseover event can set a selected-product signal; interpolation displays its value, while a class binding highlights the matching table row. section 10.6 section 13.2
Some library integrations need an explicit bridge. An Angular Material product table can use `ngDoCheck` and an iterable differ to detect repository changes, then refresh its `MatTableDataSource` so the table updates. section 7.5.3
