115

Need help to understand meaning of {read: ViewContainerRef} in following statement.

@ViewChild('myname', {read: ViewContainerRef}) target;
Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
Pankaj Kapare
  • 7,486
  • 5
  • 40
  • 56

1 Answers1

155

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
  • component instance if there is.
  • If you want to get something different you need to explicitly specify using read.

See also How can I select an element in a component template?

abd995
  • 1,649
  • 6
  • 13
Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
  • 'maybe others from components or directives applied to that tag' : How can we get the full list of possible type ? – Ghetolay Jun 24 '16 at 08:39
  • The directives and components listed in `directives: [...]` of the current component or in `PLATFORM_DITECTIVES` where a selectors matches. You can use http://stackoverflow.com/questions/35233572/how-to-access-angular2-component-specific-data-in-console/35233711#35233711 to investigate on a running application. – Günter Zöchbauer Jun 24 '16 at 09:27
  • Ho so it's only one of ```ElementRef```, ```ViewContainerRef``` or ```Directive```, with components and directives defined by user just being sub-types of ```Directive``` ? I was thinking about other types, not sub-types defined by user like directives. For instance injecting directly the ```HTMLElement``` instead of the ```ElementRef```. – Ghetolay Jun 25 '16 at 09:11
  • 3
    This only supports Angular types that are associated with a node. `HTMLElement` is not one of them. `ElementRef` allows to access the HTMLElement using `ElementRef.nativeElement. – Günter Zöchbauer Jun 25 '16 at 20:10
  • You are awesome. How did you figure this out? – allenhwkim Jun 30 '16 at 01:10
  • 1
    Just trying all kind of things and investigating the Angular2 source. – Günter Zöchbauer Jun 30 '16 at 03:03
  • How can I get what i want, when I pass element to the function on that element? eg: . How to get ElementRef in that method instead of component? – Piosek Jan 15 '19 at 10:14
  • 1
    You can't when the element is a component. You can only specify what you want if you use `@ViewChild(... read: ElementRef) ...` – Günter Zöchbauer Jan 15 '19 at 10:20
  • Just wondering. If I do it like `@ViewChild('form', {static: false}) public form: NgForm;` is angular also reading the type hint like the injector does? Or not? and is it faster to always add the read option? or is it actually slower? – Samantha Adrichem Apr 20 '20 at 13:25