How to paginate with NG-ZORRO in Angular

Issue

I want to use NG-ZORRO pagination in the Html page, it's working but fine but how do I link content with the pagination?

This is my Html code

 <div class="row card-group-row">

        <div class="col-md-6 col-lg-4 col-xl-3" *ngFor="let course of draftCourses"> //I want to paginate this data
            <div class="card-blog">
                <a href="#">
                    <img src="../assets/images/image.jpg" alt="" class="img-blog" />
                </a>
                <div class="card-blog-wrap">
                    <a href="#">
                        <h4 class="title-blog">{{course.course_title}}</h4>
                    </a>
                </div>
            </div>
        </div>
        <nz-pagination [nzPageIndex]="1" [nzTotal]="500" [nzPageSize]="2" id="demo"> </nz-pagination>
    </div>

I am getting pagination in HTML but it's not linked with the content. I have used ngx-pagination before but I want to use nz-pagination in my code, so can someone help me how to do it.

This is the official link for NG-ZORRO Click here for link

Thanks in advance.

Solution

You need to implement event which will trigger on page index change.

For binding use (nzPageIndexChange):

<nz-pagination [nzPageIndex]="1" [nzTotal]="500" [nzPageSize]="2" (nzPageIndexChange)="onPageIndexChange($event)" id="demo"></nz-pagination>

Then in your component you can implement like below:

export class YourAngularComponent{
  
  onPageIndexChange($event) {
  //do something here to go to next page
  }
.
.
}

Answered By - gkulshrestha