CODEWITHSUNDEEP
javascriptangularpaginationangular-material2
Manoj Sanjeewa
Manoj Sanjeewa

Reputation: 1079

angular 2 material paginator get current page index

I'am using material design with angular 2. I want to use material design paginator for my application and get the current selected page index in the component. There is not much documentation for the paginator plugin.here is the material paginator page: https://material.angular.io/components/paginator/overview

html Code

<md-paginator [length]="100"
              [pageSize]="10"
              [pageSizeOptions]="[5, 10, 25, 100]">
</md-paginator>

angular 2 code

@Component({
  selector: 'paginator-overview-example',
  templateUrl: 'paginator-overview-example.html',
})
export class PaginatorOverviewExample {
   //I want to get page change event here
}

Upvotes: 4

Views: 16438

Answers (1)

Nehal
Nehal

Reputation: 13307

You can get the current page index by using the page Output event. The $event from page returns three pieces of information:

  • pageIndex
  • pageSize
  • length

html:

<md-paginator [length]="length"
              [pageSize]="pageSize"
              [pageSizeOptions]="pageSizeOptions"
              (page)="onPaginateChange($event)">
</md-paginator>

ts:

onPaginateChange(event){
    alert(JSON.stringify("Current page index: " + event.pageIndex));
  }

Plunker demo

Upvotes: 15

Related Questions