Angular 12 References/ Core
🍀 Angular References

Renderer2

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.

Links & Tutorials

addClass#

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

Implement this callback to add a class to an element in the DOM.

appendChild#

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

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

createComment#

createComment(value: string): any

Implement this callback to add a comment to the DOM of the host element.

Returns The modified element.

createElement#

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

Implement this callback to create an instance of the host element.

Returns The new element.

  • name — an identifying name for the new element, unique within the namespace.
  • namespace - the namespace for the new element.

createText#

createText(value: string): any

Implement this callback to add text to the DOM of the host element.

Returns The modified element.

data#

get data(): {[key: string]: any}

Use to store arbitrary developer-defined data on a renderer instance, as an object containing key-value pairs. This is useful for renderers that delegate to other renderers.

destroy#

destroy(): void

Implement this callback to destroy the renderer or the host element.

destroyNode#

destroyNode: ((node: any) => void)|null

If null or undefined, the view engine won't call it. This is used as a performance optimization for production mode.

insertBefore#

insertBefore(parent: any, newChild: any, refChild: any, isMove?: boolean): void

Implement this callback to insert a child node at a given position in a parent node in the host element DOM.

  • parent — the parent node.
  • newChild — the new child nodes.
  • refChild — the existing child node that should precede the new node.

listen#

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

Implement this callback to start an event listener.

Returns An "unlisten" function for disposing of this handler.

  • 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.

nextSibling#

nextSibling(node: any): any

Implement this callback to get the next sibling node of a given node in the host element's DOM.

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.

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.

parentNode#

parentNode(node: any): any

Implement this callback to get the parent of a given node in the host element's DOM.

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.

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.

removeAttribute#

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

Implement this callback to remove an attribute from an element in the DOM.

removeChild#

removeChild(parent: any, oldChild: any, isHostElement?: boolean): void

Implement this callback to remove a child node from the host element's DOM.

removeClass#

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

Implement this callback to remove a class from an element in the DOM.

removeStyle#

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

Implement this callback to remove the value from a CSS style for an element in the DOM.

selectRootElement#

selectRootElement(selectorOrNode: string|any, preserveContent?: boolean): any

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

Returns The root element.

setAttribute#

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

Implement this callback to set an attribute value for an element in the DOM.

setProperty#

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

Implement this callback to set the value of a property of an element in the DOM.

setStyle#

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

Implement this callback to set a CSS style for an element in the DOM.

setValue#

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

Implement this callback to set the value of a node in the host element.