NgSwitch Direttiva Angular: come usarla nel Template

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

Ultimo aggiornamento: 7 giorni fa

Grazie alla direttiva strutturale con selettore *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 il valore booleano "vero" o "falso", quindi, con l'introduzione del blocco else in Angular (v4), possiamo decidere cosa fare anche nell'ipotesi l'espressione dia come risultato "falso".

In altri casi, potremmo 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 con selettore [ngSwitch], che dovrà essere usata con la seguente sintassi:

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

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

Come puoi osservare, si applica a tipiche strutture HTML che presentano un tag genitore e tanti figli. L'espressione viene valutata, e sulla base del valore restituito, sarà scelto il tipo di tag figlio da mostrare. E' chiaro che sarà visualizzato, solo il tag figlio il cui valore corrisponderà a quello 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 rappresenta l'intensità della luce attualmente imposta in una stanza, da 0 a 2, allora potrei far visualizzare all'utente, una lampadina di colore diverso, dal nero (buio), al giallo paglierino (tanta luce):

<h1>Luminosità della Cucina</h1>
<div [ngSwitch]="luminosita">
  <span *ngSwitchCase="0" class="buio">Buia</...

Ohps... scusami la fastidiosa interruzione, ma per questioni gestionali, tutti i tutorial completi gli ho spostati a questo link: WEBSU. Risulterà più semplice anche per te seguirli e chiedermi dei consigli. Ti aspetto, dai... bastano 5 secondi. Non buttare tutto lo sforzo fatto per arrivare qui.

Hai tempo per leggere? Angular

Non farti scappare il mio libro appena aggiornato: "Angular 100% Operativo". Un corso completo su Angular per imparare rapidamente le tecniche per creare WebAPP e non solo. Prenotalo cliccando l'immagine qui sotto

Categoria: Angular