[Sort] Arrow shown if parent called animateChild()

[hanyu-natsu]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

Sort header arrow and indicator should animate normally if any parent animation calls "animateChild()" with query.

What is the current behavior?

The mat-sort-header-arrow animation is stuck with "ng-animate-queued" status. All arrows are shown when the DOM is rendered.

What are the steps to reproduce?

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

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

https://stackblitz.com/edit/angular-material2-issue-6jcfm7?file=main.ts

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

Add fade in animation to the table when entering. This was working in 5.1.0.

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

angular material & cdk 5.2.0

Is there anything else we should know?

[andrewseguin]

Yeesh, weird bug. Thanks for reporting

[Personne0012]

Hello,
I encounter similar issue, but that seems not to be only related with animateChild().
I made a mat-tab-group where each tab contains a sortable mat-table and I declare an animation trigger in my component.

When first tab is initially render all arrows are as they must be.
When navigate to following tabs, all arrows are shown as described by @lihanyu23 .
Finally when come back on previous tabs, all arrows have a very weird behavior.

The issue still appears even if you don't use this animation by removing binds of trigger from template and even with a void animation (trigger('animation', []).
The only ways to obtain the expected behavior from what I saw, is to remove component's animation declaration.(I could lazyloads tabs's content too as a workaround).

I made a little StackBlitz to reproduce the issue : https://stackblitz.com/edit/angular-material2-issue-6s8ykr

Which versions of Angular, Material, OS, TypeScript, browsers are affected?
Angular : at least from 5.2.1 to 6.0.0-beta.4
Material : at least from 5.2.0 to 6.0.0-beta-0
OS: Windows7, Android
TS: 2.5.3
Browsers: Chrome (Desktop & Android), FF, IE11

Hope this can help to fix this bug.
Regards.

[hanyu-natsu]

Hi, @Personne0012 ,

Thank you for sharing your issue.

I have looked at your stackblitz, I believe that your issue is caused by the tab-body's "@ translateTab" animation which is played when switching tab from one to another. That's why the sort header indicators display well in the first tab rendered and become weird when navigating to another.

They are all related to their parent's animations.

[sea-erkin]

I was experiencing this when I had my table working in a mat-tab-group. I switched to a nav mat-tab-nav-bar similar to this example (https://github.com/angular/material2/blob/master/src/demo-app/table/table-demo-page.html) and am no longer experiencing the issue.