creareapp angularngSwitch Direttiva Angular 4: come usarla nel Template

Vedremo un altra direttiva utile per manipolare il DOM, che ci permetterà di visualizzare o meno determinati tag figli, sulla base del verificarsi di una condizione sul padre.

Ultimo aggiornamento: 3 giorni fa

Grazie alla direttiva strutturale *ngIf, riusciamo a decidere se far visualizzare un determinato elemento del DOM, sulla base del risultato di un'espressione. Il risultato di ques'ultima può essere o vero o falso, quindi, con l'introduzione del blocco else in Angular 4, possiamo decidere cosa fare anche nell'ipotesi l'espressione dia come risultato falso.

In altri casi, potrei avere la necessità di valutare un'espressione e decidere cosa fare sulla base di più valori possibili, non solo vero o falso. Per questo, ci viene in aiuto la direttiva ngSwitch, che dovrà essere usata con la seguente sintassi:

<tagPadreHtml [ngSwitch]="espressione">
  <tagFiglio *ngSwitchCase="valoreA">AAA</tagfiglio>
  <tagFiglio *ngSwitchCase="valoreB">BBB</tagfiglio>
  <tagFiglio *ngSwitchCase="valoreC">CCC</tagfiglio>
</tagPadreHtml>

NB: Nota come ngSwitch, sia stata inserita all'interno delle parentesi quadre, quindi come un attributo.

Come puoi osservare, si applica a strutture HTML che presentano un tag padre e tanti figli. L'espressione viene valutata, e sulla base del valore restituito, verrà scelto il tipo di tag figlio da mostrare. E' chiaro che verrà visualizzato, solo il tag figlio che avra' il corrispondente valore inserito all'interno della direttiva *ngSwitchCase.

Ripresendo l'esempio dell'ipotetico applicativo per la gestione da remoto della nostra abitazione, visto con la direttiva ngIf, se all'interno della variabile "luminosita", avessi un valore che rapprese...

Per continuare la lettura, registrati gratuitamente alla "CreareApp StartUniversity" oppure effettua il login.

Novità

Non farti scappare il nuovo libro: "Angular 100% Operativo", in offerta su Amazon. Più di 200 pagine, con tutto il percorso per creare una WebAPP e imparare Angular in un quarto del tempo. Prenotalo cliccando l'immagine qui sotto:

Corso Angular 4 100% Operativo

Ti è servito il breve tutorial? Condividilo ADESSO sui social! Grazie :-)

Categoria: Direttive

Voto 3.7/5 basato su 89 Recensioni
© 2013-2017 CreareAPP.com - Tutti i diritti riservati. Tutorial e WebCAMP per creare app in Android e iOS
NB: Tutti i marchi citati sono di proprietà dei rispettivi proprietari. Android is a trademark of Google Inc.