Angular Material data table sorting not working/no arrows shown

Question

I\'m trying to implement sorting on my angular material data table.

It\'s displaying the data correctly but the sorting doesn\'t work, it doesn\'t even show the small ar

Answer 1

It most likely won't work because your async request to load the data in the ngOnInit takes longer than for the component lifecycle hook ngAfterViewInit to be called. Therefore your dataSource is still undefined and the setting of the sorting won't work.

You could initially create a new MatTableDataSource with an empty array to get around this problem. When you declare the datasource in your component:

dataSource = new MatTableDataSource([]);

And then in your getProjects simply do this:

this.dataSource.data = this.projects;
this.dataSource.sort = this.sort;

Check out the stackblitz for a solution. I had to mock the HTTP request and used a delay to simulate the request.