Visão geral do componente Angular Paginator

Paginação no Angular é uma técnica de otimização ao trabalhar com grandes conjuntos de dados. O propósito do Angular Paginator é fornecer UI e API para dividir e distribuir altos volumes de dados em páginas de tamanhos iguais, que podem ser navegadas pelo usuário final.

O componente Angular Paginator exibe ao usuário final a página que ele está visualizando, o tamanho da página, o número total de páginas e elementos da interface do usuário para navegação rápida entre as páginas.

Ignite UI for Angular Paginator permite que você divida um conjunto de dados em várias páginas semelhantes. Este método de paginação é particularmente adequado para grandes conjuntos de dados que são difíceis de exibir e visualizar de uma só vez, é por isso que o paginador é normalmente usado junto com uma lista de itens ou tabela de dados. O Paginador no Angular permite que o usuário selecione uma página específica de um intervalo de páginas e determine quantos registros ele deve ver em cada página.

Angular Paginator Example

O exemplo de paginação Angular a seguir mostra um modelo do Paginator demonstrando como os usuários podem navegar por 4 páginas com itens diferentes e selecionar o número de itens a serem exibidos em um menu suspenso.

Getting Started with Ignite UI for Angular Paginator

Para começar a usar o componente Ignite UI for Angular Paginator, primeiro você precisa instalar Ignite UI for Angular. Em um aplicativo Angular existente, digite o seguinte comando:

ng add igniteui-angular

Para obter uma introdução completa ao Ignite UI for Angular, leia o tópico de introdução.

O próximo passo é importar oIgxPaginatorModule arquivo no app.module.ts.

// app.module.ts

import { IgxPaginatorModule } from 'igniteui-angular/paginator';
// import { IgxPaginatorModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    ...
    imports: [..., IgxPaginatorModule],
    ...
})
export class AppModule {}

Alternativamente,16.0.0 você pode importarIgxPaginatorComponent como uma dependência independente ou usar oIGX_PAGINATOR_DIRECTIVES token para importar o componente e todos os seus componentes e diretivas de suporte.

// home.component.ts

import { NgFor } from '@angular/common';
import { HammerModule } from '@angular/platform-browser';
import { IGX_PAGINATOR_DIRECTIVES } from 'igniteui-angular/paginator';
import { IGX_LIST_DIRECTIVES } from 'igniteui-angular/list';
// import { IGX_PAGINATOR_DIRECTIVES, IGX_LIST_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package

@Component({
    selector: 'app-home',
    template: `
    <igx-list>
        <igx-list-item *ngFor="let item of pagedData">{{item.text}}</igx-list-item>
    </igx-list>
    <igx-paginator [totalRecords]="products.length" [perPage]="perPage"></igx-paginator>
    `,
    styleUrls: ['home.component.scss'],
    standalone: true,
    imports: [IGX_PAGINATOR_DIRECTIVES, IGX_LIST_DIRECTIVES, HammerModule, NgFor]
    /* or imports: [IgxPaginatorComponent, IgxListComponent, IgxListItemComponent, HammerModule, NgFor] */
})
export class HomeComponent {
    public products: Product [];
    public perPage = 10;
    public pagedData: Product [];
}

Agora que você importou o módulo ou diretivas do Ignite UI for Angular paginador, pode começar a usar oigx-paginator componente.

Using the Angular Paginator

Cada instância do paginador requer:

• O número de itens por página (padrão definido como 15)
• O número total de itens sendo paginados

Além disso, por padrão, a página atual é definida como 0 quando o componente paginador Angular é inicializado, mas isso pode ser alterado por meio da propriedade da página.

<igx-paginator #paginator [totalRecords]="120" [perPage]="25">
</igx-paginator>

Angular Pagination Template

O modelo de paginação padrão é composto por duas partes principais. A primeira é um menu suspenso, que permite que você defina o número de itens que são exibidos em cada página e a segunda são os botões de navegação que permitem que você navegue facilmente pelas páginas.

Além disso, a área de paginação suporta a adição de modelos personalizados pelo usuário, se umaigx-paginator-content referência for definida dentro doigx-paginator:

<igx-paginator #paginator>
    <igx-paginator-content>
        ...
    </igx-paginator-content>
</igx-paginator>

