@angular/common

NgSwitch

directive

The [ngSwitch] directive on a container specifies an expression to match against. The expressions to match are provided by ngSwitchCase directives on views within the container.

Every view that matches is rendered.
If there are no matches, a view with the ngSwitchDefault directive is rendered.
Elements within the [NgSwitch] statement but outside of any NgSwitchCase or ngSwitchDefault directive are preserved at the location.

API

  
    class NgSwitch {}

ngSwitch

any

Description

The [ngSwitch] directive on a container specifies an expression to match against. The expressions to match are provided by ngSwitchCase directives on views within the container.

Every view that matches is rendered.
If there are no matches, a view with the ngSwitchDefault directive is rendered.
Elements within the [NgSwitch] statement but outside of any NgSwitchCase or ngSwitchDefault directive are preserved at the location.

Exported by

CommonModule

Usage Notes

Define a container element for the directive, and specify the switch expression to match against as an attribute:

          <container-element [ngSwitch]="switch_expression">

Within the container, *ngSwitchCase statements specify the match expressions as attributes. Include *ngSwitchDefault as the final case.

          <container-element [ngSwitch]="switch_expression">   <some-element *ngSwitchCase="match_expression_1">...</some-element>...   <some-element *ngSwitchDefault>...</some-element></container-element>

Usage Examples

The following example shows how to use more than one case to display the same view:

          <container-element [ngSwitch]="switch_expression">  <!-- the same view can be shown in more than one case -->  <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>  <!--default case when there are no matches -->  <some-element *ngSwitchDefault>...</some-element></container-element>

The following example shows how cases can be nested:

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