Renderer2 has 19 methods. Using them is pretty easy from here.

createElement()

Most of the Renderer2 methods are pretty self-explanatory. createElement() creates an instance of the host element and expects two inputs (one optional)

createElement(name: string, namespace?: string):any

But if you open the browser console and search for the element created, you won’t find any. First, you have to place it somewhere. You can use appendChild() .

appendChild()

Appends a child to the given parent node in Host Element. Expects 2 inputs, one for parent and one for the child, which you created before with createElement() in this case.

appendChild(parent: any, newChild: any):

Now you created an element, let’s say a button. And placed it between parent tags. But you don’t see anything on the screen. Why?

Because there is nothing written inside those opening and closing tags!

Fret not. There is a method for that too.

createText()

Creates a text and adds to DOM of the Host element. Expects one input

createText(value: string)

With these 3 methods, we can create an element and append it.

If I wanted to add a comment on top of my buttons above, I could use : createComment() to create a comment and insertBefore() to add the comment before the element.

createComment()

createComment creates a comment and adds it to DOM of the Host element.

createComment(value: string)

Accepts one input.

insertBefore()

insertBefore() adds a child node before the target element but also inside the parent element.

insertBefore(parent: any, newChild: any, refChild: any)

Expects 3 inputs, first input for the parent element, second for newly created element and the third input is for reference element.

Considering insertBefore() and createComment() methods, we update our example above:

This is of course not the tidiest example but it’s really simple. Check below to see it in action.

And if we want to add a new style to an element, create a new class, add an attribute, remove it, setStyle / removeStyle , addClass / removeClass , setAttribute / removeAttribute , setProperty methods may come handy.

So, I have an input to type a username,

setStyle()

Creates an inline style for the Host element. Expects 4 inputs but one of those inputs are optional.

setStyle(el: any, style: string, value: any, flags?: RendererStyleFlags2)

Here, flags property is for style variations. Default value is undefined .

We can also add a class to this input.

addClass()

Adds a class to the Host element. Expects 2 inputs.

addClass(el: any, name: string)

if I want to add value to this input, I could use setAttribute method.

setAttribute()

Sets an attribute value for the Host element. Expects 4 inputs.

setAttribute(el: any, name: string, value: string, namespace?: string)

Last, of all, we can add a property with setProperty method.

setProperty()

Set a property with a value to an element. Looks similar to setAttribute property but attributes are defined by HTML and properties are defined by DOM.

setProperty(el: any, name: string, value: any)

Using ‘remove’ counterparts of these methods are almost identical.

removeClass(el: any, name: string) removeAttribute(el: any, name: string, namespace?: string) removeStyle(el: any, style: string, flags?: RendererStyleFlags2)

There is no removeProperty attribute. setProperty works explicitly to every element. So in order to “remove” a property, you can just set it to an empty string or basically change it.

Below you can see these methods in action:

nextSibling()

nextSibling gives next sibling node of a given node to the user.

nextSibling(node: any)

parentNode()

parentNode works similar to the nextSibling , it gives the user the parent node of the host element.

parentNode(node: any)

selectRootElement()

This is probably one of the hardest to understand properly. At least from my point of perspective. On Angular.io it says,

Implement this callback to prepare an element to be bootstrapped as a root element, and return the element instance.

That seems pretty straightforward but when you use selectRootElement method and select a root element, it removes everything inside your selected element. In order to preserve the elements inside Root element, optional preserveContent input needs to be selected true . *

selectRootElement(selectorOrNode: any, preserveContent?: boolean)

You can also choose your root Element by class or tag.

Below you can see these 3 methods together

listen()

listen(target: any, eventName: string, callback: (event: any) => boolean | void): () => void

Thank you for reading my post. If you have any suggestions, questions, please don’t hesitate to state it on the comments.

You can also follow NgTurkey on Twitter to get updates on the biggest Turkish Angular community on twitter.

*I would like to specially thank Arman Ozak for his contributions.