Deep dive into content projection
summary
Demonstrates that Angular's content projection matches ng-content at build time so projected nodes move rather than recreate, explains why cloning projected items fails and why an ngIf on an ng-content does not recreate a new instance, shows the supported escape hatches: undocumented ngProjectAs to remap selectors, using TemplateRef + ngTemplateOutlet (and ngFor/ngIf) to produce multiple independent instances, and using a portal pattern to move content while preserving the original lifecycle and working counters.
AI-written summary · about
chapters (15)
- 0:00Intro
- 0:34Let's count sheep!
- 0:46ngFarm
- 1:32Basic content projection
- 2:04Targeted projection
- 2:54With a container
- 4:15ng ProjectAs
- 5:56Cloning sheep (again)
- 6:24Playing hide and seek
- 7:03What does
- 9:19Blueprints, a.k.a TemplateRefs
- 11:08Breeding sheep
- 13:58"Lifecycle" issues
- 16:01Portals
- 17:59What did we learn?
related talks
43mBecome a Content Projection Artist
30mReactive parenting with Angular 2
24mComponents: Life Beyond Init and Destroy
21mCreating Container Components with Web Components and Angular
51mScalable User Interfaces with Angular 2
28mReal-life Angular Architecture Lessons
33mDemystified Angular Directives
23mngTemplateOutlet: The secret to customisation