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>
</div>