Writing Compound Components in Angular
summary
Shows how to build one reusable breadcrumb container that manages state centrally so three visual variants no longer require three components, cutting duplication and conditional logic. Implementation details: parent grabs child templates via @ContentChild and TemplateRef, renders them with ngTemplateOutlet and context, exposes implicit state methods like itemClick and itemHover, and child items obtain the container reference using forwardRef (provider). Demo and examples are implemented in Storybook.
AI-written summary · about
related talks
21mCreating Container Components with Web Components and Angular
48mBuilding reusable Web components with Angular
30mReactive parenting with Angular 2
23mngTemplateOutlet: The secret to customisation
25mWeb components with Angular: The what, the why and the how.
28mReal-life Angular Architecture Lessons
28mFrom Scratch to Screen: The Art of Component Design in Angular
24mComponents: Life Beyond Init and Destroy