ElementRef

As explained in Modern Angular

ElementRef is an Angular wrapper that provides a reference to a host DOM element.

ElementRef is an Angular dependency-injection token that provides a reference to the host DOM element for a directive or component instance. section 3.1.3

Its behavior follows Angular’s hierarchical injector model:

• Angular provides ElementRef through the directive’s ElementInjector. section 3.1.3
• Each application of the same directive can receive a different ElementRef instance. section 3.1.3
• Angular traverses the dependency and injector tree to resolve the reference. section 3.1.3

Figure 3.2 Diagram illustrating the hierarchy of injectors and dependencies

Use the injector-hierarchy diagram to trace how Angular resolves instance-specific dependencies. section 3.1.3

How Modern Angular covers it

How deep it goes

Explains provider location, per-instance values, and hierarchical lookup, but stops short of showing ElementRef implementation code.

Examples

Uses a directive applied in multiple locations, EmployeeListComponent, and an ngFor-created directive injector.

What you can do after

Evaluate/understand how Angular resolves element references for individual directive instances.

How it connects

Connects ElementRef to dependency injection, directives, components, DOM elements, ElementInjector, and hierarchical injectors.

liveBookmanning.com

Read Modern Angular on liveBook Get the book at manning.com

Related concepts

• ViewChild decoratorproduced by · The ViewChild decorator is an Angular decorator that queries a component view for a referenced child element or component and exposes it to the class.
• ElementInjectorproduced by · An ElementInjector is an Angular injector associated with a DOM element, directive, or component instance in the rendered view hierarchy.
• shadow hostuses · A shadow host is a DOM element to which a shadow root is attached and whose shadow tree it contains.
• directiveused by · A directive is a framework-specific instruction attached to markup that controls processing, rendering, or the behavior of an element or template.

This explainer was generated by Manning's knowledge graph from the text of Modern Angular. The section links point to the parts of the book it draws on.