NgSwitch

What it does

Adds / removes DOM sub-trees when the nest match expressions matches the switch expression.

How to use

<container-element [ngSwitch]="switch_expression">
  <some-element *ngSwitchCase="match_expression_1">...</some-element>
  <some-element *ngSwitchCase="match_expression_2">...</some-element>
  <some-other-element *ngSwitchCase="match_expression_3">...</some-other-element>
  <ng-container *ngSwitchCase="match_expression_3">
    <!-- use a ng-container to group multiple root nodes -->
    <inner-element></inner-element>
    <inner-other-element></inner-other-element>
  </ng-container>
  <some-element *ngSwitchDefault>...</p>
</container-element>

Selectors

[ngSwitch]

Class Description

NgSwitch stamps out nested views when their match expression value matches the value of the switch expression.

In other words:

• you define a container element (where you place the directive with a switch expression on the [ngSwitch]="..." attribute)
• you define inner views inside the NgSwitch and place a *ngSwitchCase attribute on the view root elements.

Elements within NgSwitch but outside of a NgSwitchCase or NgSwitchDefault directives will be preserved at the location.

The ngSwitchCase directive informs the parent NgSwitch of which view to display when the expression is evaluated. When no matching expression is found on a ngSwitchCase view, the ngSwitchDefault view is stamped out.