This is the archived documentation for Angular v6. Please visit angular.io to see documentation for the current version of Angular.

NgSwitch

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

See more...

NgModule

Selectors

Properties

Property Description
@Input()
ngSwitch: any
Write-only.

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.

<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>...</some-element> </container-element>
      
      <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>...</some-element>
</container-element>