NgIf Direttiva Angular: come usarla nel template

Impareremo a visualizzare o meno alcuni elementi della pagina, sulla base della valutazione di un'espressione impostata su una variabile

Ultimo aggiornamento: 7 giorni fa

Capita spesso di dover visualizzare elementi nel DOM sulla base di valori precedentemente memorizzati all'interno di un database. Ad esempio, se stessimo progettando un'applicazione in grado di visualizzare tutte le luci accese all'interno di un appartamento, dovremmo predisporre una pagina simile a quella qui sotto:

<div class="lucistanza">  
<ul>  
<li>Luce Cucine</li>  
<li>Luce Sala Pranzo <i class="material-icons on">lightbulb_outline</i></li>  
<li>Luce Bagno: <i class="material-icons on">lightbulb_outline</i></li>  
</ul>  
</div>

dove grazie all'ausilio dell'attributo di classe "on" e "off", sono in grado di visualizzare un'icona a forma di lampadina, rispettivamente colorata oppure grigia.

Abbiamo già visto, in uno dei tutorial precedenti,come sia possibile ripetere ciclicamente un certo numero di elementi del DOM sulla base di valori recuperati da una sorgente dati esterna. Dati che potrebbero essere confezionati all'interno di un array o di un oggetto creato ad hoc (lucidb). Nel caso dell'esempio precedente, potrei quindi predisporre un template simile a questo:

<div class="lucistanza">  
 <ul>  
  <li *ngFor="let lucisingole of lucidb">  
    {{lucisingole.stanza}} <i *ngIf="lucisingole.stato == 'ON'" class="material-icon on">lightbulb_outline</i></li>   
  </li>  
 </ul>  
</div>

Come puoi osservare, all'interno del tag <i>, ho inserito la notazione *ngIf, e all'interno delle doppie virgolette, una condizione:

    lucisingole.stato == 'ON'

A seconda del risultato di questa uguaglianza, "vero" o "falso", il corrispondente tag <i> che ha associato la direttiva NgIf, sarà visualizzato oppure rimarrà nascosto. Questo significa che l'icone della lampadina potrà apparire oppure no, simulando la presenza di una luce accesa oppure spenta.

A partire da Angular 4, è possibile anche utilizzare un costrutto molto simile alla classica condizione if else di molti linguaggi di programmazione.

Per fare questo si può sfruttare questa notazione:

<div class="luce" *ngIf="lucisingole.stato == 'ON'; else luceoff">
  // qui inserisco il codice da visualizzare nel caso di luce ON
</div>
<ng-template #luceoff>
<div class="luce">
   // qui inserisco il codice da visualizzare nel caso di luce OFF
</div>
</ng-template>

Il blocco else, dovrà essere indicato in modo esplicito sfruttando la direttiva <ng-template> in cui è presente la variabile di template con nome #luceoff.

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