Target Multiple Elements

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.