Valentine Awe

Angular Magical directives

What if you could stop repeating yourself in Angular? Master four magical directives to build truly reusable components.

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.

Job ad Dark

SabIna compys

SabIna compys
Vienna, Austria

Remote
€20-100K
Intermediate
JavaScript
.NET
+1

Matching moments

Exploring the core pillars of Angular architecture
01:40 MIN

Exploring the core pillars of Angular architecture

Angular Unleashed: Mastering Modern Web Development with Angular

Understanding the core concepts of the Angular framework
01:16 MIN

Understanding the core concepts of the Angular framework

Angular Unleashed: Mastering Modern Web Development with Angular

Understanding Angular as a complete development platform
04:30 MIN

Understanding Angular as a complete development platform

Angular <> Angular CDK - Awesomeness Combined

Key Angular features for building robust applications
07:34 MIN

Key Angular features for building robust applications

Differential Loading

Introducing the Angular.love developer community
00:36 MIN

Introducing the Angular.love developer community

Community Interview: angular.love

Understanding Angular's foundation and role at Google
02:02 MIN

Understanding Angular's foundation and role at Google

State of Angular

Manipulating the DOM with directives and pipes
04:21 MIN

Manipulating the DOM with directives and pipes

Angular Unleashed: Mastering Modern Web Development with Angular

Using web components to abstract framework details
04:47 MIN

Using web components to abstract framework details

Advanced Micro Frontends: Multi-Version and Multi-Framework Scenarios

Featured Partners

Related Videos

See all videos
Stand alone components in Angular28:11

Stand alone components in Angular

Valentine Awe

Angular <> Angular CDK - Awesomeness Combined35:49

Angular <> Angular CDK - Awesomeness Combined

Muhammad Ahsan Ayaz

Angular Features You Should be Using36:22

Angular Features You Should be Using

Sani Yusuf

Angular Unleashed: Mastering Modern Web Development with Angular58:56

Angular Unleashed: Mastering Modern Web Development with Angular

Indu Chaube

Extending HTML with Web Components41:54

Extending HTML with Web Components

Rowdy Rabouw

Angular tips/tricks you can use from tomorrow on50:28

Angular tips/tricks you can use from tomorrow on

Benedikt Starzengruber

State of Angular41:34

State of Angular

Jessica Janiuk

Sustainable Angular Architectures with Nx and Strategic Design50:57

Sustainable Angular Architectures with Nx and Strategic Design

Manfred Steyer

Related Articles

View all articles
CH
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...
All the videos of Halfstack London 2024!
DC
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 ...
The State of HTML 2024: What can we learn from it?
AP
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...
11 Tips to Make The Most Out of Your First World Congress 

From learning to earning

Jobs that call for the skills explored in this talk.

Frontend Developer

Frontend Developer

JO Media Software Solutions GmBh
Brunn am Gebirge, Austria

Senior
CSS
Angular
JavaScript
TypeScript