Angular ngSwitch Directive With Examples

In the post Angular ngIf Directive With Examples we saw how to use ngIf directive but you may have a scenario where you need to render different elements based on different conditions. In such scenario you can use Angular ngSwitch directive rather than using ngIf several times.

Angular ngSwitch 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.

Syntax of Angular ngSwitch

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

1. Every view that matches is rendered.
2. If there are no matches, a view with the ngSwitchDefault directive is rendered.
3. ngSwitchDefault element is optional. If you don't use it, nothing will be rendered when there is no matching value.
4. Note that asterisk (*) precedes the ngSwitchCase which means it is a structural directive and used to add or remove DOM element.
5. If the value of the match_expression matches the value of the switch_expression, the corresponding element is added to the DOM. If the expression doesn’t match, then the element is excluded from the DOM.
6. The element that the ngSwitch directive is applied to is always included in the HTML document, ngSwitch is specified within square brackets.

Angular ngSwitch directive examples

There is an array of numbers and using ngSwitch you check if array length is equal to the passed number in ngSwitchCase or not.

Component

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  numArray: number[];
  size : number;

  constructor(){
    this.numArray = [1,2,3];
  }

  getSize() : number{
    this.size = this.numArray.length;
    return this.numArray.length;
  }
}

Template

<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <div>There are {{ getSize() }} numbers.</div>
      <div [ngSwitch]="getSize()">
        <span *ngSwitchCase="0">No number is added</span>
        <span *ngSwitchCase="1">One number is added</span>
        <span *ngSwitchCase="2">Two numbers are added</span>
        <span *ngSwitchCase="3">Three numbers are added</span>
      </div>
    </div>
  </div>
</div>

As you can see ngSwitchDefault is omitted here. If you want to add it then-

<div [ngSwitch]="getSize()">
  <span *ngSwitchCase="0">No number is added</span>
  <span *ngSwitchCase="1">One number is added</span>
  <span *ngSwitchCase="2">Two numbers are added</span>
  <span *ngSwitchCase="3">Three numbers are added</span>
  <span *ngSwitchDefault>More than three numbers are added</span>
</div>

ngSwitch with String values

If you are matching a literal string then you have to enclose it in single quotes. Suppose there is an array of strings and you pass one of the character from that array.

In the ngSwitch you want to match that character.

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  strArray: string[];
  constructor(){
    this.strArray = ['A', 'B', 'C', 'D'];
  }

  getChar() : String{
    return this.strArray[0];
  }
}

Template

<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <div [ngSwitch]="getChar()">
        <span *ngSwitchCase="'A'">Got A from the array</span>
        <span *ngSwitchCase="'B'">Got B from the array</span>
        <span *ngSwitchCase="'C'">Got C from the array</span>
        <span *ngSwitchCase="'D'">Got D from the array</span>
        <span *ngSwitchDefault>Soem other alphabet</span>
      </div>
    </div>
  </div>
</div>

As you can see string are enclosed in single quotes for matching the literal Strings.

That's all for this topic Angular ngSwitch Directive With Examples. If you have any doubt or any suggestions to make please drop a comment. Thanks!

>>>Return to Angular Tutorial Page

---

Related Topics

1. Angular ngStyle Directive With Examples
2. Angular ngClass Directive With Examples
3. Angular First App - Hello world Example
4. Angular @Component Decorator
5. Angular One-Way Data Binding Using String Interpolation

You may also like-

1. Angular Example to Render Multiple Rows
2. Forms in Angular
3. Nested Route (Child Route) in Angular
4. How to Install Node.js and NPM in Windows
5. StringJoiner Class in Java With Examples
6. HashSet in Java With Examples
7. Multiple Inheritance in Python
8. Difference Between @Controller And @RestController Annotations in Spring