liveBook · Manning

IterableDiffer.diff

As explained in Pro Angular 16

IterableDiffer.diff is an Angular API method that compares a collection and returns its detected changes or null when none exist.

IterableDiffer.diff compares the current collection with its tracked state. It returns IterableChanges when differences exist, or null when none exist, allowing ngDoCheck to skip unnecessary view work. section 15.3.4

Detecting added collection items

let changes = this.differ?.diff(this.dataSource); if (changes != null) { changes.forEachAddedItem(addition => { if (addition.currentIndex != null) { this.container.createEmbeddedView( this.template, new PaIteratorContext( addition.item, addition.currentIndex, this.dataSource.length)); } }); } This pattern creates embedded views only after diff reports a change, rather than rebuilding the entire collection during every check. section 15.3.4

How Pro Angular 16 covers it

How deep it goes
Explains return values and added-item processing, but defers the differ's internal comparison algorithm.
Examples
Uses a custom iterator directive that creates product views when new products are detected.
What it assumes
Assumes familiarity with Angular lifecycle checks, structural directives, collections, and embedded views.
What you can do after
Implement selective collection updates by checking for null and processing added, moved, removed, or identity-changed items.
How it connects
Connects IterableDiffer.diff with IterableDiffers, ngDoCheck, 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.