[Sort] Programatically setting active/direction does not update UI

[shahmirn]

Bug, feature request, or proposal:

I'm programmatically setting the active and direction on matSort, but it's not updating the UI

What is the expected behavior?

programmatically setting the active and direction on matSort updates the UI

What is the current behavior?

programmatically setting the active and direction on matSort, but it's not updating the UI

What are the steps to reproduce?

https://stackblitz.com/edit/angular-material2-issue-mc4cve?file=app/app.component.ts

What is the use-case or motivation for changing an existing behavior?

I believe this is a regression. This was working in 5.1.0

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

Is there anything else we should know?

[rsenna]

I'm seeing the same issue. Works in 5.1.0, does not in 5.2.*.

[Hotell]

Same issue here, it's kinda deal breaker, as you cannot set values dynamically or imperatively. I'm currently implementing a data table which reflects state to URL via query params, everything works ( even pagination set dynamically, cannot say the same for sort )

doesn't work with 5.2.5 nor 6.x

demo:
https://stackblitz.com/edit/github-issue-ng-material-sorting-10242

[Ian5015]

Encountering this as well in 6.0.0.

[ericbae]

Has there been any update to this?

[sergidt]

same here!!

Is a very important feature and is not working.
I attach and example where I change the sort field dynamically after two seconds and you can see what undesired behavior is shown:

https://stackblitz.com/edit/angular-owjp47?file=app/sort-overview-example.html

[jansivans]

6.3.3 - bug still here: https://stackblitz.com/edit/angular-a4yakd

[ThierryLehoux]

Could be usefull when reflect state to URL via query params.

[abbasharoon]

Any update on this?

[adgoncal]

I spent some time debugging this. Here are my observations:

When you click on a mat-sort-header that is not currently active, eventually it will call _setAnimationTransitionState({fromState: '<direction>', toState: 'active'}) on the clicked mat-sort-header.

However, when you programmatically call matSort.sort({...}), the mat-sort-header that should become active never calls _setAnimationTransitionState().

I believe this is an issue on _rerenderSubscription().

I managed to make it work with the following ugly hack:

    this.matSort.sort({
      id: <value>,
      start: <direction>,
      disableClear: true,
    });

    // ugly hack!
    const activeSortHeader = this.matSort.sortables.get(value);
    activeSortHeader['_setAnimationTransitionState']({
      fromState: <direction>,
      toState: 'active',
    });

https://stackblitz.com/edit/angular-vuvckf?file=app%2Ftable-overview-example.ts

---

References:

https://github.com/angular/material2/blob/9ab2c905e2e81999347742f880bfd851f9e32022/src/lib/sort/sort-header.ts#L230

https://github.com/angular/material2/blob/9ab2c905e2e81999347742f880bfd851f9e32022/src/lib/sort/sort-header.ts#L145-L159

https://github.com/angular/material2/blob/9ab2c905e2e81999347742f880bfd851f9e32022/src/lib/sort/sort-header.ts#L204-L212