Как добавить функциональность нумерации страниц в div, используя ngFor

Я бы использовал (page) mat-paginator, чтобы получить выбранные значения, а затем отфильтровать или объединить массив на основе значения:

Код HTML:

<div *ngFor="let clg of filteredArray">
    <h3>{{clg.name}}</h3>
</div>
<mat-paginator [length]="100" [pageSize]="defaultRecords" [pageSizeOptions]="[5, 10, 25, 100]" (page)="pageEvent = $event; onPaginateChange($event)">
</mat-paginator>

Код TS :

import { Component, OnInit, ViewChild } from '@angular/core';
import { MatPaginator, MatTableDataSource } from '@angular/material';
/**
 * @title Paginator
 */
@Component({
  selector: 'paginator-overview-example',
  templateUrl: 'paginator-overview-example.html',
  styleUrls: ['paginator-overview-example.css'],
})
export class PaginatorOverviewExample implements OnInit {

  colleges: any[] = [{ name: "1" }, { name: "2" }, { name: "3" }, { name: "4" }, { name: "5" }, { name: "6" }, { name: "7" }, { name: "8" }, { name: "9" }, { name: "10" }, { name: "11" }, { name: "12" }, { name: "13" }];

  filteredArray: any[] = []

  defaultRecords: any = 5;

  ngOnInit() {
    this.filteredArray = this.colleges.slice(0, this.defaultRecords);
  }

  onPaginateChange(data) {
    this.filteredArray = this.colleges.slice(0, data.pageSize);
  }
}

Working_Demo

Вы можете использовать page источник событий в mat-paginator как (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, показывающая настроенный пагинатор, попробуйте изменить значения пагинатора

Вы должны загрузить данные, используя ленивую загрузку.

Для этого вам сначала нужно получить общую длину записей в файле json и установить [length]="totalLength". Тогда mat-paginator автоматически установит для вас страницы на основе totalLength. Затем вы должны загрузить первые 10 данных, то есть от 0 до 10, и назначить их в колледжи $. Я сказал 10, потому что это [pageSize]. Если ваш размер страницы был 5, загрузите первые 5 данных и так далее. Затем, когда пользователь нажимает на номер страницы, например 2, вы должны позвонить вам api, и он должен вернуть следующий набор данных, то есть с 11 по 20, и назначить его для колледжей $. Данные будут автоматически обновляться в представлении.

Лучше создать API, который будет извлекать данные для вас, когда вы передадите 2 параметра - смещение и ограничение, которое является размером страницы в вашем случае. Существуют различные методы (функции) в paginator, которые запускаются при изменении pageSize или нажатии пользователем на номер страницы