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
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Reactive form tipizzati con modellazione del FormBuilder in Angular
Eseguire query manipolando liste di tipi semplici con Entity Framework Core
Eseguire le GitHub Actions offline
Eseguire una query su SQL Azure tramite un workflow di GitHub
Sfruttare MQTT in cloud e in edge con Azure Event Grid
Cache policy su route groups di Minimal API in ASP.NET Core 7
Reactive form tipizzati con FormBuilder in Angular
Inizializzare i container in Azure Container Apps
Effettuare update massivi con Entity Framework Core 7
Miglioramenti nell'accessibilità con Angular CDK
Eseguire attività basate su eventi con Azure Container Jobs
Eseguire un metodo asincrono dopo il set di una proprietà in Blazor 8