Help Angular by taking a 1 minute survey!Go to surveyHome
API > @angular/core

QueryList

An unmodifiable list of items that Angular keeps up to date when the state of the application changes.

See more...

      
      class QueryList<T> {
  dirty: true
  changes: Observable<any>
  length: number
  first: T
  last: T
  map<U>(fn: (item: T, index: number, array: T[]) => U): U[]
  filter(fn: (item: T, index: number, array: T[]) => boolean): T[]
  find(fn: (item: T, index: number, array: T[]) => boolean): T | undefined
  reduce<U>(fn: (prevValue: U, curValue: T, curIndex: number, array: T[]) => U, init: U): U
  forEach(fn: (item: T, index: number, array: T[]) => void): void
  some(fn: (value: T, index: number, array: T[]) => boolean): boolean
  toArray(): T[]
  toString(): string
  reset(resultsTree: (any[] | T)[]): void
  notifyOnChanges(): void
  setDirty()
  destroy(): void
}

Description

The type of object that ViewChildren, ContentChildren, and QueryList provide.

Implements an iterable interface, therefore it can be used in both ES6 javascript for (var i of items) loops as well as in Angular templates with *ngFor="let i of myList".

Changes can be observed by subscribing to the changes Observable.

NOTE: In the future this class will implement an Observable interface.

Properties

Property Description
dirty: true Read-only.
changes: Observable<any> Read-only.
length: number Read-only.
first: T Read-only.
last: T Read-only.

Methods

map()

See Array.map
map<U>(fn: (item: T, index: number, array: T[]) => U): U[]
      
      map<U>(fn: (item: T, index: number, array: T[]) => U): U[]
Parameters
fn (item: T, index: number, array: T[]) => U
Returns

U[]

filter()

See Array.filter
filter(fn: (item: T, index: number, array: T[]) => boolean): T[]
      
      filter(fn: (item: T, index: number, array: T[]) => boolean): T[]
Parameters
fn (item: T, index: number, array: T[]) => boolean
Returns

T[]

find()

See Array.find
find(fn: (item: T, index: number, array: T[]) => boolean): T | undefined
      
      find(fn: (item: T, index: number, array: T[]) => boolean): T | undefined
Parameters
fn (item: T, index: number, array: T[]) => boolean
Returns

T | undefined

reduce()

See Array.reduce
reduce<U>(fn: (prevValue: U, curValue: T, curIndex: number, array: T[]) => U, init: U): U
      
      reduce<U>(fn: (prevValue: U, curValue: T, curIndex: number, array: T[]) => U, init: U): U
Parameters
fn (prevValue: U, curValue: T, curIndex: number, array: T[]) => U
init U
Returns

U

forEach()

See Array.forEach
forEach(fn: (item: T, index: number, array: T[]) => void): void
      
      forEach(fn: (item: T, index: number, array: T[]) => void): void
Parameters
fn (item: T, index: number, array: T[]) => void
Returns

void

some()

See Array.some
some(fn: (value: T, index: number, array: T[]) => boolean): boolean
      
      some(fn: (value: T, index: number, array: T[]) => boolean): boolean
Parameters
fn (value: T, index: number, array: T[]) => boolean
Returns

boolean

toArray()

Returns a copy of the internal results list as an Array.
toArray(): T[]
      
      toArray(): T[]
Parameters

There are no parameters.

Returns

T[]

toString()

toString(): string
      
      toString(): string
Parameters

There are no parameters.

Returns

string

reset()

Updates the stored data of the query list, and resets the dirty flag to false, so that on change detection, it will not notify of changes to the queries, unless a new change occurs.
reset(resultsTree: (any[] | T)[]): void
      
      reset(resultsTree: (any[] | T)[]): void
Parameters
resultsTree (any[] | T)[]

The results tree to store
Returns

void

notifyOnChanges()

Triggers a change event by emitting on the changes EventEmitter.
notifyOnChanges(): void
      
      notifyOnChanges(): void
Parameters

There are no parameters.

Returns

void

setDirty()

internal
setDirty()
      
      setDirty()
Parameters

There are no parameters.

destroy()

internal
destroy(): void
      
      destroy(): void
Parameters

There are no parameters.

Returns

void

Usage notes

Example

@Component({...}) class Container { @ViewChildren(Item) items:QueryList<Item>; } 
      
      @Component({...})
class Container {
  @ViewChildren(Item) items:QueryList<Item>;
}