NgFor Direttiva Angular: 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: 7 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 quelle che vengono chiamate DIRETTIVE (strutturali e attributo). 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 con selettore [ngFor] anche se generalmente si usa notazione semplificata corrispondente a *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 NgFor

Ipotizzando di aver popolato un array di nome news, nel corpo della classe del mio componente, con notizie prelevate in qualche modo da una sorgente esterna, come nell'esempio qui sotto:

@Component({  
  selector: 'ca-notizie',  
  template: `  
   <div class="news">  
   <ul>  
    <li><h1>Titolo Notizia 1 </h1></li>  
    <li><h1>Titolo Notizia 2 </h1></li>  
    <li><h1>Titolo Notizia 3 </h1></li>  
   </ul>  
  </div> `  
})  
export class NotizieComponent {  
}

invece di scrivere le righe sopra, per la sezione relativa al template, potrei scrivere queste righe:

<div class="news">  
 <ul>  
  <li *ngFor="let singolanews of news">  
    <h1>{{singolanews}}</h1>  
  </li>  
 </ul>  
</div>

Come vedi, ho inserito all'interno del tag <li> il simbolo di * seguito dalla parola ngFor. Ogni qualvolta Angular incontra questo simbolo, sa che dovrà ripetere nel DOM il tag su cui è presente, un certo numero di volte. Nel nostro caso dovrà ripeterlo, sulla base del numero di elementi presenti all'interno dell'array di nome news, che andrò a popolare all'interno del corpo della classe di quel componente. Se hai già esperienza di linguaggi di programmazione, la notazione ricorda quella che si usa per i classici cicli for.

NB: Non dimenticarti del simbolo *, perchè fa parte integrante della notazione. Ricordati poi che deve essere scritto attaccato alla parola ngFor e di rispettare le minuscole e maiuscole.

NB: Ricordati di inseririre le doppie virgolette, e all'interno, indica la variabile locale da usare e l'array da scorrere.

La variabile array locale singolanews, è stata poi inserita all'interno nel corpo del template, con la classica notazione delle doppie parentesi graffe, questo per beneficiare della tecnica dell'interpolazione, che ci permetterà di iniettare i valori presenti nell'array, all'interno del template.

Il componente di nome notizie.component.ts potrà essere scritto in questo modo:

@Component({  
      selector: 'ca-notizie',  
      template: `  
        <div class="news">  
         <ul>  
          <li *ngFor="let singolanews of news">  
           <h1>{{singolanews}}</h1>  
          </li>  
         </ul>  
        </div> `  
})  
export class NotizieComponent {  
      // corpo del componente
}

Affinchè la tua applicazione possa sfruttare questo nuovo componente, come al solito, dovrai aggiungerlo alla lista dei componenti nel file app.module.ts

Conclusione

Nell'ambito della manipolazione del DOM, tutte le volte che avrai la necessità di ripetere uguali tag html, sulla base di dati memorizzati in un array e prelevati da una sorgente esterna, la direttiva Angular NgFor, ti aiuterà a creare dei template con sezioni dinamiche. Nel prossimo tutorial vedremo un'altra direttiva molto usata e che ti permetterà di mostrare o meno, alcuni elemento dalla pagina o componente.

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