bug(Sort Header): Sort only works if columns are updated

[piltorious]

Reproduction

Use StackBlitz to reproduce your issue: https://stackblitz.com/edit/angular-ivy-o298jy

Steps to reproduce:

1. Create a material table with mat-sort directive (3 columns will do)
2. Add any data
3. Trigger event to apply sort through [matSortActive] and [matSortDirection]
4. Trigger another event to change the sort using the same bound string objects, do not update the displayed columns

Reproduce via demo:
In the demo you can sort initially with the "Sort by age" button, pressing "Sort by name" fails to apply the sort to the name column as coded. If you hit Reset then "Sort by name" it works fine because the displayedColumns have been changed.

Expected Behavior

The sort should change from the first column sorted to the new one.

Actual Behavior

The sort icon either goes away or does not change from the first column.

Environment

• Angular: 9.1.9
• CDK/Material: 9.2.4
• Browser(s): Chrome 80
• Operating System (e.g. Windows, macOS, Ubuntu): Windows 10

[andrewseguin]

Thanks for the detailed reproduction - this definitely seems like a bug

[piltorious]

I appreciate all the work to get this fixed. Any idea on when it will be completed?