server side Pagination in Angular

You need a service that will provide data from server, This library is built to work with Angular 13+

1.Install module using cmd

npm install ngx-pagination --save

2. Import Module in app.module.ts

import {NgxPaginationModule} from 'ngx-pagination'; // <-- import the module
@NgModule({
    imports: [BrowserModule, NgxPaginationModule], // <-- include it in your app module
})

3. In // my.component.ts

@Component({
    selector: 'my-component',
    template: `
    <ul>
      <li *ngFor="let item of collection | paginate: { itemsPerPage: 10, currentPage: p }"> ... </li>
    </ul>
               
    <pagination-controls (pageChange)="p = $event"></pagination-controls>
    `
})
export class MyComponent {
    p: number = 1;
    collection: any[] = someArrayOfThings;  
}

FOR SERVER SIDE:

1.In my.component.html

<div class="col-xl-3 col-md-6 col-12" *ngFor="let hpd of top_deals_fav | paginate: { itemsPerPage: per_page, currentPage: current_page+1,totalItems:total_deals }">
{{hpd.id}}
</div>

<pagination-controls current_page = "current_page + 1" (pageChange)="getPage($event)"></pagination-controls>

2. in my.component.ts

  top_deals:any;
  top_deals_fav:any;
  total_deals:number=0;
  current_page: number = 0;
  per_page :number = 10;
  deals_found:boolean = true;

 loadData(){
    const url = environment.apiUrl+'/AllDeals;
    this.apiService.get(url).subscribe(
      (response) => {
        if(response.flag){
          this.total_deals = response.total_deals;
          this.top_deals_fav = response.data;
        });           
        }
      },
      (error) => {
        console.error(error); // Handle any errors
      }
    );
  }

  ngOnInit(){
    this.loadData();
  }

  getPage(page: number) {
      this.current_page = page-1;
      this.loadData();
  }

https://michaelbromley.github.io/ngx-pagination/#/