Angular List item animation with custom component

Question

I am new with angular and angular animation and I want to understand something.

I've created an animation on a list of item (on enter / on leave). For each item, I use a custom component. And to make the animation working, I have to wrap the component inside a div.

https://stackblitz.com/edit/angular-animation-question-with-component?file=src%2Fapp%2Fhello.component.html

Is it a limitation ? Or can I do something to make the animation working with the "main" div of the custom component ?

Answer 1

You just need to set display: block to your box component host element, you can do that in css like:

:host {
  display: block
}

Here is changed example on stackblitz .

Hope that helps.