There are three structural directives in angular
*ngIf
[ngSwtich]
*ngFor
1. [ngSwtich] condition can be use when you wanted to testfy with mutlple values
In the below example [ngSwitch] directive is added to div and then compare the variable “color” using *ngSwitchCase
import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-test', template: ` <h1> Welcome {{name}} </h1> <div [ngSwitch] = "color"> <div *ngSwitchCase = "'red'"> Red color is selected </div> <div *ngSwitchCase= "'blue'"> Blue color is selected </div> <div *ngSwitchCase= "'green'"> Green color is selected </div> <div *ngSwitchDefault> Please select the color</div> </div> `, styles: [` `] }) export class TestComponent implements OnInit { public name = "Amey Raut"; public color ="red"; constructor() { } ngOnInit() { } }