ngx pagination in Angular 5 is not working properly

Question

I have already installed ngx-pagination in one of my angular 5 project with laravel 5.5. My Angular project is consuming APIs from Laravel. I have included the following in the HTML, ts, and service files as follows:

// ts file
getPage(number){
      this.productService.getURLpagengx(number).subscribe(data => {
        this.products = data.products.data;
        this.products_paging = data.products;
        
        });
}


// service file
getURLpagengx(no): Observable<any>{
const url = '${this.url}/api/product?page='+no;
return this.http.get(url,{headers: new HttpHeaders({Authorization:'Bearer '+ this.token})});
}

  <div class="row">
    <article class="col-md-4"  *ngFor="let product of products | paginate: { itemsPerPage: 1, currentPage: p, totalItems: products_paging.total }">    
      <div class="mt-3 mb-3">
          <div class="col-md-12">
          <div class="font-weight-bold">{{product.product_name}}</div>
          <p>{{product.description}}</p>
          <p>{{product.rating}}</p>
          <div class="pt-2 pb-2 border-top border-bottom">
            <div class="mt-1">
            </div>
          </div>  
          </div>
      </div>
    </article>
  </div>

My Pagination is working well but the currently clicked button within the pagination is not activated/ active (e.g. blue).

Below is the jSON values which received from Laravel server side:

{
    "products": {
        "current_page": 2,
        "data": [
            {
                "id": 6,
                "product_name": "Patrick Stoltenberg",
                "description": "Dinah, tell me the truth: did you call him Tortoise--' 'Why did they live on?' said Alice, who felt ready to ask help of any one; so, when the White Rabbit. She was looking up into the air off all.",
                "rating": 8,
                "price": 13.5,
                "uploaded_image": "",
                "created_at": "2018-03-22 05:34:39",
                "updated_at": "2018-03-22 05:34:39"
            },
            {
                "id": 7,
                "product_name": "Micheal Davis",
                "description": "Has lasted the rest of my own. I'm a deal faster than it does.' 'Which would NOT be an advantage,' said Alice, 'a great girl like you,' (she might well say this), 'to go on crying in this way! Stop.",
                "rating": 3,
                "price": 27.6,
                "uploaded_image": "",
                "created_at": "2018-03-22 05:34:39",
                "updated_at": "2018-03-22 05:34:39"
            },
            {
                "id": 9,
                "product_name": "Minnie Ebert",
                "description": "Mouse had changed his mind, and was going to leave off being arches to do it?' 'In my youth,' Father William replied to his son, 'I feared it might injure the brain; But, now that I'm perfectly sure.",
                "rating": 0,
                "price": 40.9,
                "uploaded_image": "",
                "created_at": "2018-03-22 05:34:39",
                "updated_at": "2018-03-22 05:34:39"
            },
            {
                "id": 10,
                "product_name": "Noble Jerde1",
                "description": "He looked at the top of its right ear and left off quarrelling with the bones and the beak-- Pray how did you do either!' And the executioner ran wildly up and beg for its dinner, and all the party.",
                "rating": 14,
                "price": 25,
                "uploaded_image": "",
                "created_at": "2018-03-22 05:34:39",
                "updated_at": "2018-04-04 07:23:13"
            },
            {
                "id": 11,
                "product_name": "Flo Connelly",
                "description": "INSIDE, you might do something better with the lobsters to the other, and making faces at him as he came, 'Oh! the Duchess, who seemed to her feet in a natural way again. 'I wonder if I've kept her.",
                "rating": 9,
                "price": 40.8,
                "uploaded_image": "",
                "created_at": "2018-03-22 05:34:39",
                "updated_at": "2018-03-22 05:34:39"
            }
        ],
        "first_page_url": "http://localhost:8000/api/product?page=1",
        "from": 6,
        "last_page": 3,
        "last_page_url": "http://localhost:8000/api/product?page=3",
        "next_page_url": "http://localhost:8000/api/product?page=3",
        "path": "http://localhost:8000/api/product",
        "per_page": 5,
        "prev_page_url": "http://localhost:8000/api/product?page=1",
        "to": 10,
        "total": 15
    }
}

