Target Multiple Elements
Explore targeting multiple child elements in Angular animations using the query function. Understand selectors, tokens, and how to apply staggered delays between animations. This lesson helps you create clean, coordinated animations for groups of elements within your Angular components.
We'll cover the following...
Angular provides a function to target inner elements within an element to be animated. The query() function targets children elements within a parent component and applies animations to each one individually. The query() function also handles all the setup and cleanup required for the animations to run, so we won’t have to worry about doing any additional manual steps.
Query
The query function accepts three parameters—selector, animation, and options—and returns an AnimationQueryMetadata. The AnimationQueryMetadata is an object that encapsulates the query data that can be passed into the transition function. The code snippet below shows the expected parameter types (lines 2–4) and return type (line 5) of the query function.
Let’s take a look at each parameter more closely.
-
selector: This is an element or ...