Angular child animations firing when parent removed from DOM

Question

When a child component has an animation transition that uses query on a mat-rable rows, hiding the parent component will trigger the child animation.

Reproduction scenario: https://codesandbox.io/s/intelligent-jasper-hzmxvy

This doesn't happen anymore if i declare the fadeOut in the AppComponent also.

@Component({ selector: "app-root", templateUrl: "./app.component.html", styleUrls: ["./app.component.css"], animations: [fadeOut()] })

Tried with other type of elements, didn't reproduce it with anything other than mat-table rows.

As Angular documentation states: https://angular.io/guide/transition-and-triggers#use-of-ngif-and-ngfor-with-enter-and-leave "Note: Entering/leaving behaviors can sometime be confusing. As a rule of thumb consider that any element being added to the DOM by Angular passes via the :enter transition, but only elements being directly removed from the DOM by Angular pass via the :leave transition (e.g. an element's view is removed from the DOM because its parent is being removed from the DOM or the app's route has changed, then the element will not pass via the :leave transition)."

I was expecting that the child animation wouldn't trigger at all, in any case.

Am i missing something?

Thank you for any responses that you may have!

Answer 1

What is the desired behavior you are after - what would you like/expect to happen?

I have a few ideas why this may be, but again, I would need to know what the exact question is.

It may have to do with the fact that the table cells are targeted by the animation:

query("td", animate("2000ms", style({ position: "absolute" })))

Or the fact that an ng-container is used and this might not count as a parent element.

Looking forward to hearing from you.