@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 {  abstract readonly data: { [key: string]: any; };  abstract destroy(): void;  abstract createElement(name: string, namespace?: string | null | undefined): any;  abstract createComment(value: string): any;  abstract createText(value: string): any;  destroyNode: ((node: any) => void) | null;  abstract appendChild(parent: any, newChild: any): void;  abstract insertBefore(parent: any, newChild: any, refChild: any, isMove?: boolean | undefined): void;  abstract removeChild(parent: any, oldChild: any, isHostElement?: boolean | undefined, requireSynchronousElementRemoval?: boolean | undefined): void;  abstract selectRootElement(selectorOrNode: any, preserveContent?: boolean | undefined): any;  abstract parentNode(node: any): any;  abstract nextSibling(node: any): any;  abstract setAttribute(el: any, name: string, value: string, namespace?: string | null | undefined): void;  abstract removeAttribute(el: any, name: string, namespace?: string | null | undefined): void;  abstract addClass(el: any, name: string): void;  abstract removeClass(el: any, name: string): void;  abstract setStyle(el: any, style: string, value: any, flags?: RendererStyleFlags2 | undefined): void;  abstract removeStyle(el: any, style: string, flags?: RendererStyleFlags2 | undefined): void;  abstract setProperty(el: any, name: string, value: any): void;  abstract setValue(node: any, value: string): void;  abstract listen(target: any, eventName: string, callback: (event: any) => boolean | void, options?: ListenerOptions | undefined): () => void;}

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

@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

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.