Angular의 페이지 매김

Rana Hasnain Khan 2024년2월15일

Angular Angular Pagination

Angular에서 페이지 매김을 소개하고 페이지 매김을 구현하는 데 가장 적합한 라이브러리와 사용 방법을 소개합니다.

Angular의 페이지 매김

1000개 또는 10,000개 이상의 항목 데이터 세트가 있는 경우 전체 데이터 세트를 로드하는 데 많은 시간과 메모리가 필요하기 때문에 한 페이지 또는 한 번에 모든 항목을 표시할 수 없습니다. 많은 데이터 세트를 표시하는 가장 좋은 방법은 Angular에서 페이지 매김을 사용하는 것입니다.

Angular에서 페이지 매김에 많은 라이브러리를 사용할 수 있습니다. 그러나 이 튜토리얼에서는 구현하기 쉽고 간단한 ngx-pagination을 사용할 것입니다.

`ngx-pagination` 설치

ngx-pagination 라이브러리를 설치하려면 프로젝트에서 터미널을 열고 다음 명령을 실행해야 합니다.

# angular CLI
npm install ngx-pagination

라이브러리가 설치된 후 app.module.ts 파일의 ngx-pagination에서 NgxPaginationModule을 가져옵니다. @NgModule에서 NgxPaginationModule도 가져올 것입니다.

따라서 app.module.ts의 코드는 다음과 같습니다.

# angular
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { NgxPaginationModule } from 'ngx-pagination';

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';

@NgModule({
  imports:      [ BrowserModule, FormsModule, NgxPaginationModule ],
  declarations: [ AppComponent, HelloComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

일부 데이터와 현재 있는 페이지의 번호를 저장할 number 변수로 배열을 생성합니다. app.component.ts의 코드는 다음과 같습니다.

# angular
import { Component, VERSION } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  pages: number = 1;
  dataset: any[] = ['1','2','3','4','5','6','7','8','9','10'];
}

데이터 세트를 표시하는 뷰를 생성합니다. app.component.html은 아래와 같이 보일 것입니다.

# angular
<div>
  <h2
    *ngFor="
      let data of dataset | paginate: { itemsPerPage: 2, currentPage: pages }
    "
  >
    {{ data }}
  </h2>
</div>

<pagination-controls (pageChange)="pages = $event"></pagination-controls>

app.component.css에서 보기 좋게 CSS 코드를 작성해 보겠습니다.

# angular
div{
  text-align: center;
  padding: 10px;
}
h2{
  border: 1px solid black;
  padding: 10px;
}

출력:

Angular의 페이지 매김

이렇게 작동합니다.

Angular에서 페이지 매김의 최종 결과

작가: Rana Hasnain Khan

Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.

Angular의 페이지 매김

ngx-pagination 설치

`ngx-pagination` 설치