@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

createComment

any

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

@paramvaluestring

The comment text.

@returnsany

createText

any

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

@paramvaluestring

The text string.

@returnsany

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 or not

@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

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

nextSibling

any

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

@paramnodeany

@returnsany

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

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.