Target Children Elements
Explore how to trigger animations on child elements through a parent component in Angular. Learn to use the animateChild function to ensure child exit animations complete before DOM removal, improving animation flow for elements controlled by *ngIf directives.
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.