creareapp angularngSwitch Direttiva Angular 8: 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: 10 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 *ngSwitchC...

Davide CopelliOhps... 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.

Ti piace leggere libri tecnici? Novità Amazon

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, oppure con lo sconto Autore direttamente nel nostro sito qui: Sconto Autore + spedizione GRATIS

Corso Angular 100% Operativo

Categoria: Angular

Voto 4.1/5 basato su 89 Recensioni
© 2013-2019 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.