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 o IgxPaginatorModule no arquivo app.module.ts.

    // app.module.ts

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

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

    Como alternativa, a partir da 16.0.0 você pode importar o IgxPaginatorComponent como uma dependência autônoma ou usar o token IGX_PAGINATOR_DIRECTIVES 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, IGX_LIST_DIRECTIVES } from 'igniteui-angular';
// 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 Ignite UI for Angular Paginator ou as diretivas, você pode começar a usar o componente igx-paginator.

    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 um modelo personalizado pelo usuário, se uma referência igx-paginator-content for definida dentro do igx-paginator:

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

    Além disso, IgxPageSizeSelectorComponent e IgxPageNavigationComponent foram introduzidos e agora os componentes paginadores permitem que um conteúdo personalizado seja definido, como é mostrado no exemplo abaixo. O primeiro adicionará o elemento dropdown e o rótulo correspondente ao tamanho da página e o último manipulará a navegação da página 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 por meio da API de paginação /que é descrita em mais detalhes na seção abaixo/ usando os métodos paginate, previousPage, nextPage e as entradas page, perPage e totalRecords. Onde page permite que você defina a página atual, perPage- o número de itens que são exibidos em uma página e totalRecords- o número de registros que estão na grade. A propriedade TotalRecords é útil quando você tem paginação com dados remotos e deseja alterar a contagem de páginas com base no total de registros remotos. Tenha em mente que se você estiver usando paginação e todos os dados forem passados para a grade, o valor da propriedade totalRecords será definido por padrão para o comprimento da fonte de dados fornecida. Se totalRecords for definido, ele terá precedência sobre o comprimento padrão com base 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

    Etapa 1- Importar a interface IPaginatorResourceStrings e a função changei18n:

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

    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 alterar a string de recurso para um componente Paging específico, você pode usar um @ViewChild e definir o resourceStrings desejado dentro de um método requestAnimationFrame 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 fornecido.

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

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

    API References

    Additional Resources

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.