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.
ngSwitchDefault
directive is rendered.[NgSwitch]
statement but outside of any NgSwitchCase
or ngSwitchDefault
directive are preserved at the location.[ngSwitch]
Property | Description |
---|---|
@Input()ngSwitch: any | Write-Only |
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>
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>
© 2010–2020 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://v10.angular.io/api/common/NgSwitch