Usando index com ngFor no Angular

Neste artigo você aprenderá a utilizar o index com ngFor no Angular, uma técnica muito interessante para qualquer projeto

Fala programador(a), beleza? Bora aprender mais sobre Angular!

Trabalhar com listas e coleções é uma parte essencial da criação de aplicações web dinâmicas.

O Angular, um dos frameworks mais populares para desenvolvimento web, oferece uma diretiva poderosa, *ngFor, para iterar sobre itens de uma lista.

Uma funcionalidade muito útil dessa diretiva é a capacidade de acessar o índice de um item durante a iteração.

Neste artigo, exploraremos como usar o index com *ngFor para controlar e manipular listas de forma eficaz.

Formação Recomendada

Formação Vibe Coding

Do Prompt ao Produto: Crie Software Real com IA

• 474 aulas
• 20 projetos
• 39h 27min

Conhecer formação

Entendendo a diretiva *ngFor

O básico

A diretiva *ngFor é uma diretiva estrutural no Angular que permite iterar sobre uma lista ou coleção e renderizar um template para cada item da lista.

<ul>
  <li *ngFor="let item of lista">{{ item }}</li>
</ul>

Acessando o índice com *ngFor

Em muitos cenários, além de acessar o próprio item da lista, você também pode querer saber a posição atual do item na lista – seu índice. Felizmente, o Angular torna isso fácil com a variável index.

Como usar o index

Dentro da diretiva *ngFor, você pode capturar o índice do item atual usando a sintaxe let i = index.

<ul>
  <li *ngFor="let item of lista; let i = index">{{ i + 1 }} - {{ item }}</li>
</ul>

Neste exemplo, além do próprio item, também estamos mostrando seu índice (começando de 1).

Aplicando o index em atributos

Há situações em que você pode querer usar o índice de um item para definir um atributo específico, como id ou data-index.

Isso é útil, por exemplo, para identificar elementos de forma única ou para fins de testes automatizados.

<ul>
  <li *ngFor="let item of lista; let i = index" [attr.data-index]="i">{{ item }}</li>
</ul>

Neste exemplo, cada item da lista terá um atributo data-index com seu índice correspondente.

Exemplo em React JS

Se estivéssemos trabalhando com React, a abordagem seria um pouco diferente.

Usando componentes funcionais e a função map, podemos iterar sobre uma lista e também acessar o índice de cada item.

function ListaComponente({ lista }) {
  return (
    <ul>
      {lista.map((item, index) => (
        <li key={index} data-index={index}>
          {item}
        </li>
      ))}
    </ul>
  );
}

Note que no React, estamos usando a propriedade key para dar a cada elemento uma chave única. Isso ajuda o React a otimizar a renderização de listas.

Quer aprender mais sobre programação? Conheça nosso canal no YouTube:

Conclusão

Chegamos ao fim do artigo sobre a utilização de index com ngFor no Angular!

A capacidade de iterar sobre listas e acessar o índice de cada item é crucial para a criação de aplicações web dinâmicas e interativas.

Tanto o Angular com sua diretiva *ngFor quanto o React com sua função map oferecem essa funcionalidade de forma elegante e eficiente.

Saber como e quando usar o índice em suas listas permitirá que você crie interfaces de usuário mais flexíveis e otimizadas.

Está buscando evoluir como Programador? Confira o nossos cursos de programação.