CODEWITHSUNDEEP
angularvisual-studio-2015angular-material2typescript2.0
Tommy
Tommy

Reputation: 108

why paginator's page's index doesn't change after changing in code?

hy, I have paginator:

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

Paginator works only using UI buttons, but I cannot change page's index without reloading the page in code. Nothing of the following works (mdPaginator is in the constructor):

this.pageIndex = 0;
this.mdPaginator.pageIndex = 0;
this.mdPaginator.previousPage();

By the way, I use paginator in *ngFor cycle, not table.

Upvotes: 3

Views: 6324

Answers (2)

TheRanaEhtisham
TheRanaEhtisham

Reputation: 117

simply bind the page index. it is the simplest way to get over it

<mat-paginator [length]="pageLength" class="paginator" [pageIndex]="pageIndex" [pageSize]="pageSize" [pageSizeOptions]="[10, 20, 30, pageLength]" (page)="onPaginateChange($event)">

Upvotes: 0

Martin Schneider
Martin Schneider

Reputation: 15378

You are not using the latest Material 2 version.

If you are on a version below 2.0.0-beta.10, it is a bug. So update to at least that one.

Then, this should work:

import { Component, ViewChild } from '@angular/core';
import { MdPaginator } from '@angular/material';

@Component({
  selector: 'my-component',
})
export class MyComponent {
  @ViewChild('paginator1') paginator1: MdPaginator;

  myFunction() {
    this.paginator1.pageIndex = 0;
  }

}

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

<button md-button (click)="myFunction()">Paginate</button>

In latest Material version replace MdPaginator with MatPaginator and all HTML md- with mat-

Upvotes: 1

Related Questions