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.

Matching moments

Recreating React components using AI and dev tools
04:56 MIN

Recreating React components using AI and dev tools

WeAreDevelopers LIVE – AI, Freelancing, Keeping Up with Tech and More

The industry's focus on frameworks over web fundamentals
11:32 MIN

The industry's focus on frameworks over web fundamentals

WeAreDevelopers LIVE – Frontend Inspirations, Web Standards and more

Exploring modern JavaScript performance and new CSS features
08:07 MIN

Exploring modern JavaScript performance and new CSS features

WeAreDevelopers LIVE – AI, Freelancing, Keeping Up with Tech and More

The only frontend stack that truly matters
11:10 MIN

The only frontend stack that truly matters

WeAreDevelopers LIVE – Frontend Inspirations, Web Standards and more

Building collaborative design tools and the neo-brutalism trend
03:05 MIN

Building collaborative design tools and the neo-brutalism trend

Slopquatting, API Keys, Fun with Fonts, Recruiters vs AI and more - The Best of LIVE 2025 - Part 2

Organizing a developer conference for 15,000 attendees
01:32 MIN

Organizing a developer conference for 15,000 attendees

Cat Herding with Lions and Tigers - Christian Heilmann

The challenge of keeping up with modern CSS
07:46 MIN

The challenge of keeping up with modern CSS

WeAreDevelopers LIVE – AI, Freelancing, Keeping Up with Tech and More

Scripting presentations and demos in VS Code
14:14 MIN

Scripting presentations and demos in VS Code

Devs vs. Marketers, COBOL and Copilot, Make Live Coding Easy and more - The Best of LIVE 2025 - Part 3

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 tips/tricks you can use from tomorrow on50:28

Angular tips/tricks you can use from tomorrow on

Benedikt Starzengruber

Angular Features You Should be Using36:22

Angular Features You Should be Using

Sani Yusuf

Extending HTML with Web Components41:54

Extending HTML with Web Components

Rowdy Rabouw

Angular Unleashed: Mastering Modern Web Development with Angular58:56

Angular Unleashed: Mastering Modern Web Development with Angular

Indu Chaube

State of Angular41:34

State of Angular

Jessica Janiuk

Building a framework-independent component library19:46

Building a framework-independent component library

Tobias Scholz

Related Articles

View all articles
BR
Benjamin Ruschin
The HTML Elements That You’re Probably Over-Engineering
As 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...
The HTML Elements That You’re Probably Over-Engineering
DC
Daniel Cranney
Exploring TypeScript: Benefits for Large-Scale JavaScript Projects
JavaScript is the backbone of web development, powering everything from small websites to large-scale enterprise applications. However, as projects grow in complexity, maintaining JavaScript code can become increasingly difficult. This is where TypeS...
Exploring TypeScript: Benefits for Large-Scale JavaScript Projects

From learning to earning

Jobs that call for the skills explored in this talk.

Architect Angular

Architect Angular

Krell Consulting & Training
Barcelona, Spain

Remote
€38K
Intermediate
API
RxJS
Cypress
+3