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.
Matching moments
01:40 MIN
Exploring the core pillars of Angular architecture
Angular Unleashed: Mastering Modern Web Development with Angular
01:16 MIN
Understanding the core concepts of the Angular framework
Angular Unleashed: Mastering Modern Web Development with Angular
04:30 MIN
Understanding Angular as a complete development platform
Angular <> Angular CDK - Awesomeness Combined
07:34 MIN
Key Angular features for building robust applications
Differential Loading
00:36 MIN
Introducing the Angular.love developer community
Community Interview: angular.love
02:02 MIN
Understanding Angular's foundation and role at Google
State of Angular
04:21 MIN
Manipulating the DOM with directives and pipes
Angular Unleashed: Mastering Modern Web Development with Angular
04:47 MIN
Using web components to abstract framework details
Advanced Micro Frontends: Multi-Version and Multi-Framework Scenarios
Micro Components - a different approach to a simpler component-based webThere has been a lot of heated discussion lately in the web community about component based development. One side argued that Web Components are a standard we should follow whereas others complained that they still lag behind in what frameworks offer...
Chris Heilmann
All the videos of Halfstack London 2024!Last month was Halfstack London, a conference about the web, JavaScript and half a dozen other things. We were there to deliver a talk, but also to record all the sessions and we're happy to share them with you. It took a bit as we had to wait for th...
Daniel Cranney
The State of HTML 2024: What can we learn from it?The results of the State of HTML 2024 survey are in! Though the name suggests it’s HTML-only, the survey focuses on the web platform in a more general sense, giving us some fascinating insights into not only the state of the web, but also some sense ...
Anto Pranjić
11 Tips to Make The Most Out of Your First World Congress The world’s most awesome event for developers is taking place in less than a month! It’s been far too long since the last time we met in person, but that’s only going to make this year’s WeAreDevelopers World Congress a truly special experience. Conf...
From learning to earning
Jobs that call for the skills explored in this talk.
28:11
35:49
36:22
58:56
50:28
41:34
28:56
50:57
