Mat Paginator is not working properly along when used conditional rendering (*ngIf) on the outer div.

[Abhijith-Nagaraja]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

When conditional rendering is done using *ngIf on table on outer <div>, Mat-Paginator should paginate properly

What is the current behavior?

If table is inside a conditional *ngIf and is hidden to start with, then after the condition is satisfied and view is initialized, data is not paginated. And the paginator is displayed as below

What are the steps to reproduce?

With conditional rendering where we can see the problem clearly
https://stackblitz.com/edit/angular-material2-issue-s1hkz9?file=app/app.component.html

Without conditional rendering, it works properly
https://stackblitz.com/edit/angular-material2-issue-3xb5aa?file=app/app.component.html

What is the use-case or motivation for changing an existing behavior?

We need to display a table with pagination only if certain condition is met

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

"@angular/animations": "^5.2.0",
"@angular/cdk": "^5.2.0",
"@angular/common": "^5.2.0",
"@angular/compiler": "^5.2.0",
"@angular/core": "^5.2.0",
"@angular/forms": "^5.2.0",
"@angular/http": "^5.2.0",
"@angular/material": "^5.2.0",
"@angular/platform-browser": "^5.2.0",
"@angular/platform-browser-dynamic": "^5.2.0",
"@angular/router": "^5.2.0",
"typescript": "~2.5.3"

Is there anything else we should know?

NA

[Abhijith-Nagaraja]

I have the solution. But I don't know whether this is the correct way or a workaround. Please feel free to close this issue, if this is how it is designed

This is also applicable to MatSort.

Remove the following piece of code from ngAfterViewInit

@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort;
  ngAfterViewInit() {
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
  }

Add the following piece of code

  private paginator: MatPaginator;
  private sort: MatSort;

  @ViewChild(MatSort) set matSort(ms: MatSort) {
    this.sort = ms;
    this.setDataSourceAttributes();
  }

  @ViewChild(MatPaginator) set matPaginator(mp: MatPaginator) {
    this.paginator = mp;
    this.setDataSourceAttributes();
  }

  setDataSourceAttributes() {
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;

    if (this.paginator && this.sort) {
      this.applyFilter('');
    }
  }

[andrewseguin]

Unfortunately this is an Angular-thing where ViewChild doesn't catch elements with *ngIf in ngAfterViewInit. Your workaround looks feasible to me

[rain01]

I have the same issue but I'm trying to load the data from api.
@Abhijith-Nagaraja What is applyFilter()? It says it doesn't exist in my code.

[Abhijith-Nagaraja]

@rain01: applyFilter() method is a custom method. This is typically used to filter the datagrid/table.

Here is the sample for that

applyFilter(filterValue: string) {
        filterValue = filterValue.trim(); // Remove whitespace
        filterValue = filterValue.toLowerCase(); // Datasource defaults to lowercase matches
        this.dataSource.filter = filterValue;
    }

This will still work if you remove the following

if (this.paginator && this.sort) {
      this.applyFilter('');
    }

[mdhvfrnd]

Hi when we put the condition still this is not working.

<mat-paginator *ngIf="allItems ?.length > 0" #paginator [pageSize]="50" [pageSizeOptions]="[1,2,4,20, 40,100,150,200]">

[Sanafan]

the amount found items gets displayed correctly but pagination is still not working correctly :( how do i add another paginator and sort to your example @Abhijith-Nagaraja ? I have two tables in one component and cant get both paginators and sortings to work

[bresleveloper]

constructor(private s:StubService) {
    console.log('welcome to TableComponent')
    this.dataSource = new MatTableDataSource([]);

    this.s.data.subscribe(allitems => {
      console.log('TableComponent data subscribe')
      this.dataSource = new MatTableDataSource(allitems);
      this.dataSource.paginator = this.paginator;
      this.dataSource.sort = this.sort;
    })
  }

notice the new MatTableDataSource([]);, that was my solution instead of *ngIf="dataSource"

[lpalbou]

Yes the *ngIf breaks the Material Paginator, however, instead of using *ngIf, you could use the [hidden] attribute like this:

<div [hidden]="isLoading">
  <mat-table [dataSource]="dataSource">
  ...
  </mat-table>
</div>

I have tested it on Angular 5 and it does work

[kerby82]

Same here the *ngIF break the paginator. I guess this is a bug.

[KumarSidharth]

As suggested by @lpalbou *ngIf breaks mat-paginator and mat-sort.
The reason is that the value of paginator/sort in your ts file is not instantiated until the component renders it on your DOM.
Therefore you need to make sure that your DataSource object is generated after paginator renders on the DOM.
There are numerous ways to handle the issue.

• [hidden] as suggested is one.

• You may be getting data from an API call. You may initially show the table and hide it once you make an API call. After you get the data from API call show the table again.

• Giving the opacity of the table as 0 initially. Turning opacity to 1 after you get the Data. You can add CSS transitions to it.

• Giving the table width and height to 0 initially. Changing width and height to the desired value with a CSS transition.

You can take the code for CSS transitions from animista.com

[mostafamahdijoo]

I had the same issue, and using "[hidden]" attribute as @lpalbou said, solved my problem.
thanks @lpalbou .

[dheerpandey]

Thanks @Abhijith-Nagaraja your solution worked for me.

[TimoPot]

Please document the issue and solution on https://material.angular.io/components/paginator/api