Skip to main content

angular - How to use switch case default

app.component.ts 

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  textColor: String = "green";
}
app.component.html 

<h2>Angular Swith Case Default</h2>

<div [ngSwitch]="textColor">
    <h3 *ngSwitchCase="'red'" style="color: red ;">
        Red color
    </h3>
    <h3 *ngSwitchCase="'green'" style="color: green ;">
        Green color
    </h3>
    <h3 *ngSwitchCase="'blue'" style="color: blue ;">
        Blue color
    </h3>
    <h3 *ngSwitchCase="'yellow'" style="color: yellow ;">
        Yellow color
    </h3>
    <h3 *ngSwitchDefault>
        Unknown color
    </h3>
</div>
More Angular tutorials
Labels: