title: How to implement multiple pagination using ngx pagination in the same view in Angular4?
body: <p>Iam working on pagination in angular4.I used ngx pagination for implementing the pagination process.I need to apply pagination according to the user choosen type.If user choosen category,I need to display category data with pagination,by defaulty on page load,I need to display all data with pagination.Here Iam facing the problem as pagination is working for only category data.Below is my code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { Component, OnInit } from '@angular/core';
  import {Http,Response,Headers, RequestOptions} from '@angular/http';
  import { Router} from '@angular/router';
  import * as _ from "lodash";
  import { PaginationService } from '../../pagination.service';
  import { WooApiService } from 'ng2woo';
  import {SearchFilterPipe} from '../../search-filter.pipe'
  @Component({
    selector: 'app-products',
    templateUrl: './products.component.html',
    styleUrls: ['./products.component.css']
  })
  export class ProductsComponent implements OnInit {
  visible:boolean=false;
  visibleCategory:boolean=true;
    public productsList=[];
  public categories=[];
  public categoryList=[];
  catId:Number;
      public objArray: Array&lt;string&gt; = ["Albania", "Andorra", "Armenia", "Austria", "Azerbaijan"];
  total:any;  
      currentPage:Number;
  constructor(private http:Http,private router:Router,private woo: WooApiService) { 
      this.getCategories();
    }
  createAuthorizationHeader(headers: Headers) {
      headers.append('Authorization', 'Basic ' +
        btoa('ck_543700d9f8c08268d75d3efefb302df4fad70a8f:cs_f1514261bbe154d662eb5053880d40518367c901')); 
      headers.append("Content-Type", "application/json");
    }   
      getData(){
  
       let headers = new Headers();
       this.createAuthorizationHeader(headers);
  return this.http.get("https://www.colourssoftware.com/wordpress/wp-json/wc/v2/products?page=1&amp;per_page=10",{
          headers:headers
          })
        .subscribe(data =&gt; { 
          const products=data.json();
            console.log(data.headers);
  
       this.total = data.headers.get('X-WP-TotalPages');
      console.log("Pages ",this.total);
  
             for( var i=1;i&lt;=this.total;i++){
      console.log("hello "+this.total);
      this.getProducts(i);
      }   
      },
  err =&gt; {
      console.log("Error!: ",err);
  }
          );
         
  
      }   
  getProducts(i){ 
      this.visibleCategory=true;
      this.visible=false;
      this.currentPage=i;
      console.log("cpage "+this.currentPage);
      let headers = new Headers();
      this.createAuthorizationHeader(headers);
  return this.http.get("https://www.colourssoftware.com/wordpress/wp-json/wc/v2/products?per_page=10&amp;page="+this.currentPage,{
          headers:headers
          })
        .subscribe(data =&gt; { 
            const products = data.json();
  for(var k=0;k&lt;products.length;k++){
      this.productsList.push(products[k]);
      }
            console.log("hello"+JSON.stringify(this.productsList));
          },
  err =&gt; {
      console.log("Error!: ",err);
  }
          ); 
  
   } 
         getCategories(){
     console.log('categories');
      let headers=new Headers();
      this.createAuthorizationHeader(headers);
     return this.http.get('https://www.colourssoftware.com/wordpress/wp-json/wc/v2/products/categories',{
         headers:headers
         })
       .subscribe(data =&gt; { 
         const category=data.json();
         console.log(category);
           this.categories=category;
           console.log(JSON.stringify(this.categories));
         },
  err =&gt; {
     console.log("Error!: ",err);
  }
         );
     }
  getCatProducts(id,count){
  if(count&lt;=10){
      this.visible=true;
      this.visibleCategory=false;
      this.catId=id;
      console.log("id "+this.catId);
      let headers=new Headers();
      this.createAuthorizationHeader(headers);
     return this.http.get('https://www.colourssoftware.com/wordpress/wp-json/wc/v2/products?category='+this.catId,{
         headers:headers
         })
       .subscribe(data =&gt; { 
         const items=data.json();
         console.log(items.length);
           this.categoryList=items;
           console.log(JSON.stringify(this.categoryList.length));
         },
  err =&gt; {
     console.log("Error!: ",err);
  }
         ); 
      }
  }
   
  product(value){
      this.router.navigate(['productdetails',value]);
  }
  
    ngOnInit() {
        this.getData();  
    }
  
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
  
      &lt;!-- breadcrumbs --&gt;
      &lt;div class="breadcrumbs"&gt;
          &lt;div class="container"&gt;
              &lt;ol class="breadcrumb breadcrumb1 animated wow slideInLeft" data-wow-delay=".5s"&gt;
                  &lt;li&gt;&lt;a routerLink="/home"&gt;&lt;span class="glyphicon glyphicon-home" aria-hidden="true"&gt;&lt;/span&gt;Home&lt;/a&gt;&lt;/li&gt;
                  &lt;li class="active"&gt;Products&lt;/li&gt;
              &lt;/ol&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="products"&gt;
          &lt;div class="container"&gt;
              &lt;div class="col-md-4 products-left"&gt;
                  &lt;div class="categories animated wow slideInUp" data-wow-delay=".5s"&gt;
                      &lt;h3&gt;Categories&lt;/h3&gt;&lt;br&gt;
                      &lt;ul class="cate" *ngFor="let item of categories"&gt;
                          &lt;li&gt;&lt;a style="cursor:pointer" (click)="getCatProducts(item.id,item.count)"&gt;{{item.name}}&lt;/a&gt; &lt;span&gt;({{item.count}})&lt;/span&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                      &lt;ul&gt;
                          &lt;li (click)="getData()" style="cursor:pointer"&gt;All Products&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
                  &lt;div class="men-position animated wow slideInUp" data-wow-delay=".5s"&gt;
                      &lt;a href="single.html"&gt;&lt;img src="assets/images/a5.jpg" alt=" " class="img-responsive" /&gt;&lt;/a&gt;
                      &lt;div class="men-position-pos"&gt;
                          &lt;h5&gt;&lt;span&gt;55%&lt;/span&gt; Flat Discount&lt;/h5&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="col-md-8 products-right"&gt;
                  &lt;br&gt;
                  &lt;div style="float:right"&gt;
                      &lt;pagination-controls (pageChange)="p=$event"&gt;&lt;/pagination-controls&gt;
                  &lt;/div&gt;
                  &lt;!--
                  &lt;div style="float:right" [hidden]="visibleCategory"&gt;
                      &lt;pagination-controls (pageChange)="p=$event"&gt;&lt;/pagination-controls&gt;
                  &lt;/div&gt;
  --&gt;
                  &lt;br&gt;
                  &lt;div align="center" class="col-md-12"&gt;
                      &lt;div class="row"&gt;
                          &lt;div class="col-md-2"&gt;&lt;/div&gt;
                          &lt;div class="col-md-8 col-sm-12" align="center"&gt;
                              &lt;div class="input-group stylish-input-group"&gt;
                                  &lt;input type="text" class="form-control" placeholder="Let's find your product....." [(ngModel)]="search"&gt;
                                  &lt;span class="input-group-addon"&gt;
                          &lt;button type="submit"&gt;
                              &lt;span class="glyphicon glyphicon-search" (click)="searchFn()"&gt;&lt;/span&gt;
                                  &lt;/button&gt;
                                  &lt;/span&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="col-md-2"&gt;&lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;br&gt;&lt;br&gt;
                  &lt;br&gt;
  
                  &lt;div class="products-right-grids-bottom"&gt;
                      &lt;div class="row" myMatchHeight="panel" [hidden]="visible"&gt;
                          &lt;div class="col-md-4 new-collections-grid" *ngFor="let data of productsList| filter:'name':search  |paginate: {itemsPerPage:9,currentPage: p}" style="text-align: center"&gt;
                              &lt;div class="panel panel-block"&gt;
                                  &lt;div class="clearfix" ng-if="$index % 3 == 0"&gt;&lt;/div&gt;
  
  
                                  &lt;div class="col-md-12 new-collections-grid1 animated wow slideInUp" data-wow-delay=".5s"&gt;
                                      &lt;div class="new-collections-grid1-image" align="center"&gt;
  
                                          &lt;a routerLink="/productdetails" class="product-image"&gt;&lt;img class="panel-image" src="{{data.images[0].src}}" alt=" " style="text-align:center" height="175" width="150" /&gt;&lt;/a&gt;
                                          &lt;div class="new-collections-grid1-image-pos"&gt;
                                              &lt;a (click)="product(data)"&gt;Quick View&lt;/a&gt;
                                          &lt;/div&gt;
  
                                      &lt;/div&gt;
                                      &lt;br&gt;
                                  &lt;/div&gt;
                                  &lt;h4 class="panel-heading"&gt;&lt;span (click)="product(data)"&gt;{{data.name}}&lt;/span&gt;&lt;/h4&gt;
                                  &lt;div class="panel-body"&gt;
                                      &lt;p&gt; PRICE&lt;span class="item_price"&gt; {{data.regular_price}}&lt;/span&gt;&lt;/p&gt;
                                      &lt;br&gt;
                                      &lt;p&gt;&lt;a class="item_add" style="border:1px solid red;color:red;padding:6px;"&gt;Add to cart &lt;/a&gt;&lt;/p&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
  
                          &lt;/div&gt;
                          &lt;div class="clearfix"&gt; &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="row" myMatchHeight="panel" [hidden]="visibleCategory"&gt;
                          &lt;div class="col-md-4 new-collections-grid" *ngFor="let data of categoryList| filter:'name':search  |paginate: {itemsPerPage:9,currentPage: p}" style="text-align: center"&gt;
                              &lt;div class="panel panel-block"&gt;
                                  &lt;div class="clearfix" ng-if="$index % 3 == 0"&gt;&lt;/div&gt;
  
  
                                  &lt;div class="col-md-12 new-collections-grid1 animated wow slideInUp" data-wow-delay=".5s"&gt;
                                      &lt;div class="new-collections-grid1-image" align="center"&gt;
  
                                          &lt;a routerLink="/productdetails" class="product-image"&gt;&lt;img class="panel-image" src="{{data.images[0].src}}" alt=" " style="text-align:center" height="175" width="150" /&gt;&lt;/a&gt;
                                          &lt;div class="new-collections-grid1-image-pos"&gt;
                                              &lt;a (click)="product(data)"&gt;Quick View&lt;/a&gt;
                                          &lt;/div&gt;
  
                                      &lt;/div&gt;
                                      &lt;br&gt;
                                  &lt;/div&gt;
                                  &lt;h4 class="panel-heading"&gt;&lt;span (click)="product(data)"&gt;{{data.name}}&lt;/span&gt;&lt;/h4&gt;
                                  &lt;div class="panel-body"&gt;
                                      &lt;p&gt; PRICE&lt;span class="item_price"&gt; {{data.regular_price}}&lt;/span&gt;&lt;/p&gt;
                                      &lt;br&gt;
                                      &lt;p&gt;&lt;a class="item_add" style="border:1px solid red;color:red;padding:6px;"&gt;Add to cart &lt;/a&gt;&lt;/p&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
  
                          &lt;/div&gt;
                          &lt;div class="clearfix"&gt; &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;a *ngIf="categoryList.length==0&amp;&amp;visible==true"&gt;No Results found&lt;/a&gt;
                      &lt;div class="clearfix"&gt; &lt;/div&gt;
                  &lt;/div&gt;&lt;br&gt;
                  &lt;div style="float:right"&gt;
                      &lt;pagination-controls (pageChange)="p=$event"&gt;&lt;/pagination-controls&gt;
                  &lt;/div&gt;
                  &lt;!--
                  &lt;div style="float:right" [hidden]="visibleCategory"&gt;
                      &lt;pagination-controls (pageChange)="p=$event"&gt;&lt;/pagination-controls&gt;
                  &lt;/div&gt;
  --&gt;
              &lt;/div&gt;
              &lt;div class="clearfix"&gt; &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- //breadcrumbs --&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>How can I implement multiple pagination in Angular4?</p>