creareapp angularngFor Direttiva Angular 4: come usarla nel template

Una tecnica molto usate per includere pezzi di DOM in modo dinamico all'interno di un template, è usare le direttive. In questo tutorial vedremo la direttiva ngFor.

Ultimo aggiornamento: 3 giorni fa

Come visto nel precedente tutorial, Angular offre una serie di strumenti per manipolare il DOM e dotare alcuni tag dell'HTML, di funzionalità non presenti nel linguaggio nativo. In Angular, sono presenti quelli che vengono chiamate DIRETTIVE. Non ti devi spaventare dal nome, perchè si tratta semplicemente di un insieme di notazioni predefinite in Angular, da incastrare all'interno di un normale tag HTML, e che permettono di dotarlo di nuove funzionalità. Una tra queste, è la direttiva ngFor.

Scopo della direttiva ngFor

Tutte le volte che abbiamo la necessità di ripetere un particolare tag HTML, all'interno di una pagina, senza scomodare JavaScript, o linguaggi lato server, possiamo utilizzare la direttiva Angular ngFor. E' frequente infatti creare delle applicazioni che visualizzino un insieme di articoli, dotati di immagine, titolo, descrizione. Ognuno di questi articoli potrebbe essere ripetuto all'interno di un tag <article>  come nella rappresentazione qui sotto:

<div class="news">  
 <ul>  
    <li><h1>Titolo Notizia 1 </h1><p>Descrizione notizia 1</p></li>  
    <li><h1>Titolo Notizia 2 </h1><p>Descrizione notizia 2</p></li>  
    <li><h1>Titolo Notizia 3 </h1><p>Descrizione notizia 3</p></li>  
</ul>  
</div>

Non conoscendo a priori, quanti articoli dovrò visualizzare, non mi è possibile prevedere nel template già i vari segnaposto da inserire, come visto nel tutorial precedente. Entra in azione allora la direttiva ngFor.

Uso della direttiva n...

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 3.7/5 basato su 79 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.