IterableDiffers helps a structural directive detect collection changes without rebuilding its embedded views on every ngDoCheck call. Inject it into the directive, then call find(dataSource).create() in ngOnInit to obtain an IterableDiffer. section 15.3.4
Update only for additions
In ngDoCheck, call differ.diff(dataSource). A null result means there are no collection changes to process. Otherwise, forEachAddedItem supplies records whose item and currentIndex can be used to create embedded views. This implementation handles additions only; removals and moves need separate handling. section 15.3.4
...
ngDoCheck() {
let changes = this.differ?.diff(this.dataSource);
if (changes != null) {
console.log("ngDoCheck called, changes detected");
let arr: IterableChangeRecord<any>[] = [];
changes.forEachAddedItem(addition => arr.push(addition));
arr.forEach(addition => {
if (addition.currentIndex != null) {
this.container.createEmbeddedView(this.template,
new PaIteratorContext(addition.item,
addition.currentIndex,
arr.length));
}
});
}
}
...
Shows the addition-only ngDoCheck implementation, including the null check and creation of embedded views from change records. section 15.3.4
