> For the complete documentation index, see [llms.txt](https://bharat-tiwari.gitbook.io/our-tech-journal/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://bharat-tiwari.gitbook.io/our-tech-journal/angular-4/builtin-directives/directive/ngswitch.md).

# ngSwitch

```markup
<div [ngSwitch]="paymentOptionSelected">
  <div *ngSwitchCase="'creditCard'"> <!-- 👈 Note the use of single quotes inside double quotes -->
      <CreditCardDetailsForm />
  </div>
  <div *ngSwitchCase="'check'">
      <BankAccountDetailsForm />
  </div>
  <div *ngSwitchCase="'paypal'">
      <PayPalAuth />
  </div>
  <div *ngSwitchDefault>
      <span> Please select one of the supported payment options </span>  
  </div>
</div>
```