Menu
Let's say you had the following code:
And somewhere else the 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.
924
Any time a child element is added, removed, or moved, the query list will be updated, and the changes observable of the query list will emit a new value. The QueryList is initialized only before the ngAfterViewInit lifecycle hook, therefore, is available only from this point. ViewChildren don’t include elements that exist within the ng-content tag.
Using @ViewChildren and ContentChildren will also return a QueryList which provides an observable that you can watch for changes, so it works much more nicely in the Angular environment than using getElementById does (as tempting as that may be).
The ViewChild query returns the first matching element from the DOM and updates the component variable on which we apply it. The Syntax of the viewChild is as shown below. We apply the viewChild decorator on a Component Property. It takes two arguments. A selector and opts.
The ViewChild or ViewChildren decorators are used to Query and get the reference of the DOM element in the Component. ViewChild returns the first matching element and ViewChildren returns all the matching elements as a QueryList of items.
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.
172
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
