
Valentine Awe
Jun 15, 2022
Angular Magical directives

#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.
8 days ago
Angular Developer

Picnic Technologies B.V.
Amsterdam, Netherlands
Intermediate
Senior
today
Senior Fullstack Engineer

fonio GmbH
Remote
Senior
today
GTM & Automation Engineer

fonio GmbH
Remote
Intermediate
Senior