NgSwitch

export directive NgSwitch

exported from angular2/common defined in angular2/src/common/directives/ng_switch.ts (line 13)

Adds or removes DOM sub-trees when their match expressions match the switch expression.

Elements within NgSwitch but without NgSwitchWhen or NgSwitchDefault directives will be preserved at the location as specified in the template.

NgSwitch simply inserts nested elements based on which match expression matches the value obtained from the evaluated switch expression. In other words, you define a container element (where you place the directive with a switch expression on the [ngSwitch]="..." attribute), define any inner elements inside of the directive and place a [ngSwitchWhen] attribute per element.

The ngSwitchWhen property is used to inform NgSwitch which element to display when the expression is evaluated. If a matching expression is not found via a ngSwitchWhen property then an element with the ngSwitchDefault attribute is displayed.

Example (live demo)

@Component({selector: 'app'}) @View({ template: ` <p>Value = {{value}}</p> <button (click)="inc()">Increment</button> <div [ngSwitch]="value"> <p *ngSwitchWhen="'init'">increment to start</p> <p *ngSwitchWhen="0">0, increment again</p> <p *ngSwitchWhen="1">1, increment again</p> <p *ngSwitchWhen="2">2, stop incrementing</p> <p *ngSwitchDefault>&gt; 2, STOP!</p> </div> <!-- alternate syntax --> <p [ngSwitch]="value"> <template ngSwitchWhen="init">increment to start</template> <template [ngSwitchWhen]="0">0, increment again</template> <template [ngSwitchWhen]="1">1, increment again</template> <template [ngSwitchWhen]="2">2, stop incrementing</template> <template ngSwitchDefault>&gt; 2, STOP!</template> </p> `, directives: [NgSwitch, NgSwitchWhen, NgSwitchDefault] }) export class App { value = 'init'; inc() { this.value = this.value === 'init' ? 0 : this.value + 1; } } bootstrap(App).catch(err => console.error(err));

Selectors

[ngSwitch]

Inputs

ng-switch bound to NgSwitch.ngSwitch

Members

ngSwitch

Not Yet Documented