Make It Easy: Angular 2 simple client side pagination

Angularpagination

In this article we will be discussing about creating a simple client side pagination using Angular 2(+). This can be achieved by using very less code.

Angular simple client side pagination.

Lets start by creating a simple list.

Component code


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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
 constructor(){
    this.title = "Angular 2 simple 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'}
    ]
  }
}

Html code


<div>
  <h3> {{title}}</h3>
  <ul class="list">
    <span><strong>Name</strong></span>
    <span><strong>Age</strong></span>
    <li *ngFor="let l of list">
      <span>{{l.name}}</span>
   <span>{{l.age}}</span>
    </li>
  </ul>
</div>

Now our simple list is ready and it looks like something below.

Here I have used angular 2 ngFor for looping the data and show up in the UI. We need to make this list as paginated. Check below updated code for that.

Updated html and component code

Html code


<div>
  <h3> {{title}}</h3>
  <ul class="list">
    <span><strong>Name</strong></span>
    <span><strong>Age</strong></span>
    <li *ngFor="let l of list | slice: (curPage * pageSize) - pageSize :curPage * pageSize">
      <span>{{l.name}}</span><span>{{l.age}}</span>
    </li>
  </ul>
  <p class="pagination">
      <button [disabled] ="curPage == 1" (click)="curPage = curPage - 1">PREV</button>
        <span>Page {{curPage}} of {{ numberOfPages() }}</span>
      <button [disabled] = "curPage >= list.length/pageSize" 
               (click) ="curPage = curPage + 1">NEXT</button>
  </p>
</div>

Component


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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  curPage : number;
  pageSize : number;
  
  constructor(){
    this.title = "Angular 2 simple 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'}
    ]
    this.curPage = 1;
    this.pageSize = 3; // any page size you want 
   
  }
  numberOfPages(){
    return Math.ceil(this.list.length / this.pageSize);
  };
}

Here we have added two variable, curPage and pageSize that can be updated according to the requirement. (click) will navigate user to the desired page. You can update the look and feel for pagination control according to your needs.