NgSwitch
A structural directive that adds or removes templates (displaying or hiding views) when the next match expression matches the switch expression.
See also
NgModule
Selectors
[ngSwitch]
Properties
| Property | Description |
|---|---|
@Input()
|
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
ngSwitchDefaultdirective is rendered. - Elements within the
[NgSwitch]statement but outside of anyNgSwitchCaseorngSwitchDefaultdirective 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>