server side pagination, page changes but pagination state doesnt change

[aloksharma1]

Angular version: 8

ngx-pagination version: latest

Description of issue: i have configured server side pagination for my project, and its working fine the issue is with pagination numbers e.g. when i go to page 2 , pagenation list must also change active class to page which never happens.

Steps to reproduce: here is the code for my server side pagination

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { CampaignResort, FixContentUrl } from '../app.module';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-city',
  templateUrl: './city.component.html',
  styleUrls: ['./city.component.css']
})
export class CityComponent {
  public resdata: CampaignResort;
  state: string;
  city: string;
  callurl: string;
  http: HttpClient;
  p = 1;
  total: number;
  loading: boolean;
  constructor(http: HttpClient, private route: ActivatedRoute) {
    this.http = http;
    this.city = this.route.snapshot.paramMap.get('cname');
    this.state = this.route.snapshot.paramMap.get('sname');
    this.getPage(1);
  }
  getPage(page: number) {
    console.log('page number ' + page);
    if (this.city) {
      this.callurl = new FixContentUrl().transform('~/api/v1/campaign/citywise/' + this.city + '/' + page + '/10');
    }
    if (this.state) {
      this.callurl = new FixContentUrl().transform('~/api/v1/campaign/statewise/' + this.state + '/' + page + '/10');
    }
    this.loading = true;
    console.log(this.callurl);
    this.http
      .get<CampaignResort>(
        this.callurl
      )
      .subscribe(
        result => {
          this.resdata = result;
          this.total = result.totalItems;
          this.city = this.resdata.resorts[0].ResortCity;
          this.state = this.resdata.resorts[0].ResortState;
          this.p = page;
          this.loading = false;
        },
        error => console.error(error)
      );
  }
}

html component code:

<div class="col-md-12" *ngIf="resdata?.resorts?.length > 0">
      <div
        class="row resort-box"
        *ngFor="
          let row of resdata.resorts
            | paginate
              : {
                  itemsPerPage: resdata.itemsPerPage,
                  currentPage: page,
                  totalItems: resdata.totalItems
                }
        "
      >
        <div class="col-md-4 pl-0">
          <div class="resort-image">
            <img
              class="img-fluid"
              src="{{ row.CampaignResortImages[0].ImgUrl | FixContentUrl }}"
              alt="Card image cap"
            />
            <span class="listing-bg-blue"
              >Save {{ row.SaveInPercentage }}%</span
            >
          </div>
        </div>
        <div class="col-md-2">
          <h5>{{ row.ResortName }}</h5>
          <p>
            {{ row.ResortCity }}, {{ row.ResortState }} <a href="#">Details</a>
            </p>
            <p>
                <i class="fa fa-star listing-text-orange"></i>
                <i class="fa fa-star listing-text-orange"></i>
                <i class="fa fa-star listing-text-orange"></i>
                <i class="fa fa-star listing-text-orange"></i>
                <i class="fa fa-star listing-text-orange"></i>
                <a href="#">100% Verified Reviews</a>
            </p>
        </div>
        <div class="col-md-1 p-0">
            <p class="saving-pernight-box d-block mx-auto">
                ${{ row.PerNightCharge }} <br /> Avg/Night
                <br />
                <span></span>
            </p>
        </div>
        <div class="col-md-3">
            <p>
                <strong>
              Public Price:${{ row.PublicPrice }}<br />
              <span class="listing-text-green"
                >Savings Dollars: ${{ row.SavingDollars }}</span
              >
            </strong>
            </p>
            <hr />
            <h5>Total with Tax: ${{ row.TotalWithTax }}</h5>
            <a href="#" class="btn btn-primary listing-bg-orange mb-2">Select Room</a
          >
        </div>
        <div class="col-md-2 save-extra">
          <p>
            Save an Extra<br />
            <strong class="listing-text-green">${{ row.SaveExtra }}</strong
            ><br />
            <a href="#">Learn How</a>
            </p>
        </div>
    </div>
    <hr class="invisible" />
    <div class="row">
        <div class="col-md-12">
            <nav aria-label="Page navigation example">
                <div class="spinner" [ngClass]="{ 'hidden': !loading }"></div>
                <pagination-controls class="pagination justify-content-center" (pageChange)="getPage($event)"></pagination-controls>
            </nav>
        </div>
    </div>
</div>

Expected result: pagination active class must change after pagination is done loading new page data.

[michaelbromley]

Hi,

Looks like the error may be due to currentPage: page, in your template, since page does not exist in your component code. Maybe you meant p?

[aloksharma1]

thanks @michaelbromley that was exactly the case, can you explain to me where this p is coming from, in docs it was page so i put 'page' as variable in their.

[michaelbromley]

Yes, in your code:

export class CityComponent {
  public resdata: CampaignResort;
  state: string;
  city: string;
  callurl: string;
  http: HttpClient;
  p = 1;                 <-------------------- HERE
  total: number;
  loading: boolean;

The currentPage pipe argument refers to some property on your component. It can be named anything you like. In your case you named it p.