What if you could stop repeating yourself in Angular? Master four magical directives to build truly reusable components.
#1about 1 minute
Overview of Angular's core structural directives
An introduction to the four key directives for building clean and reusable components: ng-template, ng-container, ng-content, and ng-template-outlet.
#2about 3 minutes
How to use ng-template for conditional rendering
Learn how ng-template represents an Angular template without rendering to the DOM until explicitly called, which is useful for complex `ngIf/else` logic.
#3about 3 minutes
Using ng-container to avoid extra DOM elements
Use ng-container as a grouping element that doesn't create an extra node in the DOM, helping to write cleaner HTML and improve performance.
#4about 5 minutes
Creating reusable components with ng-content
Implement content projection using ng-content to pass content into a component, and use the `select` attribute for multi-slot projection.
#5about 8 minutes
Building highly configurable components with ng-template-outlet
Leverage ng-template-outlet to create highly dynamic components by providing default templates and passing contextual data into a template.
#6about 7 minutes
Q&A on styling, dynamic components, and performance
Audience questions are answered regarding styling projected content without `::ng-deep`, handling many template variations, and performance considerations.
Related jobs
Jobs that call for the skills explored in this talk.
The HTML Elements That You’re Probably Over-EngineeringAs frameworks have become more and more commonplace in the world of web development, so too has the over-engineering of features made possible by our humble old friend, HTML.
The mental models that come with using state management in React, Vue and o...
Daniel Cranney, Chris Heilmann
Dev Digest 215: Agent Memory, JS2026, Googlebot Analysis & Canvas❤️HTMLInside last week’s Dev Digest 215 .
🗿 Make AI talk like a caveman
🧠 A guide to context engineering for LLMs
🤖 Simon Willison on agentic engineering
🔐 Axios supply chain attack post mortem
🛡️ Designing AI agents to resist prompt injection
🎨 HTML in c...
28:11
35:49
36:22
50:28
41:34
50:57
33:18
28:56
