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, 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 }
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.
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. |
destroy() |
---|
Implement this callback to destroy the renderer or the host element. |
|
createElement() | ||||||
---|---|---|---|---|---|---|
Implement this callback to create an instance of the host element. | ||||||
|
name | string | An identifying name for the new element, unique within the namespace. |
namespace | string | The namespace for the new element. Optional. Default is |
any
: The new element.
createComment() | |||
---|---|---|---|
Implement this callback to add a comment to the DOM of the host element. | |||
|
value | string | The comment text. |
any
: The modified element.
createText() | |||
---|---|---|---|
Implement this callback to add text to the DOM of the host element. | |||
|
value | string | The text string. |
any
: The modified element.
appendChild() | ||||||
---|---|---|---|---|---|---|
Appends a child to a given parent node in the host element DOM. | ||||||
|
parent | any | The parent node. |
newChild | any | The new child node. |
void
insertBefore() | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Implement this callback to insert a child node at a given position in a parent node in the host element DOM. | ||||||||||||
|
parent | any | The parent node. |
newChild | any | The new child nodes. |
refChild | any | The existing child node before which |
isMove | boolean | Optional argument which signifies if the current Optional. Default is |
void
removeChild() | |||||||||
---|---|---|---|---|---|---|---|---|---|
Implement this callback to remove a child node from the host element's DOM. | |||||||||
|
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 |
void
selectRootElement() | ||||||
---|---|---|---|---|---|---|
Implement this callback to prepare an element to be bootstrapped as a root element, and return the element instance. | ||||||
|
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 Optional. Default is |
any
: The root element.
parentNode() | |||
---|---|---|---|
Implement this callback to get the parent of a given node in the host element's DOM. | |||
|
node | any | The child node to query. |
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. | |||
|
node | any |
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. | ||||||||||||
|
el | any | The element. |
name | string | The attribute name. |
value | string | The new value. |
namespace | string | The namespace. Optional. Default is |
void
removeAttribute() | |||||||||
---|---|---|---|---|---|---|---|---|---|
Implement this callback to remove an attribute from an element in the DOM. | |||||||||
|
el | any | The element. |
name | string | The attribute name. |
namespace | string | The namespace. Optional. Default is |
void
addClass() | ||||||
---|---|---|---|---|---|---|
Implement this callback to add a class to an element in the DOM. | ||||||
|
el | any | The element. |
name | string | The class name. |
void
removeClass() | ||||||
---|---|---|---|---|---|---|
Implement this callback to remove a class from an element in the DOM. | ||||||
|
el | any | The element. |
name | string | The class name. |
void
setStyle() | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Implement this callback to set a CSS style for an element in the DOM. | ||||||||||||
|
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 |
void
removeStyle() | |||||||||
---|---|---|---|---|---|---|---|---|---|
Implement this callback to remove the value from a CSS style for an element in the DOM. | |||||||||
|
el | any | The element. |
style | string | The name of the style. |
flags | RendererStyleFlags2 | Flags for style variations to remove, if set. ??? Optional. Default is |
void
setProperty() | |||||||||
---|---|---|---|---|---|---|---|---|---|
Implement this callback to set the value of a property of an element in the DOM. | |||||||||
|
el | any | The element. |
name | string | The property name. |
value | any | The new value. |
void
setValue() | ||||||
---|---|---|---|---|---|---|
Implement this callback to set the value of a node in the host element. | ||||||
|
node | any | The node. |
value | string | The new value. |
void
listen() | |||||||||
---|---|---|---|---|---|---|---|---|---|
Implement this callback to start an event listener. | |||||||||
|
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. |
() => void
: An "unlisten" function for disposing of this handler.
© 2010–2021 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://v12.angular.io/api/core/Renderer2