when you click on next button suppose you click 2 then you hit to server or not — Sharma Vikram, Apr 19 '18 at 10:47
@SharmaVikram - Yes, clicking on each and every button the server is called by the function getPage(), by getting the number which has been clicked. — Niladri Banerjee - Uttarpara, Apr 19 '18 at 10:51
Thanks! Please proceed. FYI, the items are keep appearing one after another (no issue) but the problem is - the buttons are not active if clicked. Only the "1" button is showing active. — Niladri Banerjee - Uttarpara, Apr 19 '18 at 10:56

score 1 · Accepted Answer · answered Apr 19 '18 at 11:05

Here is my sample code you can use it

Html

<div *ngIf="members?.length else noAll">
                    <ngx-loading [show]="paginationLoader"></ngx-loading>
                        <ul class="list-group">
                                <li class="list-group-item aud-padding p-l-xxs"  *ngFor="let member of members | paginate: {id: 'server', itemsPerPage: pageLimitAndIndex.limit, currentPage: p, totalItems: totalMemberCount}">
                                        <span>
                                            <span class="checkbox m-r-sm" style="display:inline">
                                                    <mat-checkbox (change)="checkPaidUser($event, member.id)" name="paidMember[]" [(ngModel)] ="member.checked" class="member-checkbox m-m-t"></mat-checkbox>
                                            </span>
                                        </span>
                                            <span class="p-l-xs">

                                                <span class="m-t-sm">
                                                    <span>  
                                                        <strong>{{(member.firstName+' '+member.lastName) | UcWords}}</strong>
                                                    </span>
                                                    <span> &nbsp;|&nbsp;{{member.email}} </span>
                                                    <span> &nbsp;|&nbsp; {{member.mobile}} </span>

                                                </span>
                                            </span> 


                                </li>
                            </ul>
                    </div>
                    <div  class="col-xs-12 col-sm-12 col-md-12 pull-right">
                        <br><br>
                        <pagination-controls *ngIf="totalMemberCount > pageLimitAndIndex.limit"  (pageChange)="pageChanged($event)"  id="server"  class="my-pagination pull-right"></pagination-controls>
                    </div>

Controller Code:-

public pageLimitAndIndex = {limit: 20, index: 0};
p: Number = 1;
totalMemberCount: Number = 0;

Call common function in onInit

ngOnInit() {
  this.getPaidMemberDetail(this.pageLimitAndIndex);
}

Common function

  getPaidMemberDetail(params: Object = null) {
    let data = null;
    if (params != null) {
        data = params;
    }
    this.totalMemberCount = 0;
    this.appService.getJsonRequest(url, data).subscribe(result => {
        this.members = result.members;
        this.totalMemberCount = result.totalMemberCount;
        this.p = data.index + 1;       
    }, err => {
      console.log(err)
    });
  }

On page change function

   pageChanged (page) {
    this.pageLimitAndIndex.index = (page - 1);
    this.paginationLoader = true;
    this.getPaidMemberDetail(this.pageLimitAndIndex);
  }

My json response

{
"status": 200,
"members": [{
    "id": "5abcec6772c4312ca16e205b",
    "firstName": "amd",
    "lastName": "ww",
    "email": "me.xs@rediffmail.com",
    "deleted": false,
}]
"totalMemberCount": 25
 }

Everything in my code was fine. I have added just a simple thing what you did and I forgot previously. This is the code: this.p = (this.p) + 1; I paste the same in getPage() function. Now, this works like a charm. — Niladri Banerjee - Uttarpara, Apr 19 '18 at 11:19
getPage(number){ console.log(number); this.p = number; this.productService.getURLpagengx(number).subscribe(data => { this.products = data.products.data; this.products_paging = data.products; }); } — Niladri Banerjee - Uttarpara, Apr 19 '18 at 11:25
Hi sharma Vikram, can you help me with https://stackoverflow.com/questions/51870842/implementing-ngx-pagination-as-a-custom-component. Thanks. — Always_a_learner, Aug 16 '18 at 06:43

ngx pagination in Angular 5 is not working properly

1 Answers1