W3cubDocs

/Angular 12

QueryList

class final

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>
  __@iterator: () => Iterator<T>
  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[]
  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.

__@iterator: () => Iterator<T>

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[]

See Array.filter

filter(fn: (item: T, index: number, array: T[]) => boolean): T[]

Parameters
fn (item: T, index: number, array: T[]) => boolean
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>;
}

© 2010–2021 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://v12.angular.io/api/core/QueryList