Como usar a diretiva angular ngFor

Descubra tudo o que você precisa saber sobre essa diretiva poderosa e como ela facilita muito o trabalho com sequências.

Angular usa diretivas para renderizar dinamicamente certos elementos HTML em seu site. Uma das diretivas estruturais que você pode usar é ngFor.

A diretiva ngFor permite que você repita o mesmo bloco um número especificado de vezes, ou percorra uma matriz de objetos para exibir seus detalhes. É uma ferramenta poderosa que você pode usar até mesmo para renderizar objetos dentro de outros objetos.

Ele também tem muitas funções que podem ser úteis em cenários específicos. Isso inclui encontrar o primeiro e o último elemento ou pular certos itens.

Como usar ngFor para percorrer números estáticos

A diretiva ngFor é baseada no loop for, um dos muitos loops úteis que o JavaScript suporta. A partir da versão atual do Angular (14), você precisará criar uma matriz que tenha o número de itens que deseja percorrer.

1. Você pode criar uma lista dentro da própria instrução ngFor. O código a seguir repetirá um parágrafo cinco vezes, usando índices de 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>  

2. Como o método acima pode não ser adequado para matrizes grandes, você também pode criar dinamicamente uma matriz no arquivo TypeScript:

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

3. Você pode então percorrer a matriz de números no HTML:

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

Como pular ou estilizar certos números

Você pode usar o ímpar ou até ngPara variáveis ​​para determinar cada segundo número. Um cenário em que isso pode ser útil é se você deseja estilizar cada linha ímpar ou par em uma tabela usando uma cor diferente.

1. No arquivo CSS de um componente, adicione algumas novas classes CSS. Estes são os estilos que você usará para certos elementos em índices pares ou ímpares:

   .red {
   color: red;
   }
   .blue { 
   color: blue; 
   }
   

2. Declare variáveis ​​ímpares e pares dentro da instrução ngFor. Essas são variáveis ​​que o Angular reconhecerá. Atribua a classe CSS vermelha a números pares e a classe CSS azul a números ímpares:

   <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>

3. Execute seu site Angular usando ng servir e abra-o no navegador da web. Elementos HTML pares e ímpares alternarão entre os diferentes estilos com base em sua classe CSS:

4. Se você quiser pular completamente todos os números pares, você pode usar a diretiva ngIf. Isso ignorará todos os números ímpares e exibirá apenas os números pares:

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

Como contar para trás

Para contar para trás, você pode usar métodos tradicionais, como reverter uma lista ou contar para trás no loop usando um índice.

1. Declare uma variável de índice na instrução ngFor. Dentro do ngFor, comece pelo comprimento da matriz e deduza o número de itens que você já percorreu:

   <div *ngFor="let item of numbers; let i = index;">
   <p> This is a repeated paragraph: {{numbers.length-i-1}} </p>
   </div>

2. Você também pode criar uma lista invertida no arquivo 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();
   }
   }

3. Itere sobre a lista invertida usando o ngFor:

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

Como estilizar o primeiro e o último elemento de maneira diferente

Você pode estilizar o primeiro e o último elementos separadamente dos outros elementos usando o primeiro e último Variáveis ​​angulares. Esta é uma alternativa ao uso de pseudoclasses CSS como :primeiro filho.

1. Na instrução ngFor, declare a primeira e a última variáveis. Use a diretiva ngClass para atribuir as classes CSS azul e vermelha nas etapas anteriores. Atribua a classe CSS azul ao primeiro elemento e a classe CSS vermelha ao último 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>

Como usar um ngFor para iterar sobre objetos

Você pode usar a diretiva ngFor para percorrer objetos e acessar suas variáveis ​​individuais.

1. Crie uma lista de objetos no arquivo TypeScript. Nesse caso, haverá uma lista de pessoas com seus dados:

   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") },
   ];
   }
   }

2. No HTML, use o loop ngFor para percorrer a lista de pessoas. Cada pessoa será acessível usando o pessoa variável. Você pode usar a variável person para acessar os atributos de cada pessoa:

   <div *ngFor='let person of people; let i = index'>
   <h2> {{person.firstName}} {{person.lastName}} </h2>
   <p> {{person.occupation}} </p>
   <p> {{person.startDate}} </p>
   </div>

Como usar um ngFor aninhado para exibir objetos dentro de outros objetos

Você pode usar um loop for aninhado para exibir objetos dentro de outros objetos.

1. Modifique a lista de pessoas. Cada pessoa terá uma lista de contatos de emergência. Armazene cada contato de emergência como um objeto separado:

   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' }
   ]
   },
   ];

2. No HTML, crie um loop aninhado dentro do loop original para percorrer cada contato de emergência e exibir seus detalhes:

   <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>
   <br>
   </div>

Looping usando ngFor em Angular

Você pode usar a diretiva estrutural ngFor para percorrer dinamicamente os elementos HTML em seu site. Isso permitirá que você repita o mesmo bloco para vários objetos ou por um número especificado de vezes.

Você também pode usá-lo para fazer outros truques, como pular todos os números pares ou ímpares ou estilizar o primeiro e o último elemento. Você também pode usá-lo para renderizar dinamicamente muitos objetos dentro de outros objetos.

Existem outras diretivas Angular que você pode usar para ajudar a tornar seu site mais dinâmico. Estes incluem ngIf, ngSwitch, ngStyle, ngClass e ngModel.