ngFor Angular - Como criar Poderosos Loops de Repetição

Sabe quando você vê postagens em uma rede social e elas aparecem uma atrás da outra?

Isso acontece com ajuda de um poderoso loop de repetição que percorre e cria todas as postagens, uma a uma… 

E se você também precisa criar múltiplos elementos na sua aplicação…

Então o ngFor é a arma certa para ter no seu Arsenal de Programador.

Por isso continue lendo esse artigo para descobrir como tirar o melhor proveito desse recurso incrível e aprender mais sobre:

Exibir múltiplos elementos com Angular ngFor

Ngfor é uma diretiva Angular que permite percorrer um array, ou qualquer objeto iterável, e exibir cada item do array como elemento na tela. 

E o que isso deveria significar? 

Colocar o ngFor em um elemento HTML, ou componente, cria várias cópias desse elemento para cada item do array fornecido. 

Alias o Angular ngFor tem o comportamento parecido com o loop for nas linguagens de programação…

Lembre que apesar de serem cópias, os elementos gerados podem variar com base nos valores do array.

Como usar o Angular ngFor?

A escrita do ngFor é simples e bonita, basta colocar no elemento, ou componente, e informar qual array ele deve usar. 

Então primeiro vamos precisar de um array:

@Component({
  selector: 'app-user',
  templateUrl: './user.component.html'
})

export class UserComponent {

  const users = [
    {id: 1, name: 'Gabriel'},
    {id: 2, name: 'Pedro'},
    {id: 3, name: 'Julia'}
  ];

}

Depois fornecemos o array users para a diretiva ngFor dentro de uma tag… no caso a tag li.

Assim criamos um elemento de lista para cada valor de users.

<ul>
  <li *ngFor="let user of users"> {{ user.name }} </li>
</ul>

Primeiro observe que: 

• A sintaxe of users significa que iremos iterar, ou percorrer, o array de usuários;
• E depois let user cria uma variável local que disponibiliza o valor de cada usuário. 

Assim você pode personalizar cada elemento com a variável user. 

Note também que você pode utilizar a variável user em qualquer lugar dentro do ngFor, mas nunca fora. (é parecido com um escopo de função)

Por fim veja o resultado gerado em HTML para o exemplo acima:

<ul>
  <li> Gabriel </li>
  <li> Pedro </li>
  <li> Julia </li>
</ul>

5 variáveis para potencializar seus loops

O Angular ngFor também fornece vantagens para facilitar o seu trabalho. 

Oferecendo para você algumas variáveis a cada ciclo do ngFor. 

Então coloque o seu chapéu do Indiana Jones e vamos explorar essas misteriosas variáveis!

Como obter o índice de cada item

Caso você queira numerar os itens da lista, apenas o valor do usuário não é suficiente. 

Então você também precisa obter o índice de cada item. 

Para isso podemos definir uma variável dentro do ngFor e atribuir a ela o valor de index:

<ul>
  <li *ngFor="let user of users; let i = index"> 
    {{ i }}. {{ user.name }} 
  </li>
</ul>

Perceba que chamamos a variável index de “i”, mas você pode nomear como quiser.

Depois basta usar “i” dentro do ngFor, como qualquer outra variável.

Agora veja como fica nossa saída HTML:

<ul>
  <li> 0. Gabriel </li>
  <li> 1. Pedro </li>
  <li> 2. Julia </li>
</ul>

Além disso se você necessita exibir o tamanho total do array, o Angular dispõe outra variável chamada count. (equivalente a users.length)

Com o uso similar ao index:

<ul>
  <li *ngFor="let user of users; let i = index; let c = count"> 
    {{ i }}-{{ c }}. {{ user.name }} 
  </li>
</ul>

Por fim o resultado do HTML gerado fica: 

<ul>
  <li> 0-3. Gabriel </li>
  <li> 1-3. Pedro </li>
  <li> 2-3. Julia </li>
</ul>

Para o nosso array de users, o valor de count é 3 por possuir 3 itens. 

Cuidado para não confundir com o índice do último item, que corresponde ao tamanho total, menos um. (para atender a índices baseados em zero)

Como identificar o primeiro e o último item de um array

Acontece que o índice não é o único valor que podemos obter da diretiva ngFor.

Também existem 2 outras variáveis usadas para identificar o primeiro e o último item do array.

O valor da variável é boolean, dependendo do item atual:

• first: retorna true se for o primeiro item do array, que corresponde ao índice 0;
• last: retorna true se for o último item do array.

São muito úteis se você quer estilizar o primeiro ou o último item do array. Usando essas variáveis, podemos atribuir a cada uma delas uma classe CSS diferente:

