ngSwitch, ngSwitchcase And ngSwitchDefault In Angular

The Code Points
0

ngSwitch, ngSwitchcase And ngSwitchDefault In Angular

The Code Points 0

The ngSwitch structural directive in Angular allows us to add and remove DOM elements. It's compatible with the ngSwitchcase and ngSwitchDefault directives. It's analogous to JavaScript's switch statement. In this article, we will learn about the syntax of ngSwitch, ngSwitchcase, and ngSwitchDefault. We will give an example to demonstrate how to use these directives. ngSwitch Example, numerous ngSwitchCase, Loose Equality Checks, and other examples are included.

Angular ngSwitch Directive

The ngSwitch directive is an Angular directive that allows us to display one or more DOM components based on a condition.

The syntax of ngSwitch is as follows. It consists of three distinct directions. ngSwitch, ngSwitchCase, and ngSwitchDefault are three different types of switches.

Syntax of ngSwitch

<container_element [ngSwitch]="switch_expression">
    <inner_element *ngSwitchCase="match_expresson_1">...</inner_element>
    <inner_element *ngSwitchCase="match_expresson_2">...</inner_element>
    <inner_element *ngSwitchCase="match_expresson_3">...</inner_element>
    <inner_element *ngSwitchDefault>...</element>
</container_element>


ngSwitch

ngSwitch is associated with container elements such as div and others. Using property binding syntax, we provide the ngSwitch a switch-expression. At runtime, Angular analyses the switch_expression and shows or hides the elements in the DOM based on their value.

ngSwitchCase

The inner element that ngSwitchCase is bound to must be placed inside the container element. Because it is a structural directive, we use * (Asterix symbol). We also give Angular a match expression to evaluate at runtime. When the value of the match expression matches the value of the switch expression, Angular displays the inner element; otherwise, it is deleted from the DOM.

If there are multiple matches, it will show them all.

ngSwitchDefault

The inner element that ngSwitchDefault is tied to must be placed inside the container element. It, however, lacks a match expression. Angular displays the element connected to the ngSwitchDefault if none of the ngSwitchCase match expressions match the switch expression.

ngSwitchDefault can be placed anywhere within the container element, not just at the bottom.

You can use as many ngSwitchDefault directives as you like. All of them are displayed by Angular.

Key Points

  • ngSwitchCase and ngSwitchDefault must be inside the ngSwitch directive.
  • Every element that matches the switch expression is displayed by Angular.
  • If no matches are found, angular displays all items that have the ngSwitchDefault directive.
  • One or more ngSwitchDefault elements can be placed anywhere inside the container element, not just at the bottom.
  • Any element outside of any NgSwitchCase or ngSwitchDefault directive within the ngSwitch statement is shown as is.
  • The elements are removed from the DOM rather than hidden.
  • To compare the ngSwitchCase and ngSwitch expressions, Angular employs loose equality tests. This indicates that the empty string "" is equal to 0.
  • Using the ngTemplateOutlet, you may share a template across several ngSwitchCase.

ngSwitch Example

Create a new Angular project and  Add the following code into the index.html file to add the bootstrap CSS to the project.
<link crossorigin="anonymous" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" rel="stylesheet"></link>

Now, open the app.component.ts file, create a variable called num.
num: number= 0;

Now, Open the app.component.html and add the following code:
<div class='card'>
  <div class='card-header'>
    ngSwitch Example
  </div>
  <div class="card-body">
    Input string : <input type='text' [(ngModel)]="num" />
 
    <div [ngSwitch]="num">
      <div *ngSwitchCase="'1'">One</div>
      <div *ngSwitchCase="'2'">Two</div>
      <div *ngSwitchCase="'3'">Three</div>
      <div *ngSwitchCase="'4'">Four</div>
      <div *ngSwitchCase="'5'">Five</div>
      <div *ngSwitchDefault>This is Default</div>
    </div>
  </div>
</div>

Now, We bind the num variable to the input box.
<div [ngSwitch]="num">

We link the ngSwitch directive to the expression num after attaching it to the div element.
<div *ngSwitchCase="'1'">One</div>

Following that, we have a couple ngSwitchCase directives with matching expressions "1," "2," and so on tied to the div element. ngSwitchCase displays the element attached to it if the num matches these expressions; else, it removes it from the DOM.
<div *ngSwitchDefault>This is Default</div>

The ngSwithcDefault does not accept any expressions and only appears when all other ngSwitchCase match expressions fail.

Example of ngSwitchcase In Angular


Loosely Checks

To compare the ngSwitchCase and ngSwitch expressions, Angular employs loose equality tests. This indicates that the empty string "" is equal to 0.
<div class='card'>
  <div class='card-header'>
    loose equality Empty string, "" matches 0
  </div>
 
  <div class="card-body">
 
    Input string : <input type='text' [(ngModel)]="num" />
 
    <div [ngSwitch]="num">
      <div *ngSwitchCase="0">Zero is Selected</div>
      <div *ngSwitchCase="1">One is Selected</div>
      <div *ngSwitchCase="2">Two is Selected</div>
      <div *ngSwitchDefault>This is Default 2</div>
    </div>
 
 
  </div>
</div>


Multiple ngSwitchCase

You could also wish to share the template with two different values. For instance, one template for values one and two, and another for values three and four. One possibility is to use the same template for each switch situation. You may also distribute the template using the ngTemplateOutlet, as demonstrate below.
<div class='card'>
  <div class='card-header'>
    Sharing Templates
  </div>
 
  <div class="card-body">
 
    <select [(ngModel)]="selectedValue4">
      <option *ngFor="let item of items;" [value]="item.name">{{item.name}}</option>
    </select>
    
 
    <ng-container [ngSwitch]="selectedValue4">
 
      <ng-container *ngSwitchCase="'One'">
        <ng-container *ngTemplateOutlet="sharedTemplate12"></ng-container>
      </ng-container>
      <ng-container *ngSwitchCase="'Two'">
        <ng-container *ngTemplateOutlet="sharedTemplate12"></ng-container>
      </ng-container>
 
      <ng-container *ngSwitchCase="'Three'">
        <ng-container *ngTemplateOutlet="sharedTemplate34"></ng-container>
      </ng-container>
 
      <ng-container *ngSwitchCase="'Four'">
        <ng-container *ngTemplateOutlet="sharedTemplate34"></ng-container>
      </ng-container>
 
      <ng-template #sharedTemplate12>Shared between 1,2</ng-template>
      <ng-template #sharedTemplate34>Shared between 3,4</ng-template>
      <ng-container *ngSwitchDefault>Default Template</ng-container>
 
    </ng-container>
 
  </div>
</div>

Conclusion

In this article, we learned about the syntax and how to use ngSwitch, ngSwitchcase, and ngSwitchDefault. In next article we learn about the ngIf Directives In Angular and how to use it.

I hope this article helps you and you will like it.👍

If you have any doubt or confusion then free to ask in comment section.
Tags:

Post a Comment

Previous Post Next Post