Thursday, July 27, 2017

Angular 2 simple client side pagination

Let us check how we can build a simple client side pagination using Angular 2. Basically it is so straight forwarded and we can achieve this by using very less code. I have explained the same using Angular 1. If interested please check below links.

Client side pagination using angular js 1
Client side pagination like google using Angular js 1

Angular 2 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.

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

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

No comments :

Post a Comment