Bug: matSortDirection will not work if matSortActive had changed in matSort directive.

[Gil-Epshtain]

Bug, feature request, or proposal:

Bug!

What is the expected behavior?

In the table element with sort-header - matSort directive - the properties matSortActive and matSortDirection will work independently.

What is the current behavior?

The matSortDirection property will work only if matSortActive didn't changed

What are the steps to reproduce?

1. Create a new Component. In it's template (html file) create a table element with matSort directive.
2. Add to this table the properties [matSortActive] and [matSortDirection] and bind them to variables in your Component
3. In the Component initialization (constructor or ngInit) set values for the variables binded to matSortActive and matSortDirection.
4. Add a method_1 that will update the matSortDirection only - Verify: The Sort-Arrow in the table's header appear in the right direction (asc/desc).
5. Add a method_2 that will update the matSortDirection and matSortActive - Bug: The Sort-Arrow in the table's header is missing!!!

Providing a StackBlitz reproduction is the best way to share your issue.

StackBlitz starter:

View and Edit: https://stackblitz.com/edit/angular-41eoff?file=main.ts

View Only: https://angular-41eoff.stackblitz.io

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

Fixing the bug and providing a current behavior for these 2 properties (matSortActive and matSortDirection).

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

• Angular v6.1.3
• Material v6.4.5
• TypeScript v2.9.2
• Browsers: Tested in Chrome, Opera (maybe others).

[petrskalicka]

Same issue happens to me.

If I programatically change sort:
this.sort.sort(<MatSortable>{id: sort.active, start: sort.direction});

and also have subscribtion to sort:
this.sort.sortChange.subscribe((sort: Sort) => ...);

I (sometimes!) receive
sort: Sort = {active: 'selected_column', direction: ''}; (Empty direction even was set to 'asc' or 'desc' before.)

By the way why I have to set it like "id / start" and get "active / direction"?

[josephperrott]

@andrewseguin It looks like the sort header UI only updates when interacted with via user interaction. If the update comes from either a property binding or from a method call it updates the state, but the UI is not reflected.

[adgoncal]

I think this is a duplicate of #10242

[Gil-Epshtain]

A work-around proposed by @pavelekNET here solved this issue for my, at-least until bug fix will be available.
Add this style (css) to your project

.mat-header-cell .mat-sort-header-container.mat-sort-header-sorted .mat-sort-header-arrow  
{
    opacity: 1 !important;
}

[nischal-km]

I have tried this on angular 5 and it works -

[matSortActive]="sort.active"

onClick() {
    this.sort.active = val;
    this.dataSource.sort = this.sort;
    const sortState: Sort = {active: val, direction: this.sort.direction === 'asc' ? 'desc' : 'asc'};
    this.sort.direction = sortState.direction;
    this.sort.sortChange.emit(sortState);
}