A volte abbiamo l'esigenza di mostrare frammenti di UI in base al valore di un campo. Per fare un esempio, supponiamo che l'utente debba decidere come pagare. La UI mette a disposizione una dropdown contententi i valori "Carta di credito" e "Bonifico". Se l'utente seleziona "Carta di credito" la UI mostra i campi per inserire i dati della carta, altrimenti mostra i dati per il bonifico.
La direttiva ngIf è comoda, ma quando il numero di opzioni comincia ad aumentare, richiede un pò di codice HTML. In questi casi torna più comoda la direttiva ngSwitch in associazione con la direttiva ngSwitchCase.

<div [ngSwitch]="paymentType">
  <input *ngSwitchCase="'cc'" [formControlName]="cc">
  <input *ngSwitchCase="'bb'" [formControlName]="bb">
</div> 

La direttiva ngSwitch specifica il campo in base al quale basare lo switch, mentre la direttiva ngSwitchCase decide se renderizzare o meno il frammento di HTML confrontando il valore che gli passiamo col valore del campo specificato in ngSwitch. Nel nostro caso, se l'utente seleziona Carta di credito ("cc"), allora viene renderizzata la prima textbox, altrimenti viene renderizzata la seconda.