query

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

Usage notes

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

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 })

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 })

Usage Example

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

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