Come utilizzare la direttiva angolare ngFor

Scopri tutto ciò che devi sapere su questa potente direttiva e su come semplifica notevolmente il lavoro con le sequenze.

Angular utilizza le direttive per eseguire il rendering dinamico di determinati elementi HTML sul tuo sito web. Una delle direttive strutturali che puoi utilizzare è ngFor.

La direttiva ngFor consente di ripetere lo stesso blocco un numero specificato di volte o di scorrere una serie di oggetti per visualizzarne i dettagli. È uno strumento potente che puoi utilizzare anche per eseguire il rendering di oggetti all'interno di altri oggetti.

Ha anche molte funzioni che possono essere utili in scenari specifici. Ciò include trovare il primo e l'ultimo elemento o saltare determinati elementi.

Come utilizzare ngFor per scorrere numeri statici

La direttiva ngFor è basata sul ciclo for, uno dei tanti cicli utili supportati da JavaScript. A partire dalla versione attuale di Angular (14), dovrai creare un array che contenga il numero di elementi che desideri scorrere.

Puoi creare un elenco all'interno dell'istruzione ngFor stessa. Il codice seguente ripeterà un paragrafo cinque volte, utilizzando gli indici da 0 a 4:
```
<div *ngFor='let item of [0, 1, 2, 3, 4]; let i = index'>
    <p> This is a repeated paragraph: {{item}} </p>
</div> 
```

Poiché il metodo sopra riportato potrebbe non essere adatto per array di grandi dimensioni, puoi anche creare dinamicamente un array nel file TypeScript:

export class ExampleClass implements OnInit {
  numbers: Array<number> = [];
  constructor() {
    // This will dynamically create the following array:
    // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
    this.numbers = Array(10).fill(1).map((x,i)=>i);
  }
}

È quindi possibile scorrere l'array di numeri nell'HTML:

<div *ngFor='let item of numbers; let i = index'>
    <p>This is a repeated paragraph: {{item}}</p>
</div>

Come saltare o dare uno stile a determinati numeri

Puoi utilizzare le variabili dispari o pari ngFor per determinare ogni secondo numero. Uno scenario in cui potresti trovarlo utile è se desideri dare uno stile a ogni riga pari o dispari in una tabella utilizzando un colore diverso.

Nel file CSS di un componente, aggiungi alcune nuove classi CSS. Questi sono gli stili che utilizzerai per determinati elementi con indici pari o dispari:
```
.red {
  color: red;
}
.blue { 
 color: blue; 
}
```
Dichiara variabili pari e dispari all'interno dell'istruzione ngFor. Queste sono variabili che Angular riconoscerà. Assegna la classe CSS rossa ai numeri pari e la classe CSS blu ai numeri dispari:
```
<div *ngFor='let item of numbers; let odd = odd; let even = even' [ngClass]="{red: even, blue: odd}">
    <p> This is a repeated paragraph: {{item}} </p>
</div>
```
Esegui il tuo sito web Angular utilizzando ng serve e aprilo nel browser web. Gli elementi HTML pari e dispari si alterneranno tra i diversi stili in base alla loro classe CSS:
Se vuoi saltare completamente ogni numero pari, puoi usare la direttiva ngIf. Ciò salterà tutti i numeri dispari e visualizzerà solo i numeri pari:
```
<div *ngFor='let item of numbers; let even = even'>
    <p *ngIf='even'> This is a repeated paragraph: {{item}} </p>
</div>
```

Come contare all'indietro

Per contare all'indietro, puoi utilizzare metodi tradizionali come invertire un elenco o contare all'indietro attraverso il ciclo utilizzando un indice.

Dichiarare una variabile indice nell'istruzione ngFor. All'interno di ngFor, inizia dalla lunghezza dell'array e deduci il numero di elementi che hai già ripetuto:
```
<div *ngFor="let item of numbers; let i = index;">
    <p> This is a repeated paragraph: {{numbers.length-i-1}} </p>
  </div>
```

Puoi anche creare un elenco invertito nel file TypeScript:

export class ExampleClass implements OnInit {
  numbers: Array<number> = [];
  reversedList: Array<number> = [];
  constructor() {
    this.numbers = Array(10).fill(1).map((x,i)=>i);
    this.reversedList = this.numbers.slice().reverse();
  }
}

