Target Multiple Elements
Learn how to target multiple elements using Angular animations and how to time each element's animations.
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.
query(selector: string,animation: AnimationMetadata | AnimationMetadata[],options: AnimationQueryOptions = null): AnimationQueryMetadata
Let’s take a look at each parameter more closely.
-
selector: This is an element or set of elements ...