Structural Directives in Angular

What does *ngIf, *ngFor, and *ngSwitch have in common? In this walk, we will be taking a deeper look into structural directives, and learn to create and use custom structural directives in our applications.

This talk was first presented at Angular Singapore's meetup on 4 October 2022.

Transcript

2. Directives: Building Blocks of Angular Modifies functionality/behavior of DOM elements Component Directive with template (unlike the others) Attribute Set custom behavior or appearance Works with element Can be stacked Structural Add/remove elements in the DOM Works with template Can’t be stacked [ngClass], [ngStyle] *ngIf, *ngFor, *ngSwitch
7. Creating a Custom Structural Directive 󰗊
8. Example 1 *appIfNot! The simplest form
9. Example 1 Extended *appNot + else With multiple inputs
10. Example 2 Role Based Access
11. Repeating code everywhere Keep your code DRY with directives
12. Where to go from here? • Learn more about attribute directives! • Implement your own directives • Learn to use context to pass data into structural directives (advanced)
13. Keep in touch? Eileen Chua @eileenbuilds Demo Code: GitHub / Stackblitz