Aplicando Filtros em Listas com ngFor em Angular

Neste artigo você aprenderá a utilizar Filtros em Listas com ngFor no Angular, para otimizar a impressão de dados

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

Angular é uma poderosa plataforma de desenvolvimento para criar aplicações web dinâmicas e interativas.

Um dos recursos mais úteis do Angular é o ngFor, uma diretiva que permite iterar sobre listas e arrays de maneira eficiente.

Neste artigo, vamos explorar como aplicar filtros em listas utilizando ngFor em Angular, uma habilidade crucial para criar interfaces de usuário ricas e interativas.

Entendendo o ngFor

Antes de mergulharmos nos filtros, é importante compreender o básico do ngFor. Esta diretiva é usada para renderizar uma lista de elementos com base em um array de dados.

Por exemplo:

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

Neste exemplo, items é um array no componente Angular, e cada item do array é renderizado como um elemento da lista.

Implementando Filtros em ngFor

Aplicar filtros em uma lista usando ngFor pode ser feito de várias maneiras, mas uma das mais comuns é usar um pipe personalizado.

Criando um Pipe de Filtro

Primeiro, crie um pipe personalizado:

ng generate pipe filter

Codificando o Pipe de Filtro

No arquivo filter.pipe.ts, você implementará a lógica de filtragem:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'filter'
})
export class FilterPipe implements PipeTransform {
  transform(items: any[], searchText: string): any[] {
    if (!items) return [];
    if (!searchText) return items;

    searchText = searchText.toLowerCase();

    return items.filter(item => {
      return item.toLowerCase().includes(searchText);
    });
  }
}

Este pipe recebe um array de itens e um texto de pesquisa, retornando apenas os itens que correspondem ao texto de pesquisa.

Usando o Pipe de Filtro com ngFor

No seu template, você pode usar o pipe personalizado assim:

<ul>
  <li *ngFor="let item of items | filter:searchText">{{ item }}</li>
</ul>

Aqui, searchText é uma variável no seu componente que contém o texto de pesquisa.

Dicas para Trabalhar com Filtros

• Mantenha a lógica de filtragem o mais simples possível para evitar problemas de desempenho, especialmente com grandes conjuntos de dados.
• Considere a sensibilidade a maiúsculas e minúsculas na sua lógica de filtragem.
• Pipes personalizados são reutilizáveis e podem ser aplicados em diferentes componentes e listas.

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

Conclusão

Aplicar filtros em listas usando ngFor em Angular é uma técnica valiosa que pode aumentar significativamente a interatividade e a usabilidade de suas aplicações web.

Com a criação de pipes personalizados, você obtém controle total sobre como os dados são apresentados ao usuário, permitindo criar experiências de usuário mais refinadas e intuitivas.

Este conhecimento fundamental de Angular não só melhora a qualidade do seu código, mas também enriquece a experiência do usuário final em suas aplicações web.

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