<ul>
  <li *ngFor="let user of users; let first = first; let last = last"
      [ngClass]="{ inicio-array: first, fim-array: last }">
    {{ user.name }}
  </li>
</ul>

Assim adiciona uma classe CSS:

• Com nome inicio-array ao primeiro item; 
• E uma com nome fim-array ao último item.

Usando even e odd para aumentar a legibilidade

Assim como first e last, even e odd são muito úteis para estilizar elementos.

Afinal são usados para identificar itens de índice par (como 2, 4) e itens de índice impar (como 1, 3).

Muito comum na criação de tabelas, afim de aumentar a legibilidade, ao adicionar uma classe CSS diferente às linhas pares ou ímpares.  

O valor da variável também é boolean, dependendo do item atual:

• even: retorna true para itens pares;
• odd: retorna true para itens ímpares.

Então se você deseja adicionar uma classe CSS as linhas pares, use even da seguinte maneira: 

<ul>
  <li *ngFor="let user of users; let even = even"
      [ngClass]="{ linha-par: even }">
    {{ user.name }}
  </li>
</ul>

Como melhorar a performance dos seus loops

Agora que você sabe como usar o ngFor, vamos desvendar uma parte importante do seu funcionamento. 

Quando o Angular cria e destruí elementos na página, é uma operação cara em termos de desempenho. (comparando com código Javascript puro) 

Normalmente a manipulação de elementos na tela ocorre quando: 

• Um item é adicionado ao array;
• Um item é removido do array;
• Ou os itens do array são reordenados.

Mas não dá para você brincar de renderizar elementos…  

Por isso o Angular otimiza as operações e busca reutilizar os elementos DOM existentes. Assim apenas alguns valores serão substituídos. 

Por exemplo, se um item for adicionado ao array, não será renderizada a lista inteira novamente. 

Em vez disso todos os elementos DOM existentes são reutilizados e apenas o elemento adicional é criado.

O mesmo acontece quando um item é removido do array ou o array é reordenando…

Mas como o Angular sabe quais elementos já existem?

Para fazer toda essa otimização, o Angular identifica cada objeto no array através de uma referência. Caso contrário, não poderá determinar “quem é quem”.

Porém o método padrão de identificação de objetos por referência é bastante limitado…

Porque se você cria um novo array com os mesmos valores do antigo e passa esse novo array para o ngFor…

• As referências ainda serão dos objetos do array antigo; 
• E não será possível identificar que os valores são semelhantes.

Então, para a identificação, o novo array contém um novo conjunto de itens, completamente diferente do anterior. 

Assim o Angular desiste da otimização e renderiza a lista inteira novamente.

Essa situação é muito comum ao solicitar dados do servidor…

E como resolver esse problema?

Aumentando o desempenho do Angular ngFor com a função trackBy

A estratégia padrão de identificação do objeto não é tão ruim…

Como o Angular não possui informações sobre o objeto, então não consegue determinar qual propriedade o torna único.

Para isso você pode alterar o método padrão de identificação do Angular através da função trackBy. 

Afinal a função informa ao Angular quais propriedades do objeto são exclusivas dele.

No caso do nosso array users, a propriedade exclusiva é o id. Sendo que não existem 2 usuários com o mesmo id. 

Então devemos retornar o valor do id na função trackBy:

@Component({
  selector: 'app-user',
  templateUrl: './user.component.html'
})

export class UserComponent {
 
  const users = [
    {id: 1, name: 'Gabriel'},
    {id: 2, name: 'Pedro'},
    {id: 3, name: 'Julia'}
  ];

  trackUser(index, user) {
    return user ? user.id : null;
  }

}

Note que a função recebe o índice do item e o próprio item como parâmetros.

Também precisamos informar ao ngFor qual nova função deve usar para rastreamento:

<ul>
  <li *ngFor="let user of users; trackBy : trackUser"> 
    {{ user.name }}
  </li>
</ul>

Mas quando usar o trackBy?

Em principio não é uma alteração padrão…

Como uma otimização de desempenho, é necessário apenas se você tiver problemas de desempenho.

Por exemplo, você está trabalhando com um array muito grande e a aplicação renderiza a lista do zero a cada chamada ao servidor. 

Portanto impacta na velocidade de carregamento e a interface do usuário fica lenta devido à grande quantidade de elementos DOM criados e destruídos.

Parabéns por ter chegado até aqui!

Afinal esse não foi um artigo fácil…

Muitos assuntos foram abordados como:

• O que é ngFor e como utilizar;
• Obter o índice de cada item com index;
• Identificar o primeiro e o último item com first e last;
• Usar even e odd para aumentar a legibilidade;
• E aumentar a performance com a função trackBy.

Se você gostou, ou tem alguma dúvida, deixe seu comentário aqui abaixo: