liveBook · Manning

trackById

As explained in Pro Angular 16

trackById is an Angular iterable-change-record property containing the identity value used to associate a collection item with its view.

trackById is the identity value on an IterableChangeRecord when a trackBy function is used. It lets an iterable directive associate collection items with their rendered views. section 15.3.4

A custom structural directive can use trackById to:

  • Index a Map of item identities to PaIteratorContext objects and their ViewRef instances. section 15.3.4
  • Retrieve and remove the view associated with an item reported by forEachRemovedItem. section 15.3.4
  • Preserve accurate positional context after removals by updating the remaining contexts. section 15.3.4

Deleting a product row

A product table renders rows with a custom paFor directive and a Delete button. Deleting a product changes the data model; the directive uses the recorded identity to find the corresponding view, remove it, and keep row-dependent bindings correct.

How Pro Angular 16 covers it

How deep it goes
Explains the property definition and demonstrates identity-indexed view removal, but does not detail trackBy function implementation.
Examples
Demonstrates product-table deletion, identity-indexed contexts, and removal of the matching rendered row.
What it assumes
Assumes iterable differ and structural-directive APIs while defining trackById through the IterableChangeRecord property table.
What you can do after
Build it from scratch by mapping trackById values to contexts and removing or updating the corresponding views.
How it connects
Connects trackById with IterableChangeRecord, trackBy functions, iterable differs, structural directives, ViewRef, and ViewContainerRef.
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.