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: 26 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... il tutorial completo è stato inserito a 2 click da qui, entrando nei tutorial gratuiti della "WebSU". Troverai tutti i miei tutorial su Angular qui presenti, ma aggiornati e ampliati. Se sei già entrato in passato, effettua il login. Ti aspetto tra 2 click! (Davide Copelli)

Categoria: Angular

Voto 4.5/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.