liveBook · Manning

View-based change detection

As explained in Modern Angular

View-based change detection is an Angular checking approach that tracks signal bindings per view and checks only views affected by a changed signal.

View-based change detection is a signal-driven Angular approach that records which signals each view binds to, then checks only the views affected by a signal update. A view is a component template or an ng-template; structural directives create ng-templates automatically. section 10.3.4

Listing 10.17 Template with multiple views
<div>  #1
  <p *ngIf="condition()">  #2
    <ul>
      <li *ngFor="let item of items">  #3
        {{item().name}}
      </li>
    </ul>
  </p>
</div>

The outer template, conditional block, and repeated-item block form separate views. A signal used in the repeated-item view lets Angular target that view when the signal changes rather than checking unrelated views. section 10.3.4

This granular checking contrasts with broader update mechanisms and is intended to improve performance. The tradeoff is converting properties to signals: ordinary property bindings may update only when another signal changes, and they may eventually be disallowed in signal-based components. section 10.3.4

Zone-based and signal-based components can coexist during an iterative move toward zoneless Angular, but Zone.js cannot be removed while zone-based components remain. section 10.3.4

How Modern Angular covers it

How deep it goes
Defines views and binding tracking, but defers implementation because signal-based components remain work in progress.
Examples
Illustrates separate views with a div, an NgIf block, and an NgFor item binding.
What it assumes
Assumes familiarity with Angular templates, signals, structural directives, and Zone.js-based components.
What you can do after
Evaluate/understand why signal bindings enable targeted checks and why mixed Zone.js applications cannot yet be zoneless.
How it connects
Connects signals, structural directives, ng-templates, Zone.js, and zoneless Angular migration.

Related concepts

This explainer was generated by Manning's knowledge graph from the text of Modern Angular. The section links point to the parts of the book it draws on.