Thursday 27 July 2017

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.

Demo

We are done. In this article we have discussed about creating a simple client side pagination using Angular 2(+).

Angular 2(+)pagination

Related Post

1. Get selected values on click and show in the UI - Angular js 2

2. Simple search using pipe in angular 2

3. Date filtering and formatting using pipe in Angular 2

4. Select all/ deselect all checkbox - Angular 2

2 comments :