NgSwitch

A structural directive that adds or removes templates (displaying or hiding views) when the next match expression matches the switch expression.

See more...

See also

• NgSwitchCase

• NgSwitchDefault

• Stuctural Directives

NgModule

• CommonModule

Selectors

• [ngSwitch]

Properties

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

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.

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>