Directives API

Angular as a powerful Application Programming Interface (API) for building directives. We're going to learn about two important injectable classes that we'll be using to build directives:

1. ElementRef
2. Renderer2

Both of these classes are injected into our directive classes using dependency injection via declaring a property on the class's constructor() function. Once injected, we have access to their APIs.

ElementRef

The ElementRef instance is the reference to the element on which the directive is applied. Using the ElementRef class we can obtain access to the underlying nativeElement property. When executing in the context of a browser, this is the HTMLElement object.

Renderer2

It's called Renderer2 because this is the second rendering engine that Angular shipped with. It's the most current renderer to date and is build for the browser. Remember, Angular is a framework that was developed with the goal of being cross-platform. So, Angular can be executed in other platforms beyond the browser. However, when executing in the context of the browser, the Renderer2 class has a robust API for modifying the elements in our applications.