Utilizzare le direttive ngSwitch e ngSwitchCase di Angular

di Stefano Mostarda, in HTML5, Angular,

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.

Commenti

Visualizza/aggiungi commenti

| Condividi su: Twitter, Facebook, LinkedIn

Per inserire un commento, devi avere un account.

Fai il login e torna a questa pagina, oppure registrati alla nostra community.

Approfondimenti

I più letti di oggi