{ "id": "api/animations/query", "title": "query", "contents": "\n\n
\n
\n
\n \n API > @angular/animations\n
\n
\n mode_edit\n code\n
\n
\n \n
\n

querylink

\n \n \n \n \n \n
\n \n \n\n
\n \n
\n

Finds one or more inner elements within the current element that is\nbeing animated within a sequence. Use with animate().

\n\n \n
\n \n \n \n\n
\n \n\n query(selector: string, animation: AnimationMetadata | AnimationMetadata[], options: AnimationQueryOptions = null): AnimationQueryMetadata\n\n \n\n
Parameters
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n \n selector\n string\n

The element to query, or a set of elements that contain Angular-specific\ncharacteristics, specified with one or more of the following tokens.

\n
    \n
  • query(\":enter\") or query(\":leave\") : Query for newly inserted/removed elements.
    • \n
  • query(\":animating\") : Query all currently animating elements.
    • \n
  • query(\"@triggerName\") : Query elements that contain an animation trigger.
    • \n
  • query(\"@*\") : Query all elements that contain an animation triggers.
    • \n
  • query(\":self\") : Include the current element into the animation sequence.
    • \n
\n\n
\n \n animation\n AnimationMetadata | AnimationMetadata[]\n

One or more animation steps to apply to the queried element or elements.\nAn array is treated as an animation sequence.

\n\n
\n \n options\n AnimationQueryOptions\n

An options object. Use the 'limit' field to limit the total number of\nitems to collect.

\n

Optional. Default is null.

\n\n
\n\n \n
Returns
\n

AnimationQueryMetadata: An object that encapsulates the query data.

\n \n \n\n\n \n\n \n
\n\n\n \n\n \n\n\n\n \n
\n

Usage noteslink

\n

Tokens can be merged into a combined query selector string. For example:

\n\n query(':self, .record:enter, .record:leave, @subTrigger', [...])\n\n

The query() function collects multiple elements and works internally by using\nelement.querySelectorAll. Use the limit field of an options object to limit\nthe total number of items to be collected. For example:

\n\nquery('div', [\n animate(...),\n animate(...)\n], { limit: 1 })\n\n

By default, throws an error when zero items are found. Set the\noptional flag to ignore this error. For example:

\n\nquery('.some-element-that-may-not-be-there', [\n animate(...),\n animate(...)\n], { optional: true })\n\n

Usage Examplelink

\n

The following example queries for inner elements and animates them\nindividually using animate().

\n\n@Component({\n selector: 'inner',\n template: `\n <div [@queryAnimation]=\"exp\">\n <h1>Title</h1>\n <div class=\"content\">\n Blah blah blah\n </div>\n </div>\n `,\n animations: [\n trigger('queryAnimation', [\n transition('* => goAnimate', [\n // hide the inner elements\n query('h1', style({ opacity: 0 })),\n query('.content', style({ opacity: 0 })),\n\n // animate the inner elements in, one by one\n query('h1', animate(1000, style({ opacity: 1 }))),\n query('.content', animate(1000, style({ opacity: 1 }))),\n ])\n ])\n ]\n})\nclass Cmp {\n exp = '';\n\n goAnimate() {\n this.exp = 'goAnimate';\n }\n}\n\n\n
\n\n\n\n
\n
\n\n\n" }