Need help to understand meaning of {read: ViewContainerRef} in following statement.
@ViewChild('myname', {read: ViewContainerRef}) target;
With {read: SomeType} you tell what type should be returned from the element with the #myname template variable. If you don't provide the read parameter, @ViewChild() returns the. ElementRef instance if there is no component applied, or the. component instance if there is.
The @ViewChild decorator allows us to inject into a component class references to elements used inside its template, that's what we should use it for. Using @ViewChild we can easily inject components, directives or plain DOM elements.
ViewChild returns the first matching element and ViewChildren returns all the matching elements as a QueryList of items. We can use these references to manipulate element properties in the component.
There can be several instances of various types associated with the element tag with the #myname
template variable.
For each element there is an ElementRef
and ViewContainerRef
(maybe others from components or directives applied to that tag).
If the element is a component, then there is the component instance.
There can also be one or several directives applied to the element
With {read: SomeType}
you tell what type should be returned from the element with the #myname
template variable.
If you don't provide the read
parameter, @ViewChild()
returns the
ElementRef
instance if there is no component applied, or the read
.See also How can I select an element in a component template?
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