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.