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