Renderer2

class

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.

      
      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): void
  abstract removeChild(parent: any, oldChild: any): 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

destroy()
Implement this callback to destroy the renderer or the host element.
abstract destroy(): void `abstract destroy(): void` Parameters There are no parameters. Returns `void`

createElement()

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.

createComment()

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.

createText()

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.

appendChild()

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

insertBefore()

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): void

Parameters

`parent`	`any`	The parent node.
`newChild`	`any`	The new child nodes.
`refChild`	`any`	The existing child node that should precede the new node.

Returns

void

removeChild()

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

      
      abstract removeChild(parent: any, oldChild: any): void

Parameters

`parent`	`any`	The parent node.
`oldChild`	`any`	The child node to remove.

Returns

void

selectRootElement()

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.

parentNode()

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. For WebWorkers, always returns true. This is because the check is synchronous, and the caller can't rely on checking for null.

nextSibling()

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. For WebWorkers, always returns a value. This is because the check is synchronous, and the caller can't rely on checking for null.

setAttribute()

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

removeAttribute()

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

addClass()

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

removeClass()

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

setStyle()

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

removeStyle()

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

setProperty()

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

setValue()

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

listen()

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.