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): 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
}
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, 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
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
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
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
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
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): void
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
|
|
Implement this callback to remove a child node from the host element's DOM.
|
abstract removeChild(parent: any, oldChild: any, isHostElement?: boolean): void
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
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
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.
|
|
Implement this callback to get the next sibling node of a given node
in the host element's DOM.
|
abstract nextSibling(node: any): any
abstract nextSibling(node: any): any
Parameters
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.
|
|
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
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
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
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
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
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
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
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
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
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.
|