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

:markdown
  An iterable and observable live list of components in the DOM.
  
  A QueryList contains a live list of child directives in the 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.
  
  QueryList is updated as part of the change-detection cycle of a directive. Since change detection
  happens after construction of a directive, QueryList will always be empty when observed in the
  constructor.
  
  
  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 partially 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#reset reset

    
    pre.prettyprint
      code.
        reset(newList: T[])
    
    :markdown





  .l-sub-section
    h3#add add

    
    pre.prettyprint
      code.
        add(obj: T)
    
    :markdown





  .l-sub-section
    h3#onChange onChange

    
    pre.prettyprint
      code.
        onChange(callback: () =&gt; void)
    
    :markdown





  .l-sub-section
    h3#removeCallback removeCallback

    
    pre.prettyprint
      code.
        removeCallback(callback: () =&gt; void)
    
    :markdown





  .l-sub-section
    h3#removeAllCallbacks removeAllCallbacks

    
    pre.prettyprint
      code.
        removeAllCallbacks()
    
    :markdown





  .l-sub-section
    h3#toString toString

    
    pre.prettyprint
      code.
        toString()
    
    :markdown





  .l-sub-section
    h3#length length

    
    :markdown





  .l-sub-section
    h3#first first

    
    :markdown





  .l-sub-section
    h3#last last

    
    :markdown





  .l-sub-section
    h3#map map

    
    pre.prettyprint
      code.
        map(fn: (item: T) =&gt; U)
    
    :markdown





  .l-sub-section
    h3#fireCallbacks fireCallbacks

    
    pre.prettyprint
      code.
        fireCallbacks()
    
    :markdown




