Como Fazer Um Filtro Em Uma Tabela Com Angular

Começando uma série de melhorias que podemos fazer para trazer uma melhor experiência para o usuário, irei demonstrar como podemos fazer um filtro pelo Angular(2+) em uma tabela, de forma rápida e eficiente!
Este filtro percorrerá todas as colunas da tabela, procurando pelo valor que inserido dentro do input e retornar todos os resultados que correspondem! Desta forma, se tivermos os mesmos valores em colunas diferentes, aparecerá igualmente!

Iremos utilizar o componente ng2-search-filter, esta dependência funciona perfeitamente com Angular 2, 4+.

Configurando a nova dependência

Em seu terminal, dentro da pasta do seu projeto, execute o comando para instalar sua dependência:

1
npm i ng2-search-filter --save

Agora, precisamos importar dentro do nosso arquivo app.module.ts o novo módulo! Abra este arquivo, adicione-o dentro de imports e faça o import dele no começo do arquivo, como abaixo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { Ng2SearchPipeModule } from 'ng2-search-filter'; // Importação

import { AppComponent } from './app.component';

@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
Ng2SearchPipeModule // Nosso módulo recém instalado
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

Alteração na tabela

Feito isso, podemos agora utilizar as funcionalidades desse módulo de filtro!
Adicione um input que será onde o usuário digitará o texto a ser procurado e no tr, onde contém seu ngFor, adicione o pipe filter com o mesmo nome que você definiu no ngModel do seu input!

1
2
3
4
5
6
7
8
9
10
<nav class="navbar">
<input class="form-control" type="text" name="search" [(ngModel)]="filter"> <!-- Input que deve ser adicionado -->
</nav>

<!-- ... Código da table ... -->
<tr *ngFor="let usuario of usuarios | filter:filter; let i = index">
<td>{{i}}</td>
<td>{{usuario.nome}}</td>
<td>{{usuario.endereco}}</td>
</tr>

Agora você possui uma tabela com filtro em todas as colunas, de forma rápida!

Não deixe de conferir os outros posts sobre como fazer ordenação na tabela do Angular e como criar paginação na tabela do Angular!