{ "id": "api/common/NgSwitch", "title": "NgSwitch", "contents": "\n\n
\n
\n
\n \n API > @angular/common\n
\n
\n mode_edit\n code\n
\n
\n \n
\n

NgSwitchlink

\n \n \n \n \n \n
\n \n \n\n
\n \n
\n

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

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

See alsolink

\n \n
\n\n\n

NgModulelink

\n\n\n\n \n
\n

Selectorslink

\n \n \n \n
\n\n\n\n \n\n
\n

Propertieslink

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
PropertyDescription
\n \n @Input()
ngSwitch: any\n 		Write-Only\n \n \n \n
\n
\n\n\n\n \n\n\n \n
\n

Descriptionlink

\n \n

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

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

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

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

Usage Exampleslink

\n

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

\n\n<container-element [ngSwitch]=\"switch_expression\">\n <!-- the same view can be shown in more than one case -->\n <some-element *ngSwitchCase=\"match_expression_1\">...</some-element>\n <some-element *ngSwitchCase=\"match_expression_2\">...</some-element>\n <some-other-element *ngSwitchCase=\"match_expression_3\">...</some-other-element>\n <!--default case when there are no matches -->\n <some-element *ngSwitchDefault>...</some-element>\n</container-element>\n\n

The following example shows how cases can be nested:

\n\n<container-element [ngSwitch]=\"switch_expression\">\n <some-element *ngSwitchCase=\"match_expression_1\">...</some-element>\n <some-element *ngSwitchCase=\"match_expression_2\">...</some-element>\n <some-other-element *ngSwitchCase=\"match_expression_3\">...</some-other-element>\n <ng-container *ngSwitchCase=\"match_expression_3\">\n <!-- use a ng-container to group multiple root nodes -->\n <inner-element></inner-element>\n <inner-other-element></inner-other-element>\n </ng-container>\n <some-element *ngSwitchDefault>...</some-element>\n </container-element>\n\n\n
\n \n\n \n\n \n\n \n\n \n \n \n\n
\n
\n\n\n" }