liveBook · Manning

IterableDiffer

As explained in Pro Angular 16

IterableDiffer is an Angular API object that compares an iterable collection with its previous state and reports changes.

IterableDiffer compares an iterable with its previous state during ngDoCheck and returns IterableChanges when items are added, removed, moved, or otherwise changed; it returns null when no work is needed. section 15.3.4

A typical directive creates and consumes the differ as follows:

  • Inject IterableDiffers and create a differ from the initial data source with find(...).create(). section 15.3.4
  • Call diff(dataSource) in ngDoCheck and skip DOM work when the result is null. section 15.3.4

Incremental updates in a custom iterator

A paFor directive uses IterableDiffer to add embedded views only for newly detected products, then extends the implementation to remove views when products are deleted.

How Pro Angular 16 covers it

How deep it goes
Explains factory creation, diff results, change callbacks, and record indexes, but leaves full removal and movement handling to implementation.
Examples
Demonstrates a paFor product table that creates views for additions and removes views after product deletion.
What it assumes
Assumes Angular directives, lifecycle hooks, embedded views, and iterable data sources.
What you can do after
Build it from scratch by creating a differ and applying its change records to embedded views.
How it connects
Connects Angular change detection, ngDoCheck, IterableDiffers, IterableChanges, IterableChangeRecord, and structural directives.
Cover of Pro Angular 16
liveBookmanning.com
Read Pro Angular 16 on liveBook Get the book at manning.com

Related concepts

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