Mat-table Sorting Demo not Working

Question

I am trying to get the mat-table sorting to work locally, and while I can get the data to show up as expected, clicking on the header row does not do the sortin

Answer 1

I found multiple answers to this question, but implementing them individually did not give me any results. So I tried to merge answers and it worked.

Firstly, I added ViewChild sort inside NgAfterViewInit interface. (It was initially inside a function that was called through NgOnInit

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

For the second step i changed the *ngIf inside a container to [hidden]. I do get an error that says that the value is not loaded. But it is not a major one to be concerned about till now.

before

after

psst.. You can also consider adding a loading spinner while your table is being loaded through mat-footer to above the above bs.