QueryList

From Get docs
< @angular/coreAngular/docs/10/api/core/querylist


QueryList

class

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 {
  constructor()
  dirty: true
  changes: Observable<any>
  length: number
  first: T
  last: T
  __@iterator: () => Iterator<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.

Constructor

constructor()

Parameters

There are no parameters.


Properties

Property Description
dirty: true Read-Only
changes: Observable<any> Read-Only
length: number Read-Only
first: T Read-Only
last: T Read-Only
__@iterator: () => Iterator<T>

Methods

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)[]): void

Parameters
resultsTree T)[] The query results to store
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–2020 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://v10.angular.io/api/core/QueryList