Animations and Smart Components

[Bielik20]

Minimal reproduction of the bug with instructions:

Animations do not work with smart components.

Example:

Smart Component

<app-dumb-component [data]="data"></app-dumb-component>

Dumb Component

<mat-card>
  ...
</mat-card>

When using dumb component as a "head"/"navigation" component it all works as expected.

Expected behavior:

Animations should work with smart components.

Other information:

I am not really sure how to approach it. The problem probably lies with animation selector. I have always struggled with those angular router animations so I am afraid I won't be of any help with this issue. I am having high hopes it can be done though.

Edit:

Apparently pacing dumb component inside a div solves the issue:

Smart Component

<div>
    <app-dumb-component [data]="data"></app-dumb-component>
</div>

Still I think it kind of goes against the idea of smart components. I can live with it but should someone had a better idea I would be grateful.

I would be willing to submit a PR to fix this issue:

[ ] Yes (Assistance is provided if you need help submitting a pull request)
[x] No

[dvaldivia]

I've experienced the same, seems like the animation expects a single div as the first element of the component

[tomastrajan]

@Bielik20 @dvaldivia thanks for reporting this will have a look but also feel free to solve it and submit a PR, would be very appreciated!