creareapp angularngIf Direttiva Angular 4: 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: 3 giorni fa

Capita spesso di dover visualizzare elementi nel dom sulla base di valori precedentemente memorizzati all'interno di un database. Ad esempio se stessi progettando un'applicazione in grado di visualizzare tutte le luci accese all'interno di un appartamento, dovrei 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, e inserita all'interno di una array o di un oggetto creato ad hoc (lucidb). Nel caso dell'esempio potrei 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 ...

Per continuare la lettura, registrati gratuitamente alla "CreareApp StartUniversity" oppure effettua il login.

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 4.3/5 basato su 78 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.