Renderer

export class Renderer

exported from angular2/core defined in angular2/src/core/render/api.ts (line 194)

Injectable service that provides a low-level interface for modifying the UI.

Use this service 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 setElementProperty or setElementAttribute respectively.

If you are implementing a custom renderer, you must implement this interface.

The default Renderer implementation is DomRenderer. Also available is WebWorkerRenderer.

Members

registerComponentTemplate(template: RenderComponentTemplate)

Registers a component template represented as arrays of RenderTemplateCmds and styles with the Renderer.

Once a template is registered it can be referenced via RenderBeginComponentCmd when creating Render ProtoView.

createProtoView(componentTemplateId: string, cmds: RenderTemplateCmd[]) : RenderProtoViewRef

Creates a RenderProtoViewRef from an array of RenderTemplateCmd`s.

createRootHostView(hostProtoViewRef: RenderProtoViewRef, fragmentCount: number, hostElementSelector: string) : RenderViewWithFragments

Creates a Root Host View based on the provided hostProtoViewRef.

fragmentCount is the number of nested RenderFragmentRefs in this View. This parameter is non-optional so that the renderer can create a result synchronously even when application runs in a different context (e.g. in a Web Worker).

hostElementSelector is a (CSS) selector for querying the main document to find the Host Element. The newly created Root Host View should be attached to this element.

Returns an instance of RenderViewWithFragments, representing the Render View.

createView(protoViewRef: RenderProtoViewRef, fragmentCount: number) : RenderViewWithFragments

Creates a Render View based on the provided protoViewRef.

fragmentCount is the number of nested RenderFragmentRefs in this View. This parameter is non-optional so that the renderer can create a result synchronously even when application runs in a different context (e.g. in a Web Worker).

Returns an instance of RenderViewWithFragments, representing the Render View.

destroyView(viewRef: RenderViewRef)

Destroys a Render View specified via viewRef.

This operation should be performed only on a View that has already been dehydrated and all of its Render Fragments have been detached.

Destroying a View indicates to the Renderer that this View is not going to be referenced in any future operations. If the Renderer created any renderer-specific objects for this View, these objects should now be destroyed to prevent memory leaks.

attachFragmentAfterFragment(previousFragmentRef: RenderFragmentRef, fragmentRef: RenderFragmentRef)

Attaches the Nodes of a Render Fragment after the last Node of previousFragmentRef.

attachFragmentAfterElement(elementRef: RenderElementRef, fragmentRef: RenderFragmentRef)

Attaches the Nodes of the Render Fragment after an Element.

detachFragment(fragmentRef: RenderFragmentRef)

Detaches the Nodes of a Render Fragment from their parent.

This operations should be called only on a View that has been already dehydrated.

hydrateView(viewRef: RenderViewRef)

Notifies a custom Renderer to initialize a Render View.

This method is called by Angular after a Render View has been created, or when a previously dehydrated Render View is about to be reused.

dehydrateView(viewRef: RenderViewRef)

Notifies a custom Renderer that a Render View is no longer active.

This method is called by Angular before a Render View will be destroyed, or when a hydrated Render View is about to be put into a pool for future reuse.

getNativeElementSync(location: RenderElementRef) : any

Returns the underlying native element at the specified location, or null if direct access to native elements is not supported (e.g. when the application runs in a web worker).

Use with caution

Use this api as the last resort when direct access to DOM is needed. Use templating and data-binding, or other Renderer methods instead.

Relying on direct DOM access creates tight coupling between your application and rendering layers which will make it impossible to separate the two and deploy your application into a web worker. 

setElementProperty(location: RenderElementRef, propertyName: string, propertyValue: any)

Sets a property on the Element specified via location.

setElementAttribute(location: RenderElementRef, attributeName: string, attributeValue: string)

Sets an attribute on the Element specified via location.

If attributeValue is null, the attribute is removed.

setBindingDebugInfo(location: RenderElementRef, propertyName: string, propertyValue: string)

Not Yet Documented

setElementClass(location: RenderElementRef, className: string, isAdd: boolean)

Sets a (CSS) class on the Element specified via location.

isAdd specifies if the class should be added or removed.

setElementStyle(location: RenderElementRef, styleName: string, styleValue: string)

Sets a (CSS) inline style on the Element specified via location.

If styleValue is null, the style is removed.

invokeElementMethod(location: RenderElementRef, methodName: string, args: any[])

Calls a method on the Element specified via location.

setText(viewRef: RenderViewRef, textNodeIndex: number, text: string)

Sets the value of an interpolated TextNode at the specified index to the text value.

textNodeIndex is the depth-first index of the Node among interpolated Nodes in the Render View.

setEventDispatcher(viewRef: RenderViewRef, dispatcher: RenderEventDispatcher)

Sets a dispatcher to relay all events triggered in the given Render View.

Each Render View can have only one Event Dispatcher, if this method is called multiple times, the last provided dispatcher will be used.