Angular 8 ngSwitch Directive

In Angular 8,ngSwitch is a structural directive which is used to add or remove elements in DOM element.It has ngSwitch,ngSwitchCase and ngSwitchDefault directives.

ngSwitchCase:

In Angular ngSwitchcase directive are placed inside the inner elements of the container element.If the value matches with the ngSwitch then element is added to DOM.

ngSwitchDefault:

In Angular 8, ngSwitchDefault directive is displayed only when there is no match found.The ngSwitchDefault can be placed anywhere inside the container element.
Ok, Come let us look into the beautiful ngSwitch example.

<div class="col-md-5 offset-md-5">
<select [(ngModel)]="selectedpets">
    <option *ngFor="let pet of listpets" [value]="pet.petname">{{pet.petname}}<option>
<select>
<div>
         
<div class="col-md-5 offset-md-5" [ngSwitch]="selectedpets">
<div *ngSwitchCase="'DOG'" [ngStyle]="{'color':'blue','font-size.px':24,'font-weight':'bold'}"> You have selected faithful DOG<div>
<div *ngSwitchCase="'BIRD'" [ngStyle]="{'color':'red','font-size.px':24,'font-weight':'bold'}">You have selected beautiful BIRD<div>
<div *ngSwitchCase="'DUCK'" [ngStyle]="{'color':'brown','font-size.px':24,'font-weight':'bold'}">You have selected quack quack DUCK<div>
<div *ngSwitchDefault>Not Favourite<div>                        
<div>