WeAreDevelopers Logo WeAreDevelopers
Sign in
For You LIVE
World Congress 2022 • Jun 15, 2022

Angular Magical directives

Valentine Awe

Still relying on external frameworks for your UI? Master Angular's magical structural directives to build flexible, highly reusable components without polluting your DOM.

Pause
Mute Enter Fullscreen
#1 about 4 min

Introduction to building reusable Angular components

An introduction to solving UI duplication by building reusable component libraries in Angular without relying on external dependencies.

#2 about 3 min

Understanding and utilizing the ng-template directive

How Angular uses ng-template under the hood for structural directives and how it enables complex conditional rendering logic.

#3 about 3 min

Grouping elements cleanly with the ng-container directive

Using ng-container to group elements without introducing redundant tags or invalid HTML block structures to the DOM tree.

#4 about 5 min

Projecting content with ng-content and multi-slot projection

Projecting HTML layout into reusable components and explicitly targeting destination slots using specific CSS selectors.

#5 about 4 min

Using ngTemplateOutlet to provide default projected content

How to pass template references to components to instantiate default UI blocks when custom projection data is omitted.

#6 about 2 min

Reusing exact templates across views with ngTemplateOutlet

Duplicating identical UI elements across a page without violating the DRY principle by dynamically injecting a single layout template.

#7 about 4 min

Supplying context bindings for highly dynamic layout components

Passing local context variables to ngTemplateOutlet to render complex dynamic layouts based on runtime template inputs.

#8 about 2 min

Styling content-projected elements globally using host-context

Addressing concerns around the deprecated ng-deep operator and applying localized styles cleanly using the host-context CSS rule.

#9 about 6 min

Evaluating template performance and managing child content bindings

Examining the performance impacts of runtime templates versus structural placeholder components and listening to projected changes using view hooks.

Matching moments

3:04 min

Manipulating user interfaces with Angular directives

Indu Chaube · LIVE

8:34 min

Exploring Angular component patterns and upcoming framework updates

Benedikt Starzengruber · LIVE

2:54 min

Fundamental architecture and modules in Angular applications

Indu Chaube · LIVE

4:07 min

Simplifying custom component development with Angular CDK

Muhammad Ahsan Ayaz · WWC 2021

3:46 min

The rise of modern component-based frameworks and modular architecture

Sasha Shynkevich · LIVE

1:13 min

Understanding the basics of Angular schematics

Stanimira Vlaeva · LIVE

More from World Congress 2022

What the heck do "declarative" and "reactive" actually mean? thumbnail
30:40
almost 4 years ago

What the heck do "declarative" and "reactive" actually mean?

André Kovac

The Design and Evolution of C++ thumbnail
1:01:15
about 4 years ago

The Design and Evolution of C++

Bjarne Stroustrup

But, you're not Facebook thumbnail
31:12
about 4 years ago

But, you're not Facebook

Kristijan Ristovski

Communicate efficiently with Software Architecture Diagrams thumbnail
28:11
about 4 years ago

Communicate efficiently with Software Architecture Diagrams

Simon Lasselsberger

Get Ready for Jakarta EE 10! thumbnail
42:53
about 4 years ago

Get Ready for Jakarta EE 10!

Ivar Grimstad

Keep your code refactorable thumbnail
26:46
about 4 years ago

Keep your code refactorable

Gerrit Stapper

Upcoming sessions on this topic

Open session

World Congress 2026 North America

Architecting AI in Angular: WebMCP, A2UI, and the Agent Experience

Ankita Sood

Sr. Principal Engineer @ Secureworks | Angular GDE

Ankita Sood
Open session

World Congress 2026 North America

Beyond Vibe Coding: An AI Builder’s Guide to Migrating 10k+ React Components

Shubham Chaurasia

Senior Software Engineer @ Meta

Shubham Chaurasia
Open session

World Congress 2026 North America

The Agentic Engineering Loop

Kevin Lin

Member of Technical Staff at OpenAI

Kevin Lin
Open session

World Congress 2026 North America

MicroAgents: The Microservices of the Agentic Era

Ashish Shubham

Runs the show bussiness at ThoughtSpot

Ashish Shubham
Open session

World Congress 2026 North America

Designing APIs That Survive AI Agents at Scale

Phani Pendurthi

Mastercard, Principal Software Engineer

Phani Pendurthi
Open session

World Congress 2026 North America

How to generate business value through performance optimizations

Nikolai Sidiropulo

Software Engineer at Meta

Nikolai Sidiropulo

Related videos

Angular tips/tricks you can use from tomorrow on thumbnail
50:28
LIVE • over 4 years ago

Angular tips/tricks you can use from tomorrow on

Benedikt Starzengruber

Angular <> Angular CDK - Awesomeness Combined thumbnail
35:49
WWC 2021 • about 5 years ago

Angular <> Angular CDK - Awesomeness Combined

Muhammad Ahsan Ayaz

Angular Unleashed: Mastering Modern Web Development with Angular thumbnail
58:56
LIVE • almost 3 years ago

Angular Unleashed: Mastering Modern Web Development with Angular

Indu Chaube

Extending HTML with Web Components thumbnail
41:54
WWC 2022 • about 4 years ago

Extending HTML with Web Components

Rowdy Rabouw

Angular Features You Should be Using thumbnail
36:22
WWC 2021 • about 5 years ago

Angular Features You Should be Using

Sani Yusuf

Stand alone components in Angular thumbnail
28:11
WWC 2023 • almost 3 years ago

Stand alone components in Angular

Valentine Awe

Related articles

From learning to earning

Jobs that call for the skills explored in this talk.