The Renderer2 class is an abstraction provided by Angular in the form of a service that allows to manipulate elements of your app without having to touch the DOM directly. This is the recommended approach because it then makes it easier to develop apps that can be rendered in environments that don’t have DOM access, like on the server, in a web worker or on native mobile.
You’ll often use Renderer2 in custom directives because of how Angular directives are the logical building block for modifying elements. Here’s a simple example that uses Renderer2’s addClass method to add the wild class to elements that have the directive:go-wild.directive.ts
And now, you can add the directive to elements in a template and the wild class will be added when rendered:
<!-- <h1 class="wild">Hello World!</h1> -->
You can see that overall the use of Renderer2 is not more complicated than manipulating the DOM directly. Let’s now go over some of the most useful methods:
Create new DOM elements and append them inside other elements. In this example, we create a new div and we create a text node. We then place the text node inside our new div and finally our div is added to the element referenced by our directive: