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

이제 Ignite UI for Angular 가져왔으므로 igx-paginator 구성 요소 사용을 시작할 수 있습니다.

Using the Angular Paginator

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

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

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

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

Angular Pagination Template

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

또한 igx-paginator-content 참조가 igx-paginator 내에 정의된 경우 페이징 영역은 사용자가 사용자 정의 템플릿을 추가하는 것을 지원합니다.

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

또한 IgxPageSizeSelectorComponent 및 IgxPageNavigationComponent가 도입되었으며 이제 아래 예에 표시된 것처럼 페이지네이터 구성 요소를 사용하여 사용자 정의 콘텐츠를 정의할 수 있습니다. 첫 번째는 페이지 크기에 해당하는 드롭다운 요소와 라벨을 추가하고, 후자는 모든 작업 버튼을 사용하여 페이지 탐색을 처리합니다.

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

페이징은 Paging API를 통해 프로그래밍 방식으로 수행할 수도 있습니다. 이에 대한 자세한 내용은 아래 섹션에 설명되어 있습니다. paginate, previousPage, nextPage 메소드 및 입력 page​ ​perPage 및 totalRecords 사용합니다. page를 사용하면 현재 페이지를 설정할 수 있습니다. perPage- 한 페이지에 표시되는 항목 수 및 totalRecords- 그리드에 있는 레코드 수입니다. TotalRecords 속성은 원격 데이터에 대한 페이징이 있고 총 원격 레코드를 기반으로 페이지 수를 변경하려는 경우에 유용합니다. 페이징을 사용하고 모든 데이터가 그리드로 전달되는 경우 totalRecords 속성 값은 기본적으로 제공된 데이터 소스의 길이로 설정됩니다. totalRecords 설정된 경우 데이터 소스에 따른 기본 길이보다 우선합니다.

Paging API

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

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

Angular Paginator Localization

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

1단계-IPaginatorResourceStrings 인터페이스 가져오기 및 i18n 함수 변경:

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

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

리소스 문자열을 특정 Paging 구성 요소로 변경하려면 @ViewChild를 사용하고 원하는 대로 설정할 수 있습니다. 리소스 문자열 ~ 이내에 requestAnimationFrame 페이지를 다시 그리기 전에 호출되는 콜백이 있는 메서드입니다. 새로 인스턴스화된 객체를 리소스 문자열 속성은 해당 구성 요소의 인스턴스만 지역화합니다.

@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 포럼
• Ignite UI for Angular GitHub