Table Sorting Is Not working when content is in a div with *ngIf

[TomJahncke]

What is the expected behavior?

Table data is sorted when header is clicked

What is the current behavior?

The header gets the sort arrow but no data is sorted.

What are the steps to reproduce?

This was built from the Angular Material Table example on sorting (https://material.angular.io/components/table/overview#sorting). Just added an outer <div *ngIf="ture"> ...

Example of the broken behavior is at:
https://stackblitz.com/edit/angular-quzvjv?file=app%2Ftable-sorting-example.html

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

Angular - 7.2.0
Angular Material - 7.2.1
TypeScript - 3.1.1
OS - Mac 10.14.2
Browser - Chrome 71 / Safari 12

Is there anything else we should know?

[andrewseguin]

This is because the ViewChild query for the MatSort is undefined during ngOnInit since the view has not yet initialized and set up the content of the ngIf yet.

You'll need to set the sort after the view has been initialized to resolve this:

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

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

[TomJahncke]

@andrewseguin, thank you for the very quick reply and your assistance.

FWIW, your solution work when the *ngIf evaluated to true immediately. However, when it was actually conditional I still have the same problem. However, with the insight you provided I was able to realize my root cause is that the @ViewChild was initialized. I followed the advice from https://stackoverflow.com/questions/39366981/angular-2-viewchild-in-ngif and was able to resolve my issue.

My working solution is at: https://stackblitz.com/edit/angular-quzvjv-jzdbb6

Thanks!

[pevans360]

Just ran into the same issue with the table in an <ng-container *ngIf=...>. @TomJahncke, your solution worked for me. Thanks.

@andrewseguin, would be helpful if an error was thrown rather than having it fail silently. And maybe set up the examples with the following:

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

[angular-automatic-lock-bot]

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