liveBook · Manning

Collection modification

As explained in Pro Angular 16

A collection-level data change is an addition, removal, or replacement of an object within a collection.

Collection modification changes a collection by adding, removing, or replacing an object. Angular does not automatically invoke an iterating directive’s ngOnChanges for these changes, so the directive must detect them separately. section 15.3.4

Implementing ngDoCheck lets a directive inspect changes during application change detection, but it runs whenever Angular detects a change anywhere. Rebuilding every embedded view is therefore simple but potentially inefficient. section 15.3.4

Deleting a product

A component can call model.deleteProduct(item.id) from a row button. The iterator directive then detects the removed collection item and removes its associated view.

How Pro Angular 16 covers it

How deep it goes
Explains ngDoCheck, IterableDiffer, change records, and targeted view updates while warning about repeated full regeneration.
Examples
Uses a product table, a delete button, a component delete method, and an iterator directive managing rendered views.
What it assumes
Assumes Angular structural directives, lifecycle hooks, templates, and view containers; refreshes collection detection from directive behavior.
What you can do after
Build it from scratch by detecting iterable differences and updating only affected embedded views.
How it connects
Connects Angular change detection, ngDoCheck, structural directives, embedded views, IterableDiffer, and trackBy.

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.