Angular pagination custom 앵귤러 페이지네이션 커스텀 예시

 

<div title="항목들" class="grid grid-cols-2 px-2 py-5 gap-2">
  <div [id]=pageId *ngFor="let admin of admins | paginate:
  { itemsPerPage: pageInfo.itemsPerPage, currentPage: pageInfo.currentPage, totalItems: pageInfo.totalItems}; let i = index"
   title="항목" class="flex flex-col justify-evenly w-full h-40 shadow-md rounded-md border px-3 py-2 cursor-pointer">
    <div class="flex flex-row justify-between">
      <div>{{admin.name}}</div>
      <app-badge [style]="admin.badgeStyle">{{admin.Auth}}</app-badge>
    </div>
    <div class="flex">
      ID
    </div>
    <div class="flex flex-row justify-between">
      <div>{{admin.id}}</div>
      <div class="text-gray-500">{{admin.registeredAt | date: 'YYYY-MM-dd'}} 등록 됨</div>
    </div>
  </div>
</div>

1. [id]=pageId 템플릿 프로퍼티 => pageId = "admin" 이 할당

 

 

 

 

 <app-pagination id="admin" (pageChange)="pageInfo.currentPage = $event" [maxSize]="pageInfo.totalItems" />

2. pageContoller id="admin" 할당하여 컨트롤러와 템플릿 연결

 

 

 

 

 

<pagination-template #p="paginationApi"
                    (pageChange)="pageChange.emit($event)"
                    (pageBoundsCorrection)="pageBoundsCorrection.emit($event)">

    <div class="flex gap-1">

        <div class="pagination-previous" [class.disabled]="p.isFirstPage()">
            <a *ngIf="!p.isFirstPage()" (click)="p.previous()">
                <div class="flex shadow-md w-9 h-9 text-center items-center justify-center rounded-md font-medium hover:bg-blue-900 hover:text-white cursor-pointer">
                    {{previousLabel}}
                </div>
            </a>
        </div>

        <div *ngFor="let page of p.pages" [class.current]="p.getCurrent() === page.value">
            <a (click)="p.setCurrent(page.value)" *ngIf="p.getCurrent() !== page.value">
                <div class="flex shadow-md w-9 h-9 items-center justify-center rounded-md font-medium hover:bg-blue-900 hover:text-white cursor-pointer">
                    {{ page.label }}
                </div>
            </a>
            <div *ngIf="p.getCurrent() === page.value">
                <div class="flex shadow-md w-9 h-9 items-center justify-center rounded-md font-medium hover:bg-blue-900 text-white cursor-pointer bg-gray-400">
                    {{ page.label }}
                </div>
            </div>
        </div>

        <div class="pagination-next" [class.disabled]="p.isLastPage()">
            <a *ngIf="!p.isLastPage()" (click)="p.next()">
                <div class="flex shadow-md w-9 h-9 items-center justify-center rounded-md font-medium hover:bg-blue-900 hover:text-white cursor-pointer">
                    {{nextLabel}}
                </div>
            </a>
        </div>
    </div>
</pagination-template>

3. pagination 컴포넌트의 컨트롤러의 템플릿

 

 

 

 

 

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { CommonModule } from '@angular/common';
import { NgxPaginationModule } from 'ngx-pagination';
import { FormsModule } from '@angular/forms';


@Component({
  selector: 'app-pagination',
  templateUrl: './pagination.component.html',
  styleUrls: ['./pagination.component.scss'],
  standalone: true,
  imports: [
    NgxPaginationModule,
    CommonModule,
    FormsModule,
  ]
})
export class PaginationComponent  implements OnInit {

  private _directionLinks: boolean = true;
  private _autoHide: boolean = false;
  private _responsive: boolean = false;

  
  @Input() pages!: [];
  @Input() id!: string;
  @Input() maxSize!: number;
  @Input() previousLabel: string = '<';
  @Input() nextLabel: string = '>';
  @Input() screenReaderPaginationLabel: string = '페이지네이션 라벨';
  @Input() screenReaderPageLabel: string = 'page';
  @Input() screenReaderCurrentLabel: string = `You're on page`;

  @Output() pageChange: EventEmitter<number> = new EventEmitter<number>();
  @Output() pageBoundsCorrection: EventEmitter<number> = new EventEmitter<number>();



  constructor() {}
  

  ngOnInit() {
  
  }


}

4. 페이지네이션 컨트롤러 컴포넌트 부분

 

 

 

 

 

 

 

 

import { Component, OnInit } from '@angular/core';
import { Admins, Admin } from 'src/lib/admin';
import { CommonModule } from '@angular/common';
import { BadgeComponent } from 'src/app/components/badge/badge.component';
import { ButtonComponent } from 'src/app/components/button/button.component';
import { SearchboxComponent } from 'src/app/components/searchbox/searchbox.component';
import { DateboxComponent } from 'src/app/components/datebox/datebox.component';
import { PageSelectboxComponent } from 'src/app/components/page-selectbox/page-selectbox.component';
import { PaginationComponent } from 'src/app/components/pagination/pagination.component';
import { PageInfo } from 'src/lib/pagination';

import { NgxPaginationModule } from 'ngx-pagination';
import { FormsModule } from '@angular/forms';


@Component({
  selector: 'app-admin',
  templateUrl: './admin.page.html',
  styleUrls: ['./admin.page.scss'],
  standalone: true,
  imports: [
    CommonModule,
    BadgeComponent,
    ButtonComponent,
    SearchboxComponent,
    DateboxComponent,
    PageSelectboxComponent,
    PaginationComponent,
    NgxPaginationModule,
    FormsModule,
  ]
})

export class AdminPage  implements OnInit {

  admins: Admin[] = Admins;
  pageInfo!: PageInfo;

  button?: string | undefined;
  iconName?: string | undefined;
  placeholder?: string | undefined;
  currentPage?: number | undefined; 

  pageId: string = 'admin';

  constructor() {
    this.pageInfo = {
      itemsCount: this.admins.length,
      totalItems: this.admins.length,
      itemsPerPage: 10,
      totalPages: this.admins.length%10 === 0 ? this.admins.length : this.admins.length + 1,
      currentPage: 1,
    }
  }

  ngOnInit() {
    this.button = 'bg-blue-950 text-white';
    this.placeholder = '공지사항 제목, 내용을 입력해주세요.';
    this.iconName = 'heroicons:magnifying-glass-solid';
  }

}

5. 페이지 부분 : 위 컴포넌트 컨트롤러를 심볼 로드하여 쓰는 컴포넌트