QueryMetadata

export class QueryMetadata

exported from angular2/core defined in angular2/src/core/metadata/di.ts (line 35)

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

Example (live demo)

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="#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', inputs: ['title'] }) class Pane { title:string; } @Component({ selector: 'tabs', template: ` <ul> <li *ngFor="#pane of panes">{{pane.title}}</li> </ul> <content></content> ` }) class Tabs { panes: QueryList<Pane>; constructor(@Query(Pane) panes:QueryList<Pane>) { this.panes = panes; } }

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

Example (live demo)

<seeker> <div #findme>...</div> </seeker> @Component({ selector: 'seeker' }) class Seeker { constructor(@Query('findme') elList: QueryList<ElementRef>) {...} }

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 { constructor(@Query('findMe, findMeToo') elList: QueryList<ElementRef>) {...} }

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 (live demo)

<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.

Constructor

constructor(_selector: Type | string, {descendants = false, first = false}?: {descendants?: boolean, first?: boolean})

Not Yet Documented

Members

descendants : boolean

whether we want to query only direct children (false) or all children (true).

first : boolean

Not Yet Documented

isViewQuery : boolean

always false to differentiate it with ViewQueryMetadata.

selector

what this is querying for.

isVarBindingQuery : boolean

whether this is querying for a variable binding or a directive.

varBindings : string[]

returns a list of variable bindings this is querying for. Only applicable if this is a variable bindings query.

toString() : string

Not Yet Documented