NgSwitch

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]="..." property), define any inner elements inside of the directive and place a [ngSwitchWhen] property per element.

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

Examples

<span [ngSwitch]="toeChoice"> <!-- with *NgSwitch --> <span *ngSwitchWhen="'Eenie'">Eenie</span> <span *ngSwitchWhen="'Meanie'">Meanie</span> <span *ngSwitchWhen="'Miney'">Miney</span> <span *ngSwitchWhen="'Moe'">Moe</span> <span *ngSwitchDefault>other</span> <!-- with <template> --> <template [ngSwitchWhen]="'Eenie'"><span>Eenie</span></template> <template [ngSwitchWhen]="'Meanie'"><span>Meanie</span></template> <template [ngSwitchWhen]="'Miney'"><span>Miney</span></template> <template [ngSwitchWhen]="'Moe'"><span>Moe</span></template> <template ngSwitchDefault><span>other</span></template> </span>

Try the live example. See the Template Syntax section on ngSwitch for more details.