Angular : Pagenation 구현하기

1. 이 포스트는 bootstrap을 이용하여 수동으로 pagenation을 구현하는 내용이다.

  1-1 사실 ng-bootstrap에서 pagenation 기능을 제공하므로 굳이 이렇게 구현할 필요는 없다.

 

2. component template

  2-1 bootstrap 공식 홈페이지의 코드를 그대로 사용하였다. 복붙

  2-2 중간에 ng-container가 나온는데, 이것은 li테그에 2개의 ng directive를 사용할 수 없기 때문이다.

  2-3 [ngClass]에 지정할 class들은 getClass라는 별도의 메소드를 통하여 지정하고 있다.

    2-3-1 메소드 내에서 여러 개의 if문으로 필요한 class들을 채워서 반환하는 테크닉은 표준적으로 사용된다.

    2-3-2 ngFor의 let i=index는 예전에도 언급했지만 for문에 대한 부가적인 정보를 얻을 수 있다.

    2-3-3 아래에서는 현재 위치가 어디인지를 보여주는 active클래스를 지정하기 위해 사용하고 있다.

 

  2-4 prev, next는 인덱스의 위치에 따라서 disabled 시키고 있다.

  2-5 페이지가 너무 많을 경우는 원하는 페이지 갯수만큼만 표출해야 한다.

    2-5-1 아래는 10개를 기준으로 보여주고 있고 현재 단위별로 보여주도록 floor 값을 활용하고 있다.

    2-5-2 이 기능을하는 메소드가 checkWindowIndex인데, 이 메소드도 다른 테그처럼 이벤트에 바로 구현할 수 있지만,

      2-5-2-1 Math.floor같은 내장함수는 component template 표현에서는 사용할 수 없기 때문에 메소드를 생성했다.

 

<div class="container">
  <nav>
    <ul class="pagination">
      <li class="page-item" [ngClass]="{ disabled: currentPage === 0 }">
        <a (click)="currentPage = currentPage - 1" class="page-link">Prev</a>
      </li>
      <ng-container *ngFor="let image of images; let i=index;">
        <li [ngClass]="getClass(i)" class="page-item" (click)="currentPage = i" *ngIf="checkWindowIndex(i)">
          <a class="page-link">{{ i+1 }}</a>
        </li>
      </ng-container>
      <li class="page-item" [ngClass]="{ disabled: currentPage === images.length-1 }">
        <a class="page-link" (click)="currentPage = currentPage + 1">Next</a>
      </li>
    </ul>
  </nav>
  <div>
    <h4>{{ images[currentPage].title }}</h4>
    <img [src]="images[currentPage].url" alt="">
  </div>
</div>

 

3. component class

 

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  currentPage = 0

  images = [
    {
      title: 'At the Beach',
      url: 'https://images.unsplash.com/photo-1552379080-7bf7d131b129?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80'
    },
    {
      title: 'At the Beach',
      url: 'https://images.unsplash.com/photo-1475503572774-15a45e5d60b9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80'
    },
    {
      title: 'At the Beach',
      url: 'https://images.unsplash.com/photo-1496046744122-2328018d60b6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1064&q=80'
    },
    {
      title: 'At the Beach',
      url: 'https://images.unsplash.com/photo-1502860372601-2a663136d5a2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1132&q=80'
    },
    {
      title: 'At the Beach',
      url: 'https://images.unsplash.com/photo-1552379080-7bf7d131b129?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80'
    },
    {
      title: 'At the Beach',
      url: 'https://images.unsplash.com/photo-1475503572774-15a45e5d60b9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80'
    },
    {
      title: 'At the Beach',
      url: 'https://images.unsplash.com/photo-1496046744122-2328018d60b6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1064&q=80'
    },
    {
      title: 'At the Beach',
      url: 'https://images.unsplash.com/photo-1502860372601-2a663136d5a2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1132&q=80'
    },
    {
      title: 'At the Beach',
      url: 'https://images.unsplash.com/photo-1552379080-7bf7d131b129?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80'
    },
    {
      title: 'At the Beach',
      url: 'https://images.unsplash.com/photo-1475503572774-15a45e5d60b9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80'
    },
  ]

  getClass(value: number): string[] {
    const classes: string[] = []

    if (value === this.currentPage) {
      classes.push('active')
    }
    return classes
  }

  checkWindowIndex(value: number): boolean {
    return Math.floor(this.currentPage/10) === Math.floor(value/10)
  }
}

 

4. 결과화면