Angular Paginator 구성 요소 개요

Angular의 페이징은 방대한 데이터 집합으로 작업할 때 최적화 기법입니다. Angular Paginator의 목적은 UI와 API를 제공하여 대량의 데이터를 동일한 크기의 페이지로 분할하고 분산하여 최종 사용자가 탐색할 수 있도록 하는 것입니다.

Angular Paginator 구성 요소는 최종 사용자에게 현재 보고 있는 페이지, 페이지 크기, 총 페이지 수, 페이지 간 빠른 탐색을 위한 UI 요소를 표시합니다.

Ignite UI for Angular 사용하면 데이터 집합을 여러 개의 유사한 페이지로 나눌 수 있습니다. 이 페이징 방법은 모든 것을 한 번에 표시하고 보기 어려운 대규모 데이터 집합에 특히 적합하므로 일반적으로 항목 목록이나 데이터 테이블과 함께 페이징을 사용합니다. Angular의 Paginator를 사용하면 사용자가 여러 페이지에서 특정 페이지를 선택하고 각 페이지에서 볼 레코드 수를 결정할 수 있습니다.

Angular Paginator Example

다음 Angular Pagination 예제는 사용자가 서로 다른 항목이 있는 4개 페이지를 탐색하고 드롭다운 메뉴에서 표시할 항목 수를 선택하는 방법을 보여주는 Paginator 템플릿을 보여줍니다.

Getting Started with Ignite UI for Angular Paginator

Ignite UI for Angular Paginator 구성 요소를 시작하려면 먼저 Ignite UI for Angular 설치해야 합니다. 기존 Angular 애플리케이션에서 다음 명령을 입력합니다.

ng add igniteui-angular

Ignite UI for Angular에 대한 전체 소개는 시작 항목을 참조하십시오.

다음 단계는 다음 단계를 가져오는 것입니다.IgxPaginatorModule 안에 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 {}

또는16.0.0 독립 실행형 의존성으로 가져오IgxPaginatorComponent 거나, 토큰을IGX_PAGINATOR_DIRECTIVES 사용해 컴포넌트와 그 지원 컴포넌트, 명령어를 가져올 수도 있습니다.

// 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 [];
}

Now that you have the Ignite UI for Angular Paginator module or directives imported, you can start using the igx-paginator component.

Using the Angular Paginator

각 페이지네이터 인스턴스에는 다음이 필요합니다.

• 페이지당 항목 수(기본값은 15로 설정됨)
• 페이징되는 총 항목 수

또한 기본적으로 Angular 페이지네이터 구성 요소가 초기화될 때 현재 페이지는 0으로 설정되지만 이는 페이지 속성을 통해 변경할 수 있습니다.

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

Angular Pagination Template

기본 페이지 매김 템플릿은 두 가지 주요 부분으로 구성됩니다. 첫 번째는 각 페이지에 표시되는 항목 수를 정의할 수 있는 드롭다운이고, 두 번째는 페이지 전체를 쉽게 탐색할 수 있는 탐색 버튼입니다.

Also, the paging area supports adding custom template by the user, if a igx-paginator-content reference is defined within the igx-paginator:

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

In addition, IgxPageSizeSelectorComponent and IgxPageNavigationComponent were introduced and now the paginator components allows a custom content to be defined, as it is shown in the example below. The first will add the dropdown element and label corresponding for the page size and the latter will handle the page navigation with all action buttons.

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

Paging can also be done programmatically through the Paging API /which is described in more details in the section below/ using the paginate, previousPage, nextPage methods and the inputs page, perPage and totalRecords. Where page allows you to set the current page, perPage - the number of items that are displayed at one page and totalRecords - the number of the records that are in the grid. TotalRecords property is useful when you have paging with remote data and you want to alter the page count based on total remote records. Keep in mind that If you are using paging and all the data is passed to the grid, the value of totalRecords property will be set by default to the length of the provided data source. If totalRecords is set, it will take precedence over the default length based on the data source.

Paging API

입력	설명
페이지	현재 페이지를 가져오거나 설정합니다.
페이지 당	페이지당 표시되는 항목 수를 가져오거나 설정합니다.
선택옵션	페이지네이터의 Select 요소에서 사용자 정의 옵션을 가져오거나 설정합니다. 기본 선택 값 [5, 10, 15, 25, 50, 100, 500]
총 레코드	총 레코드 수를 가져오거나 설정합니다.
총페이지수	총 페이지 수를 가져오거나 설정합니다.
리소스 문자열	리소스 문자열을 가져오거나 설정합니다. 기본적으로 EN 리소스 문자열을 사용합니다.
오버레이설정	사용자 정의 OverlaySettings를 가져오거나 설정합니다.

산출	설명
페이지당변경	다음과 같은 경우에 방출됩니다.perPage 페이지네이터의 속성값이 변경되었습니다.
페이지변경	현재 페이지가 변경된 후에 발생합니다.
페이징	페이징이 수행되기 전에 발생합니다. 취소 가능
페이징완료	페이징이 수행된 후에 발생합니다.

Angular Paginator Localization

단 몇 줄의 코드만으로 페이징 구성 요소의 모든 문자열 부분을 쉽게 현지화할 수 있습니다. 특정 Paging 인스턴스를 지역화하려면 입력 속성인 ResourceStrings를 사용하세요. 이것을 사용할 수 있습니다

Step 1 - Import IPaginatorResourceStrings interface and changei18n function:

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

2단계- 페이징 리소스 문자열 정의:

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'
};

3단계- app.module 수준에서 구성 요소의 전역 i18n을 변경하려면 객체를 매개 변수로 changei18n 함수에 전달합니다. 이렇게 하면 애플리케이션의 모든 Paging 구성 요소 부분의 리소스 문자열이 변경됩니다.

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

In order to change the resource string to a specific Paging component, you can use a @ViewChild and set the desired resourceStrings within a requestAnimationFrame method with a callback, that will be invoked before the page repaint. Setting a newly instantiated object to the resourceStrings property will localize only that given component's instance.

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

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

API References

• IgxPaginator API
• IgxPaginator 스타일

Additional Resources

• 그리드
• 가상화 및 성능
• 필터링
• 정렬
• 요약

우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.

• Ignite UI for Angular 포럼
• ​GitHub Ignite UI for Angular