Search code examples
angularreactjstypescriptangular2-observablesreactivex

What kinds of changes do ViewChildren and ContentChildren QueryLists listen for?

Let's say you had the following code:

<code>@ViewChildren('item') items: QueryList<any>;</code>

And somewhere else the code:

<code>this.items.changes.subscribe(() => {})</code>

What are the changes that would cause () => {} to be called? What about @ContentChildren()? I couldn't find any documentation on this.

Additionally, is there a way to get more information about the change that happened? (e.g. the type of change, the element with which the change occurred, etc.)

EDIT: The answer to the "Additionally" portion above can be found in the comments section of the answer that is marked correct.

Solution

  • Both @ViewChildren and @ContentChildren are used to get a list of Angular components.

    So if you have a component ItemComponent the binding would be like this.

    @ViewChildren(ItemComponent) items: QueryList<ItemComponent>;

    QueryList will be a list of objects that are of ItemComponent type.

    The events in the query list emit when the number of items in the list has changed. Either a component was added or destroyed. This can often often happen when *ngFor is used or other template modifiers.