Structural Directives

Conditional display of hero

{{ hero.name }}

List of heroes

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>

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 ()

<select> with <ng-container>

Pick your favorite hero ()


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

NgSwitch

NgSwitch with <ng-template>

IfLoadedDirective

TrigonometryDirective