@angular/common

NgSwitch

directive

deprecatedsince v20.0

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.

NgSwitchCase NgSwitchDefault Structural Directives

Deprecation warning

Use the @switch block instead. Intent to remove in a future major release

[orthos-back.svg]

API

    
      class NgSwitch {  @Input() set ngSwitch(value: any);}

ngSwitch

any

@deprecated

Use the @switch block instead. Intent to remove in a future major release

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>

NgSwitch

On this page

API

ngSwitch

Description

Exported by

Usage Notes

Usage Examples

Social Media

Community

Resources

Community translations