pagination - How to use paginator from material angular? -

i'm new angular , trying implement pagination in app. trying use component

https://material.angular.io/components/paginator/overview

with code below, can length, pagesize, , pagesizeoptions in .ts file

.html

<md-paginator [length]="length"               [pagesize]="pagesize"               [pagesizeoptions]="pagesizeoptions" </md-paginator> 

.ts

export class paginatorconfigurableexample {    length = 100;   pagesize = 10;   pagesizeoptions = [5, 10, 25, 100];    } } 

but can't seem how trigger function change data on table above when page changed? also, how use nextpage, previouspage, hasnextpage, haspreviouspage methods?

i'm struggling same here. can show i've got doing research. basically, first start adding page @output event in foo.template.ts:

 <md-paginator #paginator                 [length]="length"                 [pageindex]="pageindex"                 [pagesize]="pagesize"                 [pagesizeoptions]="[5, 10, 25, 100]"                 (page)="pageevent = getserverdata($event)"                 >  </md-paginator> 

and later, have add pageevent attribute in foo.component.ts class , others handle paginator requirements:

pageevent: pageevent; datasource: null; pageindex:number; pagesize:number; length:number; 

and add method fetch server data:

ngoninit() {    getserverdata(null) ... }  public getserverdata(event?:pageevent){   this.fooservice.getdata(event).subscribe(     response =>{       if(response.error) {         // handle error       } else {         this.datasource = response.data;         this.pageindex = response.pageindex;         this.pagesize = response.pagesize;         this.length = response.length;       }     },     error =>{       // handle error     }   );   return event; } 

so, every time click paginator, you'll activate getserverdata(..) method call foo.service.ts getting data required. in case, not need handle nextpage , nextxxx events because automatically calculated upon view rendering.

hope can you. let me know if had success. =]