p.
exported from angular2/view
defined in angular2/src/core/compiler/query_list.js (line 68)
:markdown
An iterable live list of components in the Light DOM.
Injectable Objects that contains a live list of child directives in the light DOM of a directive.
The directives are kept in depth-first pre-order traversal of the DOM.
The `QueryList` is iterable, therefore it can be used in both javascript code with `for..of` loop as well as in
template with `*for="of"` viewport.
NOTE: In the future this class will implement an `Observable` interface. For now it uses a plain list of observable
callbacks.
# Example:
Assume that `` component would like to get a list its children which are `` components as shown in this
example:
```html
...
{{o.text}}
```
In the above example the list of `` elements needs to get a list of `` elements so that it could render
tabs with the correct titles and in the correct order.
A possible solution would be for a `` to inject `` component and then register itself with ``
component's on `hydrate` and deregister on `dehydrate` event. While a reasonable approach, this would only work
partialy since `*for` could rearange the list of `` components which would not be reported to ``
component and thus the list of `` componets would be out of sync with respect to the list of `` elements.
A prefferd solution is to inject a `QueryList` which is a live list of directives in the component`s light DOM.
```javascript
@Component({
selector: 'tabs'
})
@View({
template: `
`
})
class Tabs {
panes: QueryList
constructor(@Query(Pane) panes:QueryList) {
this.panes = panes;
}
}
@Component({
selector: 'pane',
properties: ['title']
})
@View(...)
class Pane {
title:string;
}
```
.l-main-section
h2 Members
.l-sub-section
h3 onChange
pre.prettyprint
code.
(callback)
:markdown
.l-sub-section
h3 removeCallback
pre.prettyprint
code.
(callback)
:markdown