Structural Directives

Conditional display of hero

{{ hero.name }}

List of heroes

• {{ hero.name }}

---

NgIf

Expression is true and ngIf is true. This paragraph is in the DOM.

Expression is false and ngIf is false. This paragraph is not in the DOM.

Expression sets display to "block". This paragraph is visible.

Expression sets display to "none". This paragraph is hidden but still in the DOM.

NgIf with template

<ng-template> element

{{ hero.name }}

---

<ng-container>

*ngIf with a <ng-container>

Toggle hero

I turned the corner and saw {{ hero.name }}. I waved and continued on my way.

I turned the corner and saw {{ hero.name }}. I waved and continued on my way.

<select> with <span>

Pick your favorite hero (show sad) {{ h.name }} ({{ h.emotion }})

<select> with <ng-container>

Pick your favorite hero (show sad) {{ h.name }} ({{ h.emotion }})

---

NgFor

<div *ngFor="let hero of heroes; let i=index; let odd=odd; trackBy: trackById" [class.odd]="odd">

({{ i }}) {{ hero.name }}

<ng-template ngFor let-hero [ngForOf]="heroes" let-i="index" let-odd="odd" [ngForTrackBy]="trackById"/>

({{ i }}) {{ hero.name }}

---

NgSwitch

Pick your favorite hero

{{ h.name }} None of the above

NgSwitch

NgSwitch with <ng-template>

---

---

IfLoadedDirective

---

TrigonometryDirective

• sin(30°): {{ s }}
• cos(30°): {{ c }}
• tan(30°): {{ t }}