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 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</span>
  <span *ngSwitchCase="1" class="penombra">Penombra</span>
  <span *ngSwitchCase="2" class="illuminata">Illuminata</span>
</div>

Se il valore impostato per la variabile "luminosita", fosse 2, allora verrebbe visualizzato il tag con l'attributo di classe impostato a "illuminata".

Nel caso in cui, il valore della variabile non corrisponda a 0 o 1 o 2, non verrà visualizzato alcun tag figlio.

In alternativa è possibile usare una terza direttiva *ngSwitchDefault che ti permetterà di visualizzare sempre almeno un tag figlio, nell'ipotesi le precedenti condizioni non siano soddisfatte dai valori analizzati dai precedenti ngSwitchWhen. Potrebbe succedere infatti che l'applicazione non sia in grado di leggere il dato remoto, fornito dal sensore.

<h1>Luminosità della Cucina</h1>
<div [ngSwitch]="luminosita">
  <span *ngSwitchCase="0" class="buio">Buia</span>
  <span *ngSwitchCase="1" class="penombra">Penombra</span>
  <span *ngSwitchCase="2" class="illuminata">Illuminata</span>
  <span *ngSwitchCase class="errore">Errore Lettura</span>
</div>

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.9/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.