Cookies concent notice

This site uses cookies from Google to deliver its services and to analyze traffic.
Learn more
Skip to main content
This site is no longer updated.Head to Angular.devHome
/

This is the archived documentation for Angular v17. Please visit angular.dev to see this page for the current version of Angular.

QueryList

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

See more...

      
      class QueryList<T> implements Iterable<T> {
  constructor(_emitDistinctChangesOnly: boolean = false)
  dirty: true
  length: number
  first: T
  last: T
  changes: Observable<any>
get(index: number): T | undefined
map<U>(fn: (item: T, index: number, array: T[]) => U): U[]
filter(fn: (item: T, index: number, array: T[]) => boolean): T[]
filter<S extends T>(predicate: (value: T, index: number, array: readonly T[]) => value is S): S[]
filter(predicate: (value: T, index: number, array: readonly T[]) => unknown): 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)[], identityAccessor?: (value: T) => unknown): 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.

Further information is available in the Usage Notes...

Constructor

      
      constructor(_emitDistinctChangesOnly: boolean = false)
    
Parameters
_emitDistinctChangesOnly boolean

Optional. Default is false.

Properties

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

Returns Observable of QueryList notifying the subscriber of changes.

Methods

Returns the QueryList entry at index.

      
      get(index: number): T | undefined
    
Parameters
index number
Returns

T | undefined

See Array.map

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

U[]

      
      filter<S extends T>(predicate: (value: T, index: number, array: readonly T[]) => value is S): S[]
    
Parameters
predicate (value: T, index: number, array: readonly T[]) => value is S
Returns

S[]

      
      filter(predicate: (value: T, index: number, array: readonly T[]) => unknown): T[]
    
Parameters
predicate (value: T, index: number, array: readonly T[]) => unknown
Returns

T[]

See Array.find

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

T | undefined

See Array.reduce

      
      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

See Array.forEach

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

void

See Array.some

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

boolean

Returns a copy of the internal results list as an Array.

      
      toArray(): T[]
    
Parameters

There are no parameters.

Returns

T[]

      
      toString(): string
    
Parameters

There are no parameters.

Returns

string

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)[], identityAccessor?: (value: T) => unknown): void
    
Parameters
resultsTree (any[] | T)[]

The query results to store

identityAccessor (value: T) => unknown

Optional function for extracting stable object identity from a value in the array. This function is executed for each element of the query result list while comparing current query list with the new one (provided as a first argument of the reset function) to detect if the lists are different. If the function is not provided, elements are compared as is (without any pre-processing).

Optional. Default is undefined.

Returns

void

Triggers a change event by emitting on the changes EventEmitter.

      
      notifyOnChanges(): void
    
Parameters

There are no parameters.

Returns

void

internal

      
      setDirty()
    
Parameters

There are no parameters.

internal

      
      destroy(): void
    
Parameters

There are no parameters.

Returns

void

Usage notes

Example

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