DI in action

This guide explores additional features of dependency injection in Angular.

Inject the component's DOM element

Although developers strive to avoid it, some visual effects and third-party tools require direct DOM access. As a result, you might need to access a component's DOM element.

Angular exposes the underlying element of a @Component or @Directive via injection using the ElementRef injection token:

import { Directive, ElementRef } from '@angular/core';@Directive({selector: '[appHighlight]'})export class HighlightDirective {private element = inject(ElementRef)update() {this.element.nativeElement.style.color = 'red';}}

Resolve circular dependencies with a forward reference

The order of class declaration matters in TypeScript. You can't refer directly to a class until it's been defined.

This isn't usually a problem, especially if you adhere to the recommended one class per file rule. But sometimes circular references are unavoidable. For example, when class 'A' refers to class 'B' and 'B' refers to 'A', one of them has to be defined first.

The Angular forwardRef() function creates an indirect reference that Angular can resolve later.

You face a similar problem when a class makes a reference to itself. For example, in its providers array. The providers array is a property of the @Component() decorator function, which must appear before the class definition. You can break such circular references by using forwardRef.

providers: [  {    provide: PARENT_MENU_ITEM,    useExisting: forwardRef(() => MenuItem),  },],