title: Add load more button in angular 6
body: <p>I wanted to add load more functionality in frontend using Angular 6, below is my code for home.component.html</p>
  
  <pre><code>&lt;div class="block2-txt-child1 flex-col-l " *ngFor="let product of pcatproduct"&gt;
                                  &lt;a [routerLink]="['/productdetails']" class="stext-104 cl4 hov-cl1 trans-04 js-name-b2 p-b-6"&gt;
                                      {{ product.product_name }} 
                                  &lt;/a&gt;
  
                                  &lt;span class="stext-105 cl3"&gt;
                                          {{ product.cost }} 
                                  &lt;/span&gt;
                              &lt;/div&gt;
  &lt;button (click)="getloadmoreproduct()"  class="flex-c-m stext-101 cl5 size-103 bg2 bor1 hov-btn1 p-lr-15 trans-04"&gt;
                  Load More
              &lt;/button&gt; 
  </code></pre>
  
  <p>and in home.component.ts I code for getting product by API and use one function like getcatproduct and for more product using getloadmoreproduct()</p>
  
  <pre><code>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&lt;object&gt;) =&gt; {
  
      this.pcatproduct  =  data;
      console.log(data);
  });  
  } 
  
  
      public getloadmoreproduct(){
    this.filter.limit = 5;
        this.filter.offset = 0;
  this.productlistService.getmoreProductlist(this.filter).subscribe((data:  Array&lt;object&gt;) =&gt; {
  
      this.pcatproduct  =  data;
      console.log(data);
  });  }
  </code></pre>
  
  <p>my code is not working properly , loaded data reflected on previous data</p>