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 ...