An easy guide on utilizing ngSwitch for datatype selection in Angular

Question

An easy guide on utilizing ngSwitch for datatype selection in Angular

While working in angular2, I came across a question regarding the usage of ngSwitch to load <div> tag based on the datatype of a variable. Is it possible to achieve something like this:

 <div [ng-switch]="value">
  <p *ng-switch-when="isObject(value)">This is Object</p>
  <p *ng-switch-when="isArray(value)">This is Array</p>
  <p *ng-switch-when="isBoolean(value)">This is Boolean</p>
  <p *ng-switch-when="isNumber(value)">This is Number</p>
  <p *ng-switch-default>This is Simple Text !</p>
</div>

Can we actually load the div tag based on the variable's datatype? If not, are there any potential workarounds for this scenario?

angular typescript instanceof typeof ng-switch

Answer 1

Answer №1

Another option is to implement the use of ngIf:

  <p *ngIf="isObject(value)">This content is an Object</p>
  <p *ngIf="isArray(value)">This content is an Array</p>
  <p *ngIf="isBoolean(value)">This content is a Boolean</p>
  <p *ngIf="isNumber(value)">This content is a Number</p>
  <p *ngIf="!isObject(value) || !isArray(value) || !isBoolean(value) || !isNumber(value)">This content is Simple Text!</p>

Answer 2

Another option is to implement the use of ngIf:

  <p *ngIf="isObject(value)">This content is an Object</p>
  <p *ngIf="isArray(value)">This content is an Array</p>
  <p *ngIf="isBoolean(value)">This content is a Boolean</p>
  <p *ngIf="isNumber(value)">This content is a Number</p>
  <p *ngIf="!isObject(value) || !isArray(value) || !isBoolean(value) || !isNumber(value)">This content is Simple Text!</p>

Answer 3

Answer №2

Sure, you have the ability to accomplish this task, however, it's best not to do it directly in the template. Instead, create a method in the controller to handle checking for a specific type:

import {Component} from '@angular/core'

@Component({
  selector: 'my-app',
  providers: [],
  template: `
    <div>
      <div [ngSwitch]="checkType(name)">
        <p *ngSwitchCase="'string'">is a string!</p>
        <p *ngSwitchDefault>default</p>
      </div>
    </div>
  `,
  directives: []
})
export class App {
  constructor() {
    this.name = 'Angular2 (Release Candidate!)'
  }

  checkType(value) {
    return typeof value
  }
}

Take a look at this working Plunker example.

It is recommended that you update your Angular version to RC first before proceeding with these changes.

Answer 4

Sure, you have the ability to accomplish this task, however, it's best not to do it directly in the template. Instead, create a method in the controller to handle checking for a specific type:

import {Component} from '@angular/core'

@Component({
  selector: 'my-app',
  providers: [],
  template: `
    <div>
      <div [ngSwitch]="checkType(name)">
        <p *ngSwitchCase="'string'">is a string!</p>
        <p *ngSwitchDefault>default</p>
      </div>
    </div>
  `,
  directives: []
})
export class App {
  constructor() {
    this.name = 'Angular2 (Release Candidate!)'
  }

  checkType(value) {
    return typeof value
  }
}

Take a look at this working Plunker example.

It is recommended that you update your Angular version to RC first before proceeding with these changes.

An easy guide on utilizing ngSwitch for datatype selection in Angular

Answer №1

Answer №2

Similar questions

ConfirmUsername is immutable | TypeScript paired with Jest and Enzyme

Utilizing Class Types in Generics with TypeScript

Configuring TypeScript to utilize worker_threads

Effortlessly passing props between components using React TypeScript 16.8 with the help

Incorporating Close, Minimize, and Maximize functionalities into a React-powered Electron Application

Steps for modifying the look of a button to display an arrow upon being clicked with CSS

Obtain a personalized response from an Angular HTTP service

Tips on expanding typings in TypeScript?

"Troubleshooting a case where mongoDB's updateOne function is

Retrieving Information from an Angular 2 Component

"Unlocking the Power of Angular: Mastering the Art of Ch

Nest may struggle with resolving dependencies at times, but rest assured they are indeed present

Implementation of setProperties method on LineLayer in MapBox encounters resolution issues

Mapped Generics in Typescript allows you to manipulate and

Troubleshooting Primevue Data table styling issues in Vue3

Reviewing for the presence of "Undefined" in the conditional statement within Transpiled Javascript code for

Avoiding misreading email content with mail-listener2 - Tips for ensuring your function reads the correct emails

When trying to click a button in an ion-footer, the (click) function may not execute initially

Angular 8 is throwing an error stating that the property 'token' is not recognized on the 'Object' data type

Is there a method in TypeScript to make an enum more dynamic by parameterizing it?