Renderer2

This is the documentation for Angular 6.
You can switch to the latest version Angular 7.

The Renderer class is a service that provides an abstraction for UI rendering manipulations. Using it is the recommended approach because it then makes it easier to develop apps that can be rendered in different environments.

Tutorials

Methods

destroy()#

Destroy the renderer or the host element.

destroy(): void

createElement()#

Create an instance of the host element.

createElement(name: string, namespace?: string | null): any
  • name — an identifying name for the new element, unique within the namespace.
  • namespace - the namespace for the new element.

createComment()#

Add a comment to the DOM of the host element.

createComment(value: string): any

createText()#

Add text to the DOM of the host element.

createText(value: string): any

appendChild()#

Appends a child to a given parent node in the host element DOM.

appendChild(parent: any, newChild: any): void

insertBefore()#

Insert a child node at a given position in a parent node in the host element DOM.

insertBefore(parent: any, newChild: any, refChild: any): void
  • parent — the parent node.
  • newChild — the new child nodes.
  • refChild — the existing child node that should precede the new node.

removeChild()#

Remove a child node from the host element's DOM.

removeChild(parent: any, oldChild: any): void

selectRootElement()#

Prepare an element to be bootstrapped as a root element, and return the element instance.

selectRootElement(selectorOrNode: string | any): any

parentNode()#

Get the parent of a given node in the host element's DOM.

parentNode(node: any): any

Returns the parent node, or null if there is no parent. For WebWorkers, always returns true. This is because the check is synchronous, and the caller can't rely on checking for null.

nextSibling()#

Get the next sibling node of a given node in the host element's DOM.

nextSibling(node: any): any

Returns the sibling node, or null if there is no sibling. For WebWorkers, always returns a value. This is because the check is synchronous, and the caller can't rely on checking for null.

setAttribute()#

Set an attribute value for an element in the DOM.

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

removeAttribute()#

Remove an attribute from an element in the DOM.

removeAttribute(el: any, name: string, namespace?: string | null): void

addClass()#

Add a class to an element in the DOM.

addClass(el: any, name: string): void

removeClass()#

Remove a class from an element in the DOM.

removeClass(el: any, name: string): void

setStyle()#

Set a CSS style for an element in the DOM.

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

removeStyle()#

Remove the value from a CSS style for an element in the DOM.

removeStyle(el: any, style: string, flags?: RendererStyleFlags2): void

setProperty()#

Set the value of a property of an element in the DOM.

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

setValue()#

Set the value of a node in the host element.

setValue(node: any, value: string): void

listen()#

Start an event listener.

listen(target: 'window' | 'document' | 'body' | any, eventName: string, callback: (event: any) => boolean | void): () => void
  • target — The context in which to listen for events. Can be the entire window or document, the body of the document, or a specific DOM element.

  • eventName — The event to listen for.

  • callback — A handler function to invoke when the event occurs.