
p.location-badge.
  exported from <a href='../core'>angular2/core</a>
  defined in <a href="https://github.com/angular/angular/tree/3a0410a/modules/angular2/src/core/compiler/query_list.ts#L1-L86">angular2/src/core/compiler/query_list.ts (line 1)</a>

: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 `*ng-for="of"` directive.
  
  NOTE: In the future this class will implement an `Observable` interface. For now it uses a plain
  list of observable
  callbacks.
  
  # Example:
  
  Assume that `<tabs>` component would like to get a list its children which are `<pane>`
  components as shown in this
  example:
  
  ```html
  <tabs>
    <pane title="Overview">...</pane>
    <pane *ng-for="#o of objects" [title]="o.title">{{o.text}}</pane>
  </tabs>
  ```
  
  In the above example the list of `<tabs>` elements needs to get a list of `<pane>` elements so
  that it could render
  tabs with the correct titles and in the correct order.
  
  A possible solution would be for a `<pane>` to inject `<tabs>` component and then register itself
  with `<tabs>`
  component's on `hydrate` and deregister on `dehydrate` event. While a reasonable approach, this
  would only work
  partialy since `*ng-for` could rearrange the list of `<pane>` components which would not be
  reported to `<tabs>`
  component and thus the list of `<pane>` components would be out of sync with respect to the list
  of `<pane>` elements.
  
  A preferred 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: `
     <ul>
       <li *ng-for="#pane of panes">{{pane.title}}</li>
     </ul>
     <content></content>
   `
  })
  class Tabs {
    panes: QueryList<Pane>
  
    constructor(@Query(Pane) panes:QueryList<Pane>) {
      this.panes = panes;
    }
  }
  
  @Component({
    selector: 'pane',
    properties: ['title']
  })
  @View(...)
  class Pane {
    title:string;
  }
  ```
  
.l-main-section
  h2 Members
  .l-sub-section
    h3 T

    
    :markdown

      
      





  .l-sub-section
    h3 onChange

    
    pre.prettyprint
      code.
        onChange(callback)
    
    :markdown

      
      
      





  .l-sub-section
    h3 removeCallback

    
    pre.prettyprint
      code.
        removeCallback(callback)
    
    :markdown

      
      
      