Scorrere l'elenco invertito utilizzando ngFor:

<div *ngFor='let item of reversedList; let i = index'>
    <p> This is a repeated paragraph: {{item}} </p>
</div>

Come modellare il primo e l'ultimo elemento in modo diverso

Puoi modellare il primo e l'ultimo elemento separatamente dagli altri elementi utilizzando le variabili angolari primo e ultimo. Questa è un'alternativa all'utilizzo di pseudo-classi CSS come :first-child.

Nell'istruzione ngFor, dichiara la prima e l'ultima variabile. Utilizza la direttiva ngClass per assegnare le classi CSS blu e rosse nei passaggi precedenti. Assegna la classe CSS blu al primo elemento e la classe CSS rossa all'ultimo elemento:
```
<div *ngFor='let item of numbers; let first = first; let last = last' [ngClass]= "{blue: first, red: last}"> 
    <p> This is a repeated paragraph: {{item}} </p> 
</div>
```

Come utilizzare un ngFor per scorrere gli oggetti

È possibile utilizzare la direttiva ngFor per scorrere gli oggetti e accedere alle loro singole variabili.

Crea un elenco di oggetti nel file TypeScript. In questo caso, ci sarà un elenco di persone con i loro dettagli:

export class ExampleClass implements OnInit {
  people = []; 
  constructor() {
    this.people = [
      { firstName: 'John', lastName: 'Smith', occupation: 'HR Manager', startDate: new Date("2019-02-05") },
      { firstName: 'Mary', lastName: 'Johnson', occupation: 'Technical Officer', startDate: new Date("2016-01-07") },
      { firstName: 'William', lastName: 'Brown', occupation: 'HR Officer', startDate: new Date("2018-03-03") },
    ];
  }
}

Nell'HTML, utilizza il ciclo ngFor per scorrere l'elenco delle persone. Ogni persona sarà accessibile utilizzando la variabile persona. Puoi utilizzare la variabile persona per accedere agli attributi di ogni persona:
```
<div *ngFor='let person of people; let i = index'>
    <h2> {{person.firstName}} {{person.lastName}} </h2>
    <p> {{person.occupation}} </p>
    <p> {{person.startDate}} </p>
</div>
```

Come utilizzare un ngFor annidato per visualizzare oggetti all'interno di altri oggetti

È possibile utilizzare un ciclo for nidificato per visualizzare oggetti all'interno di altri oggetti.

Modifica l'elenco delle persone. Ogni persona avrà una lista di contatti di emergenza. Memorizza ciascun contatto di emergenza come oggetto separato:

this.people = [
      {
        firstName: 'John',
        lastName: 'Smith',
        emergencyContacts: [
          { name: 'Amanda Smith', relationship: 'Wife', phone: '0441239876' },
          { name: 'Barry Smith', relationship: 'Son', phone: '0442239876'}
        ]
      },
      {
        firstName: 'Mary',
        lastName: 'Johnson',
        emergencyContacts: [
          { name: 'Mark Johnson', relationship: 'Husband', phone: '0443239876' }
        ]
      },
 ];

Nell'HTML, crea un ciclo nidificato all'interno del ciclo originale per scorrere ciascun contatto di emergenza e visualizzarne i dettagli:

<div *ngFor='let person of people; let i = index'>
    <h2> {{person.firstName}} {{person.lastName}} </h2>
    <div *ngFor='let contact of person.emergencyContacts; let j = index'>
      <h5> Emergency Contacts: </h5>
      <p> {{contact.name}} </p>
      <p> {{person.relationship}} </p>
      <p> {{person.phone}} </p>
    </div>
    
  </div>

Looping utilizzando ngFor in Angular

Puoi utilizzare la direttiva strutturale ngFor per scorrere dinamicamente gli elementi HTML sul tuo sito web. Ciò ti consentirà di ripetere lo stesso blocco per un numero di oggetti o per un numero specificato di volte.

Puoi anche usarlo per fare altri trucchi come saltare ogni numero pari o dispari o applicare uno stile al primo e all'ultimo elemento. Puoi anche usarlo per eseguire il rendering dinamico di molti oggetti all'interno di altri oggetti.

Esistono altre direttive Angular che puoi utilizzare per rendere il tuo sito web più dinamico. Questi includono ngIf, ngSwitch, ngStyle, ngClass e ngModel.