ngTemplateOutlet: The secret to customisation
summary
Demonstrates using TemplateRefs with ngTemplateOutlet (and ngTemplateOutletContext) so a parent passes a template and the component hydrates it with its internal state via ContentChild, replacing many fragile inputs. Builds a reusable select component that renders different visuals (sharks, tractors) from client templates, keeps a huge icon library out of the bundle, falls back to a default template, simplifies testing, and results in a single generic component that actually works and improves performance.
AI-written summary · about
chapters (17)
- 0:00Intro
- 2:15Talk Outline • Reconstruction
- 4:11Client 2: Latin Names
- 4:50Client 1: Swim Icon
- 8:20What do we need?
- 8:53What is a Template and Template Outlet?
- 9:49Templates and Template Outlets
- 10:161. Pass generic template into a component
- 10:582. Component to hydrate template with it's state
- 12:51Final Selector Component
- 13:26Final Selector Template
- 13:52Final Client Code
- 15:12Two dients sharing a single component
- 16:17Default Template
- 17:18Multiple Templates
- 18:27Context Properties (let-*)
- 19:59Testing Ng TemplateOutlets
related talks
12mTyping the not so secret to customisation ngTemplateOutlet
31mThe differences between ElementRef, TemplateRef, ViewContainerRef
06mThe magic of template reference variables
10mWriting Compound Components in Angular
43mBecome a Content Projection Artist
30mReactive parenting with Angular 2
35mUp-close with Structural Directives
17mContextual Template States with Angular