
**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.

```javascript
<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>
```

What is the purpose of ngSwitch directive?

Angular is a TypeScript-based open-source front-end platform that makes it easy to build applications with in web/mobile/desktop.

What is Angular Framework?

Modules are logical boundaries in your application and the application is divided into separate modules to separate the functionality of your application.

What is a Angular module?

What are the steps to use animation module?

Learn about ngcc, the Angular Compatibility Compiler, and how it allows you to use existing libraries in Angular Ivy projects.

What is ngcc in Angular Ivy and why is it important?

Polyfills are a tool for Angular developers, allowing them to use new features of JavaScript without worrying about compatibility with older browsers.

How to use polyfills in Angular application?

How do you manually register locale data?

The ngIf and hidden properties in Angular control element visibility in different ways.