How to use *ngSwitch in Angular 2+ Versions

Switch case is very popular among many languages weather on client side or server side. A switch provides flexibility to validate a section according to expressions. In this post, we will discuss the implementation of Switch cases in Angular 7 latest version.

*ngSwitch in Angular 2+ Versions

*ngSwitch workes on expressions, we can have multiple sections wrapped in various switch cases which can be shown according to truth expression.

NgSwitch takes a value which shows the view having a matching expression in switch cases.

<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 -->
  <some-element *ngSwitchDefault>...</some-element>


Here [ngSwitch] takes a value, which then matched in expression defined in *ngSwitchCase. If none of the expression matches then ngSwitchDefault view will be shown.

So let’s fill up above HTML with test expressions

    <div [ngSwitch]="switch_expression">
        <div *ngSwitchCase="'match_expression_1'">match_expression_1</div>
        <div *ngSwitchCase="'match_expression_2'">match_expression_2</div>
        <div *ngSwitchCase="'match_expression_3'">match_expression_3</div>
        <ng-container *ngSwitchCase="'match_expression_3'">
          <!-- use a ng-container to group multiple root nodes -->
          <div>match_expression_3 inner-element</div>
          <div>match_expression_3 inner-other-element</div>
        <div *ngSwitchDefault>Default</div>


Give switch_expression in component a value to show matching element.

export class AppComponent {

    this.switch_expression = "match_expression_2";

Now only “match_expression_2” will be visible as a matching case.

So here we discussed a quick example of ngSwitch in Angular 2+ versions.

About The Author

Leave a Comment

Your email address will not be published. Required fields are marked *