Mat Paginator not working in this particular table

Question

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

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...

Answer 1

can you check if you have initialised your paginator in ngAfterviewinit

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