@angular/core

Renderer2

Class

stable

Extend this base class to implement custom rendering. By default, Angular renders a template into DOM. You can use custom rendering to intercept rendering calls, or to render to something other than DOM.

API

    
      abstract class Renderer2 {}

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

void

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

@returnsvoid

createElement

any

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

@paramnamestring

An identifying name for the new element, unique within the namespace.

@paramnamespacestring | null | undefined

The namespace for the new element.

@returnsany

The new element.

createComment

any

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

@paramvaluestring

The comment text.

@returnsany

The modified element.

createText

any

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

@paramvaluestring

The text string.

@returnsany

The modified element.

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.

appendChild

void

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

@paramparentany

The parent node.

@paramnewChildany

The new child node.

@returnsvoid

insertBefore

void

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

@paramparentany

The parent node.

@paramnewChildany

The new child nodes.

@paramrefChildany

The existing child node before which newChild is inserted.

@paramisMoveboolean | undefined

Optional argument which signifies if the current insertBefore is a result of a move. Animation uses this information to trigger move animations. In the past the Animation would always assume that any insertBefore is a move. This is not strictly true because with runtime i18n it is possible to invoke insertBefore as a result of i18n and it should not trigger an animation move.

@returnsvoid

removeChild

void

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

@paramparentany

The parent node.

@paramoldChildany

The child node to remove.

@paramisHostElementboolean | undefined

Optionally signal to the renderer whether this element is a host element

@paramrequireSynchronousElementRemovalboolean | undefined

Optionally signal to the renderer whether this element needs synchronous removal

@returnsvoid

selectRootElement

any

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

@paramselectorOrNodeany

The DOM element.

@parampreserveContentboolean | undefined

Whether the contents of the root element should be preserved, or cleared upon bootstrap (default behavior). Use with ViewEncapsulation.ShadowDom to allow simple native content projection via <slot> elements.

@returnsany

The root element.

parentNode

any

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

@paramnodeany

The child node to query.

@returnsany

The parent node, or null if there is no parent. This is because the check is synchronous, and the caller can't rely on checking for null.

nextSibling

any

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

@paramnodeany

@returnsany

The sibling node, or null if there is no sibling. This is because the check is synchronous, and the caller can't rely on checking for null.

setAttribute

void

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

@paramelany

The element.

@paramnamestring

The attribute name.

@paramvaluestring

The new value.

@paramnamespacestring | null | undefined

The namespace.

@returnsvoid

removeAttribute

void

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

@paramelany

The element.

@paramnamestring

The attribute name.

@paramnamespacestring | null | undefined

The namespace.

@returnsvoid

addClass

void

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

@paramelany

The element.

@paramnamestring

The class name.

@returnsvoid

removeClass

void

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

@paramelany

The element.

@paramnamestring

The class name.

@returnsvoid

setStyle

void

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

@paramelany

The element.

@paramstylestring

The name of the style.

@paramvalueany

The new value.

@paramflagsRendererStyleFlags2 | undefined

Flags for style variations. No flags are set by default.

@returnsvoid

removeStyle

void

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

@paramelany

The element.

@paramstylestring

The name of the style.

@paramflagsRendererStyleFlags2 | undefined

Flags for style variations to remove, if set. ???

@returnsvoid

setProperty

void

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

@paramelany

The element.

@paramnamestring

The property name.

@paramvalueany

The new value.

@returnsvoid

setValue

void

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

@paramnodeany

The node.

@paramvaluestring

The new value.

@returnsvoid

listen

() => void

Implement this callback to start an event listener.

@paramtargetany

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.

@parameventNamestring

The event to listen for.

@paramcallback(event: any) => boolean | void

A handler function to invoke when the event occurs.

@paramoptionsListenerOptions | undefined

Options that configure how the event listener is bound.

@returns() => void

An "unlisten" function for disposing of this handler.

Description

Please be aware that usage of `Renderer2`, in context of accessing DOM elements, provides no extra security which makes it equivalent to Security vulnerabilities.

Create your custom renderer using RendererFactory2.

Use a custom renderer to bypass Angular's templating and make custom UI changes that can't be expressed declaratively. For example if you need to set a property or an attribute whose name is not statically known, use the setProperty() or setAttribute() method.