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?

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