Query

Declares an injectable parameter to be a live list of directives or variable bindings from the content children of a directive.

Example

Assume that <tabs> component would like to get a list its children <pane> components as shown in this example:

<tabs>
  <pane title="Overview">...</pane>
  <pane *ngFor="let o of objects" [title]="o.title">{{o.text}}</pane>
</tabs>

The preferred solution is to query for Pane directives using this decorator.

@Component(selector: 'pane')
class Pane {
  @Input();
  String title;
}
 
@Component(
 selector: 'tabs',
 template: '''
   <ul>
     <li *ngFor="let pane of panes">{{pane.title}}</li>
   </ul>
   <ng-content></ng-content>
 ''')
class Tabs {
  final QueryList<Pane> panes;
 
  Tabs(@Query(Pane) this.panes);
}

A query can look for variable bindings by passing in a string with desired binding symbol.

Example

<seeker>
  <div #findme>...</div>
</seeker>

@Component(selector: 'seeker')
class Seeker {
  Seeker(@Query('findme') QueryList<ElementRef> elements) {...}
}

In this case the object that is injected depend on the type of the variable binding. It can be an ElementRef, a directive or a component.

Passing in a comma separated list of variable bindings will query for all of them.

<seeker>
  <div #find-me>...</div>
  <div #find-me-too>...</div>
</seeker>

 @Component(selector: 'seeker')
class Seeker {
  Seeker(@Query('findMe, findMeToo') QueryList<ElementRef> elements) {...}
}

Configure whether query looks for direct children or all descendants of the querying element, by using the descendants parameter. It is set to false by default.

Example

<container #first>
  <item>a</item>
  <item>b</item>
  <container #second>
    <item>c</item>
  </container>
</container>

When querying for items, the first container will see only a and b by default, but with Query(TextDirective, {descendants: true}) it will see c too.

The queried directives are kept in a depth-first pre-order with respect to their positions in the DOM.

Query does not look deep into any subcomponent views.

Query is updated as part of the change-detection cycle. Since change detection happens after construction of a directive, QueryList will always be empty when observed in the constructor.

The injected object is an unmodifiable live list. See QueryList for more details.