Friday, 22 September 2017

Angular show more/less pagination

AngularShow moreShow lessPagination

In this article we will be discussing about developing a show more/less pagination using angular. Basically it is so simple which can be achieved with very less code. Let us start with a simple angular component.

Component


import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title:String;
  list:any;
  constructor(){
    this.title = "Angular: Show more/show less pagination";
    this.list = [
      {name:'Prashobh',age:'25'},
      {name:'Abraham',age:'35'},
      {name:'Anil',age:'40'},
      {name:'Sam',age:'40'},
      {name:'Philip',age:'40'},
      {name:'Bal',age:'40'},
      {name:'Anu',age:'20'},
      {name:'Sam',age:'25'},
      {name:'Rocky',age:'35'},
      {name:'Major',age:'40'},
      {name:'Kian',age:'40'},
      {name:'Karan',age:'40'},
      {name:'Bal',age:'40'},
      {name:'Anu',age:'20'},
      {name:'Prashobh',age:'25'},
      {name:'Abraham',age:'35'},
      {name:'Anil',age:'40'},
      {name:'Sam',age:'40'},
      {name:'Philip',age:'40'},
      {name:'Bal',age:'40'},
      {name:'Anu',age:'20'}
    ]
   }
}


<div>
  <h3> {{title}}</h3>
  <ul class="list">
      <li *ngFor="let l of list">{{l.name}} ({{l.age}})</li>
  </ul>
</div>

We have created our basic component, output for the above is a simple list which has a name and age info. Let us check how we can apply a show more/less pagination on this list.

HTML


<div>
 <h3> {{title}}</h3>
 <ul class="list">
  <li *ngFor="let l of list | slice : startPage:paginationLimit">
    {{l.name}} ({{l.age}})
  </li>
 </ul>
 <button *ngIf ="paginationLimit < list.length" (click)="showMoreItems()">
  Show More
 </button>
 <button *ngIf ="paginationLimit > 3" (click)="showLessItems()">
  Show Less
 </button>
</div>

We have added two buttons that can be used for getting more pages/less pages based on user's actions. And additionally added a *ngIf to prevent displaying the buttons if there is no data.

Updated component


import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title:String;
  list:any;
  startPage : Number;
  paginationLimit:Number; 
  constructor(){
    this.title = "Angular: Show more/show less pagination";
    this.list = [
      {name:'Prashobh',age:'25'},
      {name:'Abraham',age:'35'},
      {name:'Anil',age:'40'},
      {name:'Sam',age:'40'},
      {name:'Philip',age:'40'},
      {name:'Bal',age:'40'},
      {name:'Anu',age:'20'},
      {name:'Sam',age:'25'},
      {name:'Rocky',age:'35'},
      {name:'Major',age:'40'},
      {name:'Kian',age:'40'},
      {name:'Karan',age:'40'},
      {name:'Bal',age:'40'},
      {name:'Anu',age:'20'},
      {name:'Prashobh',age:'25'},
      {name:'Abraham',age:'35'},
      {name:'Anil',age:'40'},
      {name:'Sam',age:'40'},
      {name:'Philip',age:'40'},
      {name:'Bal',age:'40'},
      {name:'Anu',age:'20'}
    ]
    this.startPage = 0;
    this.paginationLimit = 3;
   }
   showMoreItems()
   {
      this.paginationLimit = Number(this.paginationLimit) + 3;        
   }
   showLessItems()
   {
     this.paginationLimit = Number(this.paginationLimit) - 3;
   }
}

We have added two simple methods showMoreItems and showLessItems which will help us to add/subtract page numbers on click. We are done with our show more/less pagination. Hope you have enjoyed this simple explanation.

Example for angular show more/less pagination

Related Info

1. Share data between components using a service file.

2. Create reusable component and share data between them.

3. Angular client side pagination.

3 comments :

  1. Thanks, it is very easy and helpful but I am facing an issue with this technique when I want to apply on dynamically generated data. A single action is performing on all generated div in a loop. Would be great if you can help for the same.

    ReplyDelete
    Replies
    1. Same example will work on dynamically generated data. Can you elaborate your question or add some piece of code here.

      Delete