Menu
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:
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<string> = ["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&per_page=10",{
headers:headers
})
.subscribe(data => {
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<=this.total;i++){
console.log("hello "+this.total);
this.getProducts(i);
}
},
err => {
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&page="+this.currentPage,{
headers:headers
})
.subscribe(data => {
const products = data.json();
for(var k=0;k<products.length;k++){
this.productsList.push(products[k]);
}
console.log("hello"+JSON.stringify(this.productsList));
},
err => {
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 => {
const category=data.json();
console.log(category);
this.categories=category;
console.log(JSON.stringify(this.categories));
},
err => {
console.log("Error!: ",err);
}
);
}
getCatProducts(id,count){
if(count<=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 => {
const items=data.json();
console.log(items.length);
this.categoryList=items;
console.log(JSON.stringify(this.categoryList.length));
},
err => {
console.log("Error!: ",err);
}
);
}
}
product(value){
this.router.navigate(['productdetails',value]);
}
ngOnInit() {
this.getData();
}
}<body>
<!-- breadcrumbs -->
<div class="breadcrumbs">
<div class="container">
<ol class="breadcrumb breadcrumb1 animated wow slideInLeft" data-wow-delay=".5s">
<li><a routerLink="/home"><span class="glyphicon glyphicon-home" aria-hidden="true"></span>Home</a></li>
<li class="active">Products</li>
</ol>
</div>
</div>
<div class="products">
<div class="container">
<div class="col-md-4 products-left">
<div class="categories animated wow slideInUp" data-wow-delay=".5s">
<h3>Categories</h3><br>
<ul class="cate" *ngFor="let item of categories">
<li><a style="cursor:pointer" (click)="getCatProducts(item.id,item.count)">{{item.name}}</a> <span>({{item.count}})</span></li>
</ul>
<ul>
<li (click)="getData()" style="cursor:pointer">All Products</li>
</ul>
</div>
<div class="men-position animated wow slideInUp" data-wow-delay=".5s">
<a href="single.html"><img src="assets/images/a5.jpg" alt=" " class="img-responsive" /></a>
<div class="men-position-pos">
<h5><span>55%</span> Flat Discount</h5>
</div>
</div>
</div>
<div class="col-md-8 products-right">
<br>
<div style="float:right">
<pagination-controls (pageChange)="p=$event"></pagination-controls>
</div>
<!--
<div style="float:right" [hidden]="visibleCategory">
<pagination-controls (pageChange)="p=$event"></pagination-controls>
</div>
-->
<br>
<div align="center" class="col-md-12">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8 col-sm-12" align="center">
<div class="input-group stylish-input-group">
<input type="text" class="form-control" placeholder="Let's find your product....." [(ngModel)]="search">
<span class="input-group-addon">
<button type="submit">
<span class="glyphicon glyphicon-search" (click)="searchFn()"></span>
</button>
</span>
</div>
</div>
<div class="col-md-2"></div>
</div>
</div>
<br><br>
<br>
<div class="products-right-grids-bottom">
<div class="row" myMatchHeight="panel" [hidden]="visible">
<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">
<div class="panel panel-block">
<div class="clearfix" ng-if="$index % 3 == 0"></div>
<div class="col-md-12 new-collections-grid1 animated wow slideInUp" data-wow-delay=".5s">
<div class="new-collections-grid1-image" align="center">
<a routerLink="/productdetails" class="product-image"><img class="panel-image" src="{{data.images[0].src}}" alt=" " style="text-align:center" height="175" width="150" /></a>
<div class="new-collections-grid1-image-pos">
<a (click)="product(data)">Quick View</a>
</div>
</div>
<br>
</div>
<h4 class="panel-heading"><span (click)="product(data)">{{data.name}}</span></h4>
<div class="panel-body">
<p> PRICE<span class="item_price"> {{data.regular_price}}</span></p>
<br>
<p><a class="item_add" style="border:1px solid red;color:red;padding:6px;">Add to cart </a></p>
</div>
</div>
</div>
<div class="clearfix"> </div>
</div>
<div class="row" myMatchHeight="panel" [hidden]="visibleCategory">
<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">
<div class="panel panel-block">
<div class="clearfix" ng-if="$index % 3 == 0"></div>
<div class="col-md-12 new-collections-grid1 animated wow slideInUp" data-wow-delay=".5s">
<div class="new-collections-grid1-image" align="center">
<a routerLink="/productdetails" class="product-image"><img class="panel-image" src="{{data.images[0].src}}" alt=" " style="text-align:center" height="175" width="150" /></a>
<div class="new-collections-grid1-image-pos">
<a (click)="product(data)">Quick View</a>
</div>
</div>
<br>
</div>
<h4 class="panel-heading"><span (click)="product(data)">{{data.name}}</span></h4>
<div class="panel-body">
<p> PRICE<span class="item_price"> {{data.regular_price}}</span></p>
<br>
<p><a class="item_add" style="border:1px solid red;color:red;padding:6px;">Add to cart </a></p>
</div>
</div>
</div>
<div class="clearfix"> </div>
</div>
<a *ngIf="categoryList.length==0&&visible==true">No Results found</a>
<div class="clearfix"> </div>
</div><br>
<div style="float:right">
<pagination-controls (pageChange)="p=$event"></pagination-controls>
</div>
<!--
<div style="float:right" [hidden]="visibleCategory">
<pagination-controls (pageChange)="p=$event"></pagination-controls>
</div>
-->
</div>
<div class="clearfix"> </div>
</div>
</div>
<!-- //breadcrumbs -->
</body>How can I implement multiple pagination in Angular4?
650
you have to add id on each of your pagination Items
<pagination-controls id="pagination1"....> </pagination-controls>
<pagination-controls id="pagination2"....> </pagination-controls>
Also you have to add id your list page like below:
<some-element *ngFor="let item of collection | paginate: { id: 'pagination1',
itemsPerPage: pageSize,
currentPage: p,
totalItems: total }">...</some-element>
This you can do by giving id to pagination control and pass it to paginate pipe
paginate: { id: 'versionPagination' .........other param}
<pagination-controls id="versionPagination">
</pagination-controls>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
