Components: [MatTable], [MatSort] Sorting stops work if table has *ngIf attribute

Created on 30 Jan 2019 · 4Comments · Source: angular/components

What is the expected behavior?

Sorting should work correct.

What is the current behavior?

<table *ngIf='true' mat-table [dataSource]="dataSource" matSort>

*ngIf makes sorting not work.

What are the steps to reproduce?

https://stackblitz.com/edit/angular-sn7pfz?file=app/table-sorting-example.html

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

Angular = 7.2.2
Material = 7.3.0
OS = ALL
TypeScript = ALL

Is there anything else we should know?

Source

vadjs

Most helpful comment

I fixed it by replacing
@ViewChild(MatSort,{static:true}) paginator: MatSort;
with :

 @ViewChild(MatSort, {static: false}) set content(sort: MatSort) {
    this.dataSource.sort = sort;
  }

and on my NgOnInit :

   this.userDataService.getUserData().subscribe(
      data => {
        this.dataSource = new MatTableDataSource<UserData>(data);
      },
      error => {
        console.log(error)
      }

    )

babzooka on 30 Jul 2019

👍6

All 4 comments

The ViewChild for MatSort is undefined at ngOnInit since the view has not yet had a chance to evaluate if the table will be displayed. To resolve this, set the MatSort on your data source after view has initialized by using the ngAfterViewInit hook.

https://stackblitz.com/edit/angular-sn7pfz-c8f9xc?file=app/table-sorting-example.ts

andrewseguin on 30 Jan 2019

I also have this issue when using *ngIf. Placing the code inside ngAfterViewInit couldn't really help to solve the problem.

andrebienemann on 30 Apr 2019

👍5

I fixed it by replacing
@ViewChild(MatSort,{static:true}) paginator: MatSort;
with :

 @ViewChild(MatSort, {static: false}) set content(sort: MatSort) {
    this.dataSource.sort = sort;
  }

and on my NgOnInit :

   this.userDataService.getUserData().subscribe(
      data => {
        this.dataSource = new MatTableDataSource<UserData>(data);
      },
      error => {
        console.log(error)
      }

    )

babzooka on 30 Jul 2019

👍6

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}