MatPaginator gets undefined

Question

I have replicated thsi case: Angular 5 Material Table not getting data from service

But when I try access any property from paginator I get undefined error from this objet.

Any ideas?

Thanks

Answer 1

In some cases, the issue is related to conditional outer div. Ex:

<div *ngIf="condition">
    ...

   <mat-paginator ....>
</div>

For a such scenario just replace *ngIf="condition" with [hidden]="!condition" and it'll work. Please refer to https://github.com/angular/components/issues/10205 for more details

Answer 2

MatPaginator being undefined most likely means you do not have the module imported. Sometimes angular mat does not explicitly tell you these things that you are missing. But always check the API tab under their documentation before using a component. At your module level, you should have the following in your app.module.ts file.

the import

import { MatButtonModule, MatTableModule, MatPaginatorModule, MatProgressSpinnerModule, MatTableDataSource } from '@angular/material';

Your component imported that used paginator of course

import { TableComponent } from './table/table.component';

Those modules imported in your imports array

imports: [
    BrowserAnimationsModule,
    NgbModule.forRoot(),
    FormsModule,
    RouterModule,
    AppRoutingModule,
    CommonModule,
    MatButtonModule,
    MatTableModule,
    BrowserAnimationsModule,
    MatPaginatorModule,
    MatProgressSpinnerModule,
    HttpClientModule
],

And those modules exported if necessary (different topic so I wont discuss here).

exports: [
    MatButtonModule,
    MatTableModule,
    MatPaginatorModule
],

This is all happening in my App.Module

export class AppModule { }

This assuming you do bot have your project structured as feature modules. In that case you would really only need everything I talked about in the module in which your component lives. But in this case, where everything is under the app module, this works just fine.

Answer 3

double check you have paginator component in your html

<mat-paginator [pageSizeOptions]="[50, 100, 200]" [length]="resultsLength" showFirstLastButtons></mat-paginator>

Answer 4

<div class="  fixed-form-bottom" [hidden]="changeState">
  <div class="team-footer">
    <mat-paginator #paginator [pageSize]="pageSize" [showFirstLastButtons]="true" [length]="totalSize"
      [pageIndex]="currentPage" (page)="pageEvent = handlePage($event)" [hidePageSize]="true">
    </mat-paginator>
  </div>
</div>

And in .ts file , you compare your condition and pass true/ false from there

if(this.totalSize>3){
  this.changeState=true;

}

its worked for me

Answer 5

"Inserting an *ngIf means that its contents cannot be queried until the view is initialized with change detection. This means the query for sort is empty at ngOnInit.

This can be resolved by changing the setup from ngOnInit to ngAfterViewInit. https://stackblitz.com/edit/angular-mewfek?file=src/app/app.component.ts "

reference https://github.com/angular/components/issues/15966

Answer 6

I got the same issue. Placing mat-paginator tag outside *ngIf resolved my issue. Make sure it is available to component class without any conditions.