What is the read parameter in @ViewChild for

by

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?

More Related Contents:

  1. Equivalent of $compile in Angular 2
  2. take(1) vs first()
  3. Angular2 – FormControl Validation on blur
  4. Get angular-cli to ng serve over HTTPS
  5. To enable or disable the input field based on the value of select component in angular
  6. Dynamic classname inside ngClass in angular 2
  7. Angular 4 call parent method in a child component
  8. How to clear form after submit in Angular 2?
  9. How to access host component from directive?
  10. Property ‘toPromise’ does not exist on type ‘Observable’
  11. What is the lifecycle of a service in Angular 5
  12. Conditionally apply click event in Angular 4
  13. ::ng-deep going to be deprecated – Any alternatives?
  14. TypeError: Object prototype may only be an Object or null: undefined Angular 8
  15. How to call scrollIntoView on an element in angular 2+
  16. Angular4 APP_INITIALIZER won’t delay initialization
  17. Angular 4 ExpressionChangedAfterItHasBeenCheckedError
  18. How do I get experimental ngTemplateOutlet to work?
  19. Page transition animations with Angular 2.0 router and component interface promises
  20. Accessing firebase.storage() with AngularFire2 (Angular2 rc.5)
  21. Angular load external configuration before AppModule loads
  22. Custom encoding for urls using Angular 2 Router (using a + sign in place of a space)
  23. Inject Http manually in Angular 2
  24. Firestore Error: The query requires an index
  25. Custom Exception Handler in Angular2
  26. Error from chokidar (C:\): Error: EBUSY: resource busy or locked, lstat ‘C:\DumpStack.log.tmp
  27. Angular 6 Uncaught ReferenceError: Buffer is not defined
  28. Angular 6 Migration -.angular-cli.json to angular.json
  29. Filtering specific column in Angular Material Table with filtering in angular?
  30. Do we need to unsubscribe from observable that completes/errors-out?

Leave a Comment