Up-close with Structural Directives
summary
Explains how TemplateRef.createEmbeddedView and ViewContainerRef actually create and insert embedded views, shows how the micro‑syntax maps into directive inputs and the context object, and demos using ngTemplateOutlet instead of manual insertion. Gives concrete use cases—permission gating, feature flags, route‑dependent side nav, carousel behavior—and notes that custom structural directives can be typed and injected with services; the talk stops short of a full built example but the mechanics and APIs are spelled out.
AI-written summary · about
chapters (17)
- 0:00Intro
- 1:47Structural Directives are cool
- 3:30Behind the scenes
- 6:02Templates are instructions on how to render
- 7:51Tools for working with views
- 11:04Use ng container for view containers
- 12:14Two kinds of views in View Containers
- 17:03View children vs Content children
- 17:283 Steps to create embedded views
- 17:38Place an anchor element
- 18:20Use View Query to access view container
- 19:38Use ViewContainer Ref API to create view
- 24:10Context object & Template Input Variables
- 26:07Typing context object
- 27:02Input properties & Binding Keys
- 29:17Binding string with microsyntax
- 31:58Takeaways
related talks
31mCreating Custom Structural Directives
31mThe differences between ElementRef, TemplateRef, ViewContainerRef
01h 44mImplementing advanced DOM manipulation scenarios
33mDemystified Angular Directives
06mThe magic of template reference variables
30mReactive parenting with Angular 2
30mHow Angular works
23mngTemplateOutlet: The secret to customisation