Understanding The Iterable Differs
summary
Explains that Angular exposes IterableDiffers and KeyValueDiffers as core providers that compute per-change records (added, removed, moved) with currentIndex and previousIndex so change detection can update only affected DOM nodes. Shows code using IterableDiffers.find/create, DoCheck and forEachAddedItem/forEachMovedItem/forEachRemovedItem, then builds a custom ngStyle-like structural directive using KeyValueDiffers plus ElementRef and Renderer2. Notes default algorithm is O(n) and references a linked‑list/immutability trick (Minko) to approach O(1).
AI-written summary · about
chapters (12)
- 0:00Introduction
- 1:49Why performance matters
- 3:57OnPush strategy limits
- 6:48What is IterableDiffers
- 7:31Live coding setup
- 9:20Basic IterableDiffers demo
- 12:55Employee tracking demo
- 15:47TrackBy function explained
- 16:53Creating custom structural directive
- 25:15Testing custom directive
- 26:21Optimizing ngFor complexity
- 27:50Summary and key takeaways
related talks
37mAngular Core Abstractions - The ItreableDiffer
19mA comparison of the two-way binding in AngularJS, EmberJS and KnockoutJS
44mAngular 2 Change Detection Explained
19mThe Magic and Mystery of Angular Change Detection
17mNavigating Angular's Evolution for Peak Performance!
01h 02mChange Detection, Zone.js and Other Monsters
33mAngular 2 change detection explained
46mAngular 2 Change Detection Explained