CODEWITHSUNDEEP
angular
Tejaswee
Tejaswee

Reputation: 159

Add load more button in angular 6

I wanted to add load more functionality in frontend using Angular 6, below is my code for home.component.html

<div class="block2-txt-child1 flex-col-l " *ngFor="let product of pcatproduct">
                                <a [routerLink]="['/productdetails']" class="stext-104 cl4 hov-cl1 trans-04 js-name-b2 p-b-6">
                                    {{ product.product_name }} 
                                </a>

                                <span class="stext-105 cl3">
                                        {{ product.cost }} 
                                </span>
                            </div>
<button (click)="getloadmoreproduct()"  class="flex-c-m stext-101 cl5 size-103 bg2 bor1 hov-btn1 p-lr-15 trans-04">
                Load More
            </button>

and in home.component.ts I code for getting product by API and use one function like getcatproduct and for more product using getloadmoreproduct()

filter:any = {catid:'',limit:'',offset:''};
public getcatproduct(id='',subcat='',subsubcat=''){
  console.log(id);
  this.filter.catid = id;

  this.filter.limit = 5;
  this.filter.offset = 0;
  this.productlistService.getProductlist(this.filter).subscribe((data:  Array<object>) => {

    this.pcatproduct  =  data;
    console.log(data);
});  
} 


    public getloadmoreproduct(){
  this.filter.limit = 5;
      this.filter.offset = 0;
this.productlistService.getmoreProductlist(this.filter).subscribe((data:  Array<object>) => {

    this.pcatproduct  =  data;
    console.log(data);
});  }

my code is not working properly , loaded data reflected on previous data

Upvotes: 2

Views: 7593

Answers (1)

farah el agha
farah el agha

Reputation: 77

This is because you need paging in the data coming from the API, first define a variable called page, and and each time you call getloadmoreproduct() increase the page number: ++page, to get the data in the next page. Another approach could be the infinite scroller, check this cool library which you can use: https://www.npmjs.com/package/ngx-infinite-scroll

Upvotes: 4

Related Questions