Além disso,IgxPageSizeSelectorComponent eIgxPageNavigationComponent foram introduzidos e agora os componentes do paginador permitem que um conteúdo personalizado seja definido, como mostrado no exemplo abaixo. O primeiro adiciona o elemento suspenso e o rótulo correspondentes ao tamanho da página, e o segundo cuida da navegação com todos os botões de ação.

<igx-paginator #paginator>
 <igx-paginator-content>
  <igx-page-size></igx-page-size>
  <igx-page-nav></igx-page-nav>
 </igx-paginator-content>
</igx-paginator>

A paginação também pode ser feita programaticamente através da API de paginação /que é descrita com mais detalhes na seção abaixo/ usando ospaginate,previousPage,nextPage métodos e as entradaspage,perPage etotalRecords. Onde a página permite definir a página atual, por Página- o número de itens exibidos em uma página e Total Records- o número de registros que estão na grade.TotalRecords Propriedade é útil quando você tem paginação com dados remotos e quer alterar a contagem de páginas com base no total de registros remotos. Lembre-se de que, se você estiver usando paginação e todos os dados forem passados para a grade, o valor datotalRecords propriedade será definido por padrão com o comprimento da fonte de dados fornecida. SetotalRecords for definido, terá precedência sobre o comprimento padrão baseado na fonte de dados.

Paging API

Entrada	Descrição
página	Obtém/define a página atual.
por página	Obtém/define o número de itens visíveis por página.
selecionarOpções	Obtém/Define opções personalizadas no elemento Select do paginador. Valores de seleção padrão [5, 10, 15, 25, 50, 100, 500]
totalRegistros	Obtém/define a contagem total de registros.
totalPáginas	Obtém/define a contagem total de páginas.
cadeias de recursos	Obtém/Define as strings de recursos. Por padrão, ele usa strings de recursos EN.
sobreposiçãoConfigurações	Obtém/define um OverlaySettings personalizado.

Saída	Descrição
porMudançaDePágina	Emitido quandoperPage o valor da propriedade do paginador é alterado.
páginaAlterar	Emitido após a alteração da página atual.
paginação	Emitido antes da paginação ser realizada. Cancelável.
paginaçãoConcluído	Emitido após a paginação ser realizada.

Angular Paginator Localization

Com apenas algumas linhas de código, você pode localizar facilmente todas as strings que fazem parte do componente Paging. Para localizar uma instância Paging dada, use a propriedade de entrada resourceStrings. Você pode usar isto

Passo 1- ImportarIPaginatorResourceStrings interface e função changei18n:

import { IPaginatorResourceStrings, changei18n } from "igniteui-angular/core";

Etapa 2- Defina as strings de recursos de paginação:

private paginatorResourceStrings: IPaginatorResourceStrings = {
    igx_paginator_label: 'Records per page:',
    igx_paginator_first_page_button_text: 'Custom first page text',
    igx_paginator_last_page_button_text: 'Custom last page text',
    igx_paginator_next_page_button_text: 'Custom next page text',
    igx_paginator_previous_page_button_text: 'Custom previous page text',
    igx_paginator_pager_text: 'out of'
};

Etapa 3- Passe o objeto para a função changei18n como um parâmetro para alterar o i18n global para o componente no nível app.module. Isso alterará a string de recurso de todos os componentes Paging que fazem parte do seu aplicativo:

public ngOnInit(): void {
    changei18n(this.paginatorResourceStrings as any);
}

Para mudar a string de recursos para um componente específico de paginação, você pode usar um @ViewChild e definir as resourceStrings desejadas dentro de umrequestAnimationFrame método com um callback, que será invocado antes da repintura da página. Definir um objeto recém-instanciado para a propriedade resourceStrings localizará apenas a instância desse componente dado.

@ViewChild('paginator', { read: IgxPaginatorComponent, static: false }) public paginator: IgxPaginatorComponent;
...

public ngOnInit(): void {
    requestAnimationFrame(() => {
        this.paginator.resourceStrings = this.paginatorResourceStrings;
    });
}

API References

• API do IgxPaginator
• Estilos IgxPaginator

Additional Resources

• Grade
• Virtualização e desempenho
• Filtragem
• Classificação
• Resumos

Nossa comunidade é ativa e sempre acolhedora para novas ideias.

• Ignite UI for Angular Fóruns
• Ignite UI for Angular GitHub