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}}

template attribute

{{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}}

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

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

<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 template attribute

NgSwitch with <ng-template>

<template>

Hip!

Hip!

Hooray!

UnlessDirective

The condition is currently {{condition}}.

(A) This paragraph is displayed because the condition is false.

(B) Although the condition is true, this paragraph is displayed because myUnless is set to false.

UnlessDirective with template

Show this sentence unless the condition is true.

(A) <p template="myUnless condition" class="code unless">

(A) <template [myUnless]="condition">