Components: [Sort] Animations not playing correctly

[tapinambur0508]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

When I use the mat-table in mat-tabs from the second tab, I see the arrows near the title, such as the letter 'T'. This is screenshots:
https://screenshots.firefox.com/XsFnYw8HvjZM6C09/localhost
https://screenshots.firefox.com/zAATrJyduZkoSGyz/localhost
Everything works fine on the version 5.1.1

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

Material 5.2.2. Browser: FF 58, Chromium 64

[julianobrasil]

It seems to be related to this https://github.com/angular/material2/issues/5269#issuecomment-365343567

[tapinambur0508]

Does it work only in material 6.0?

[julianobrasil]

It's a new feature. It needs material >= 6.0.0-beta.0

[tapinambur0508]

Do you fix this trouble in material 5?

[julianobrasil]

In that topic I linked above there are some workarounds. @lula's seemed to be the preferred one.

[ensnared]

I can confirm this issue, and it doesn't seem like the workaround posted in #5269 solves this specific issue. I've tried putting an *ngIf as suggested there on both a containing div and on the table itself, but the T-s still show up when switching to the tab containing the table.

Seems what happens is that the style of the div element containing the arrows does not get it's opacity- and transform- values set.

The issue seems to happen only if the table is not on the first (i.e. initial) tab.

I was using angular 5.2.0 and material 5.2.1, but after updating to angular 5.2.7 and material 5.2.4 the issue is the same.

I also tried upgrading material (and cdk) to 6.0.0-beta.2, still with angular 5.2.7, but the issue remains even there, while the issue described in #5269 is said to be fixed in that version.

[tapinambur0508]

I fixed that issue by added in main css file this:

.mat-sort-header-arrow {
  opacity: 0;
}

.mat-sort-header-pointer-left {
  transform: rotate(-45deg);
}

.mat-sort-header-pointer-right {
  transform: rotate(45deg);
}

[julianobrasil]

@Ensnared, it looks like normal here (material 6 beta.2): https://stackblitz.com/edit/angular-19yihc-xbntvx

[ensnared]

@julianobrasil, that code is not using the mat-table component, only sorting functionality on a normal table. If you look here, you'll see the issue persists - I forked your code so the package versions are the same:
https://stackblitz.com/edit/angular-19yihc-anlvte

The table on the initial tab looks fine, the table on the second tab does not, but the code for both tables is identical.

@tapinambur0508 Thank you, that workaround does the trick, and with no apparent side-effects as far as I can tell :)

[tapinambur0508]

@julianobrasil, could you insert my solution of this problem in next version of angular/material if it's possible? I simply copy sort header arrow style form version 5.1.1

[julianobrasil]

Oh, it's not up to me this kind of thing. The actual members of material team are the ones who are responsible for these decisions. In this case, I think @andrewseguin could give you more info.

[tapinambur0508]

@andrewseguin, could you add my changes for sort arrow in next release angular?

[vadost]

@tapinambur0508 Your solution doesn't work correctly if you set initial sorting for the table, in this case one icon should be visible

[vadost]

@andrewseguin When can you fix it?

[tapinambur0508]

@vadost, you can use version 5.1.1 if it's not critical for you