What is the purpose of ngSwitch directive?

NgSwitch directive is similar to JavaScript switch statement which displays one element from among several possible elements, based on a switch condition. In this case only the selected element placed into the DOM. It has been used along with NgSwitch, NgSwitchCase and NgSwitchDefault directives.

For example, let's display the browser details based on selected browser using ngSwitch directive.

<div [ngSwitch]="currentBrowser.name">
<chrome-browser *ngSwitchCase="'chrome'" [item]="currentBrowser"></chrome-browser>
<firefox-browser *ngSwitchCase="'firefox'" [item]="currentBrowser"></firefox-browser>
<opera-browser *ngSwitchCase="'opera'" [item]="currentBrowser"></opera-browser>
<safari-browser *ngSwitchCase="'safari'" [item]="currentBrowser"></safari-browser>
<ie-browser *ngSwitchDefault [item]="currentItem"></ie-browser>

July 09, 2022