[Sort] Animations not playing correctly

[nickwinger]

Bug:

When setting the initial sort with the Method sort on MatSort, the arrow is not shown, it's opactiy
is 0

What is the expected behavior?

The arrow should be visible when setting the initial sorted column with the method sort on MatSort

What is the current behavior?

The opacity of the arrow remains 0 although the column is set to sorted

What are the steps to reproduce?

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

StackBlitz starter: https://goo.gl/wwnhMV

Create a Component with a mat-table and mat-sort (with changeDetection PUSH)
Get the MatSort via ViewChild and set the default sorted column in ngOnInit with the method sort

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

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

Angular 5.2.4
Angular Material 5.2.0
Windows 10
Typescript 2.6.2
Chrome Browser 64

Is there anything else we should know?

It has already worked... (some Version ago)

[Manduro]

@nickwinger Please provide a reproduction.

What are the steps to reproduce?

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

StackBlitz starter: https://goo.gl/wwnhMV

I've tried to reproduce it following your steps, but it seems to be working correctly:
https://stackblitz.com/edit/angular-material2-issue-stefcz?file=app%2Fapp.component.ts

[shahmirn]

@Manduro I was able to reproduce it by updating material and wrapping the code in a timer(0)

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

Seems to be a regression from @angular/material 5.1.0 (which is what your StackBlitz is using)

[amandabot]

Since they are probably related, this same issue occurs when setting the sort via the matSortDirection and matSortActive inputs.

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

[rmedaer]

I confirm that it was working in previous versions (at least through matSortActive and matSortDirection inputs).

[danielhdz56]

A quick fix would be to do something like:

.mat-sort-header-sorted {
  .mat-sort-header-arrow {
    opacity: 1 !important;
    transform: translateY(0px) !important;
  }
}

[rezo-evodion]

A quick fix would be to do something like:

.mat-sort-header-sorted {
  .mat-sort-header-arrow {
    opacity: 1 !important;
    transform: translateY(0px) !important;
  }
}

unfortunately, I tried that before but it's not working, anyone has the same problem here or a fix?

[josephperrott]

Closing as this was fixed by: #10593

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