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 ponent. There is not much documentation for the paginator plugin.here is the material paginator page:

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
}

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 ponent. There is not much documentation for the paginator plugin.here is the material paginator page: https://material.angular.io/ponents/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
}

• javascript
• angular
• pagination
• angular-material2

• as i seen in his api material.angular.io/ponents/paginator/api, there is @Output of page index – Álvaro Touzón Commented Jul 31, 2017 at 6:00
• how can I implement that? how to get change event in paginator? – Manoj Sanjeewa Commented Jul 31, 2017 at 6:05
• take a look at his example "pageEvent" is used material.angular.io/ponents/paginator/examples – Álvaro Touzón Commented Jul 31, 2017 at 6:09
• yes it has pageEvent but How can that be use to get the page Index. – Manoj Sanjeewa Commented Jul 31, 2017 at 6:19
• please put working demo, to help you better – Álvaro Touzón Commented Jul 31, 2017 at 6:19

1 Answer 1

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