...

/

Target Children Elements

Target Children Elements

Learn how to use the animateChild function of Angular animations to execute a child or multiple children's animations from its parent.

We'll cover the following...

Problem

You might be wondering why we’d need to trigger a child’s animation through its parent if we can execute the child’s animation directly.

One of the common use cases of this functionality is when we have an *ngIf directive attached to the parent, and each of the children has its animation triggers attached to it with their enter and leave animations. This isn’t a problem when the parent enters the DOM. All the children’s animations will be executed normally as they are added to the DOM. However, the :leave animation of the child elements doesn’t work the same way. Because the *ngIf is on the parent, once that value becomes false, the children will immediately be removed from the DOM along with the parent without executing the children’s animation and waiting for it to complete.

Solution

...