Cookies concent notice

This site uses cookies from Google to deliver its services and to analyze traffic.
Learn more
Skip to main content
This site is no longer updated.Head to Angular.devHome
/

This is the archived documentation for Angular v17. Please visit angular.dev to see this page for the current version of Angular.

Renderer2

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.

See more...

      
      abstract class Renderer2 {
  abstract data: {...}
  destroyNode: ((node: any) => void) | null
abstract destroy(): void
abstract createElement(name: string, namespace?: string): any
abstract createComment(value: string): any
abstract createText(value: string): any
abstract appendChild(parent: any, newChild: any): void
abstract insertBefore(parent: any, newChild: any, refChild: any, isMove?: boolean): void
abstract removeChild(parent: any, oldChild: any, isHostElement?: boolean): void
abstract selectRootElement(selectorOrNode: any, preserveContent?: boolean): any
abstract parentNode(node: any): any
abstract nextSibling(node: any): any
abstract setAttribute(el: any, name: string, value: string, namespace?: string): void
abstract removeAttribute(el: any, name: string, namespace?: string): 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): void
abstract removeStyle(el: any, style: string, flags?: RendererStyleFlags2): 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): () => void }

Description

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.

Properties

Property Description
abstract data: { [key: string]: any; } Read-Only

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.

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.

Methods

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

      
      abstract destroy(): void
    
Parameters

There are no parameters.

Returns

void

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

      
      abstract createElement(name: string, namespace?: string): any
    
Parameters
name string

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

namespace string

The namespace for the new element.

Optional. Default is undefined.

Returns

any: The new element.

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

      
      abstract createComment(value: string): any
    
Parameters
value string

The comment text.

Returns

any: The modified element.

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

      
      abstract createText(value: string): any
    
Parameters
value string

The text string.

Returns

any: The modified element.

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

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

The parent node.

newChild any

The new child node.

Returns

void

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

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

The parent node.

newChild any

The new child nodes.

refChild any

The existing child node before which newChild is inserted.

isMove boolean

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.

Optional. Default is undefined.

Returns

void

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

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

The parent node.

oldChild any

The child node to remove.

isHostElement boolean

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

Optional. Default is undefined.

Returns

void

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

      
      abstract selectRootElement(selectorOrNode: any, preserveContent?: boolean): any
    
Parameters
selectorOrNode any

The DOM element.

preserveContent boolean

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.

Optional. Default is undefined.

Returns

any: The root element.

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

      
      abstract parentNode(node: any): any
    
Parameters
node any

The child node to query.

Returns

any: 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.

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

      
      abstract nextSibling(node: any): any
    
Parameters
node any
Returns

any: 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.

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

      
      abstract setAttribute(el: any, name: string, value: string, namespace?: string): void
    
Parameters
el any

The element.

name string

The attribute name.

value string

The new value.

namespace string

The namespace.

Optional. Default is undefined.

Returns

void

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

      
      abstract removeAttribute(el: any, name: string, namespace?: string): void
    
Parameters
el any

The element.

name string

The attribute name.

namespace string

The namespace.

Optional. Default is undefined.

Returns

void

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

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

The element.

name string

The class name.

Returns

void

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

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

The element.

name string

The class name.

Returns

void

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

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

The element.

style string

The name of the style.

value any

The new value.

flags RendererStyleFlags2

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

Optional. Default is undefined.

Returns

void

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

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

The element.

style string

The name of the style.

flags RendererStyleFlags2

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

Optional. Default is undefined.

Returns

void

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

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

The element.

name string

The property name.

value any

The new value.

Returns

void

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

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

The node.

value string

The new value.

Returns

void

Implement this callback to start an event listener.

      
      abstract listen(target: any, eventName: string, callback: (event: any) => boolean | void): () => void
    
Parameters
target any

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 string

The event to listen for.

callback (event: any) => boolean | void

A handler function to invoke when the event occurs.

Returns

() => void: An "unlisten" function for disposing of this handler.