CODEWITHSUNDEEP
angularangular-materialmat-tabmat-pagination
Rolstan D'souza
Rolstan D'souza

Reputation: 183

Mat Paginator not working in this particular table

enter image description here

you see the data is rendered properly but the items per page is undefined plus the search input type width is shrunk but if i reload the page its proper, how come ? why this wired behavior when i visit this page and when i refresh the data is rendered properly

enter image description here

Code of typescript file -

.ts

   length;
      pageSize = 25;
      pageSizeOptions = [25, 50, 75, 100];
    
      @ViewChild('TABLE') table: ElementRef;
    
      @ViewChild(MatPaginator) paginator: MatPaginator;
    
  ngOnInit() {
      this.adminservice.getClearedStudents();
        this.studentSub = this.adminservice.getClearedStudentsListener().subscribe(result => {
          if (result.length > 0) {
            // tslint:disable-next-line: prefer-for-of
            for (let i = 0; i < result.length; i++) {
              result[i].registrationno = '[ ' + result[i].registrationno + ' ]' ;
            }
            this.dataSource = new MatTableDataSource(result);
            this.dataSource.paginator = this.paginator;
            this.length = result.length;
          }
        });
}

And html file code -

<mat-paginator [length]="length" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" showFirstLastButtons></mat-paginator>

just so you know other pages with such tables the mat paginator works great only this one is troubling me, any help is appreciated, thank you in advance...

Upvotes: 1

Views: 1010

Answers (1)

maxkart
maxkart

Reputation: 667

can you check if you have initialised your paginator in ngAfterviewinit

 ngAfterViewInit() {
    this.dataSource.paginator = this.paginator;
  }

Upvotes: 2

Related Questions