Paginação e filtros no Angular com API

Organize paginação, termo de busca e filtros no Angular enviando parâmetros consistentes para uma API paginada.

Mantenha o estado dos filtros

filtro = {
  pagina: 1,
  porPagina: 20,
  termo: '',
  situacao: null as string | null
};

Enviar parâmetros para a API

buscar(): void {
  const params = new HttpParams()
    .set('pagina', this.filtro.pagina)
    .set('porPagina', this.filtro.porPagina)
    .set('termo', this.filtro.termo || '');

  this.http
    .get<ResultadoPaginado<Cliente>>('/api/clientes', { params })
    .subscribe(resultado => {
      this.itens = resultado.dados;
      this.total = resultado.total;
    });
}

Ao mudar filtro, volte para a primeira página

aplicarFiltro(): void {
  this.filtro.pagina = 1;
  this.buscar();
}

Isso evita ficar, por exemplo, na página 8 depois que um filtro reduz o resultado para apenas duas páginas.

Combine com debounce

Para campos de texto, combine a paginação com debounceTime para evitar uma chamada à API a cada tecla.