Source: https://stackoverflow.com/questions/45318164/how-to-use-paginator-from-material-angular
I'm struggling with the same here. But I can show you what I've got doing some research. Basically, you first start adding the page @Output event in the 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, you have to add the pageEvent attribute in the foo.component.ts class and the others to handle paginator requirements:
pageEvent: PageEvent;
datasource: null;
pageIndex:number;
pageSize:number;
length:number;
And add the method that will fetch the 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, basically every time you click the paginator, you'll activate getServerData(..) method that will call foo.service.ts getting all data required. In this case, you do not need to handle nextPage and nextXXX events because it will be automatically calculated upon view rendering.
Hope this can help you. Let me know if you had success. =]
