How to add pagination functionality to a div using ngFor

Question

How to add the pagination functionality to the div.

app.component.html

<div>

 <div *ngFor="let clg of colleges$">
  <h3>{{clg.name}}</h3>
 </div>

 <mat-paginator [length]="100" [pageSize]="10" [pageSizeOptions]="[5, 10, 25, 
 100]"></mat-paginator>

</div>

Answer 1

You can use page event emitter on mat-paginator as (page)="onPageChange($event)"

<div *ngFor="let item of currentItemsToShow, let i=index;">
  Hello {{item.name}}
</div>   

onPageChange($event) {
  this.currentItemsToShow =  this.items.slice($event.pageIndex*$event.pageSize,
  $event.pageIndex*$event.pageSize + $event.pageSize);
}

Stackblitz Demo showing Customized Paginatior, try changing paginator values

Answer 2

<div ngFor="let item of items| slice: (page-1)*pagesize : page*  pagesize; index as i;">
  <div *ngIf="page==1" scope="row">{{i+1}}</div>
  <div scope="row" *ngIf="page>1">{{((page-1)*pagesize)+(i+1)}}</div>
  <div>{{item}}</div>
</div>

<ngb-pagination
  [collectionSize]="totalItems"
  [(page)]="page"
  [(pageSize)]="pagesize"
  [rotate]="true">
</ngb-pagination>