Recuperando o valor do índice para os itens no ngFor. (Angular)

Que tal dominar a arte de manipular índices em vetores com Angular? Em um tom amigável e preciso, desbravamos o uso da diretiva *ngFor para acessar o valor do índice dos itens. Aqui, você encontra dicas valiosas para versões desde o Angular 5 até as mais novas. Se você está buscando uma maneira eficiente de gerenciar elementos em listas com Angular, este post é para você!

Neste post, mostro como pegar o valor do índice dos itens que estão de um vetor que está sendo utilizado na diretiva *ngFor.

Para os exemplos abaixo, considere uma variavel chamada items, que é um vetor com n elementos.

Angular 5/6/7/8/9

  <p>Indice: {{ i }}: {{ item }}</p>

Versões antigas do Angular

  <p>Indice: {{ i }}: {{ item }}</p>

Ambos exemplos vão gerar uma div para cada item do vetor, cada um contendo um parágrafo com o indice e o valor do item. A ideia é que, da mesma forma que você atribui o valor de cada elemento do vetor para a variável chamada item, você precisa atribuir o valor da variável index para uma que seja utilizável no template.

Espero ter ajudado.

Referência: https://angular.io/api/common/NgForOf