liveBook · Manning

IterableChangeRecord

As explained in Pro Angular 16

IterableChangeRecord is an Angular data object describing an item and its positional or identity change in an iterable collection.

An IterableChangeRecord describes an item reported by Angular’s iterable differ. Callbacks on IterableChanges receive a record for each relevant item, such as one that was added, moved, or removed. section 15.3.4

Table 15.5. The IterableChangeRecord properties
Name
Description
item
This property returns the data item.
trackById
This property returns the identity value if a trackBy function is used.
currentIndex
This property returns the current index of the item in the collection.
previousIndex
This property returns the previous index of the item in the collection.

The record exposes item, currentIndex, and previousIndex; trackById supplies an identity value when a trackBy function is used. section 15.3.4

Create views for added items

In ngDoCheck, diff the collection and proceed only when changes is non-null. Pass a callback to forEachAddedItem; use each record’s item and currentIndex to create its embedded view. This avoids clearing and rebuilding every view on each check. Deletions and modifications require the directive to track which view belongs to each data object. section 15.3.4

How Pro Angular 16 covers it

How deep it goes
Defines four record properties and works through added-item handling; flags deletion and modification as more complex.
Examples
Uses an iterator directive that creates views when products are added.
What it assumes
Assumes familiarity with Angular directives and embedded views while showing how iterable differ results feed change callbacks.
What you can do after
Build it from scratch: use added-item records to update a structural directive without rebuilding every view.
How it connects
Connects IterableDiffer, IterableChanges, ngDoCheck, trackBy, and embedded views.
Cover of Pro Angular 16
liveBookmanning.com
Read Pro Angular 16 on liveBook Get the book at manning.com

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.