query

function experimental

npm Package	@angular/animations
Module	import { query } from '@angular/animations';
Source	animations/src/animation_metadata.ts

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

Description

query is an animation-specific function that is designed to be used inside of Angular's animation DSL language.

query() is used to find one or more inner elements within the current element that is being animated within the sequence. The provided animation steps are applied to the queried element (by default, an array is provided, then this will be treated as an animation sequence).

Usage

query() is designed to collect mutiple elements and works internally by using element.querySelectorAll. An additional options object can be provided which can be used to limit the total amount of items to be collected.

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

query(), by default, will throw an error when zero items are found. If a query has the optional flag set to true then this error will be ignored.

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

Special Selector Values

The selector value within a query can collect elements that contain angular-specific characteristics using special pseudo-selectors tokens.

These include:

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

Each of these pseudo-selector tokens can be merged together into a combined query selector string:

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

Demo

@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';
  }
}