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.
abstract class Renderer2 {
abstract data: {...}
destroyNode: ((node: any) => void) | null
abstract destroy(): void
abstract createElement(name: string, namespace?: string | null): 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: string | any): any
abstract parentNode(node: any): any
abstract nextSibling(node: any): any
abstract setAttribute(el: any, name: string, value: string, namespace?: string | null): void
abstract removeAttribute(el: any, name: string, namespace?: string | null): 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: 'window' | 'document' | 'body' | 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. |
ParametersThere are no parameters. Returns
|
Implement this callback to add a comment to the DOM of the host element. |
||
Parameters
Returns
|
Implement this callback to add text to the DOM of the host element. |
||
Parameters
Returns
|
Appends a child to a given parent node in the host element DOM. |
||||
Parameters
Returns
|
Implement this callback to insert a child node at a given position in a parent node in the host element DOM. |
||||||
Parameters
Returns
|
Implement this callback to remove a child node from the host element's DOM. |
||||
Parameters
Returns
|
Implement this callback to prepare an element to be bootstrapped as a root element, and return the element instance. |
||
Parameters
Returns
|
Implement this callback to get the parent of a given node in the host element's DOM. |
||
Parameters
Returns
|
Implement this callback to get the next sibling node of a given node in the host element's DOM. |
||
Parameters
Returns
|
Implement this callback to set an attribute value for an element in the DOM. |
||||||||
Parameters
Returns
|
Implement this callback to remove an attribute from an element in the DOM. |
||||||
Parameters
Returns
|
Implement this callback to add a class to an element in the DOM. |
||||
Parameters
Returns
|
Implement this callback to remove a class from an element in the DOM. |
||||
Parameters
Returns
|
Implement this callback to set a CSS style for an element in the DOM. |
||||||||
Parameters
Returns
|
Implement this callback to remove the value from a CSS style for an element in the DOM. |
||||||
Parameters
Returns
|
Implement this callback to set the value of a property of an element in the DOM. |
||||||
Parameters
Returns
|
Implement this callback to set the value of a node in the host element. |
||||
Parameters
Returns
|
Implement this callback to start an event listener. |
||||||
Parameters
Returns
|