This is the archived documentation for Angular v6. Please visit angular.io to see documentation for the current version of Angular.

query

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

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

Parameters

selector

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

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

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

options

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

Optional. Default is null.

Returns

AnimationQueryMetadata: An object that encapsulates the query data.

Usage notes

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

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

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

query('div', [ animate(...), animate(...) ], { limit: 1 })
      
      query('div', [
  animate(...),
  animate(...)
], { limit: 1 })
    

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

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

Usage Example

The following example queries for inner elements and animates them individually using animateChild().

@Component({ selector: 'inner', template: ` <div [@queryAnimation]="exp"> <h1>Title</h1> <div class="content"> Blah blah blah </div> </div> `, animations: [ trigger('queryAnimation', [ transition('* => goAnimate', [ // hide the inner elements query('h1', style({ opacity: 0 })), query('.content', style({ opacity: 0 })), // animate the inner elements in, one by one query('h1', animate(1000, style({ opacity: 1 })), query('.content', animate(1000, style({ opacity: 1 })), ]) ]) ] }) class Cmp { exp = ''; goAnimate() { this.exp = 'goAnimate'; } }
      
      
  1. @Component({
  2. selector: 'inner',
  3. template: `
  4. <div [@queryAnimation]="exp">
  5. <h1>Title</h1>
  6. <div class="content">
  7. Blah blah blah
  8. </div>
  9. </div>
  10. `,
  11. animations: [
  12. trigger('queryAnimation', [
  13. transition('* => goAnimate', [
  14. // hide the inner elements
  15. query('h1', style({ opacity: 0 })),
  16. query('.content', style({ opacity: 0 })),
  17.  
  18. // animate the inner elements in, one by one
  19. query('h1', animate(1000, style({ opacity: 1 })),
  20. query('.content', animate(1000, style({ opacity: 1 })),
  21. ])
  22. ])
  23. ]
  24. })
  25. class Cmp {
  26. exp = '';
  27.  
  28. goAnimate() {
  29. this.exp = 'goAnimate';
  30. }
  31. }