When is Angular 2 Renderer provided?

Question

This is a small thing, but it's been bugging me. I can inject an instance of Renderer into a component and use it fine. What I don't understand is how this is working. As far as i could find in the source code, only DomRootRenderer_ is provided inside of Browser_App_Providers as RootRenderer. However, the actual implementation of Renderer is the DomRenderer class, which I could not find the provider for. So then how is the DI resolving Renderer? Is it calling the RenderComponent method on the DomRootRenderer_ somewhere? Can someone point me to the right location in the source?

score 0 · Answer 1 · answered Jun 29 '16 at 08:09

This is from docs, RootRenderer:

   /** 
    * 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 {@link #setElementProperty} or {@link #setElementAttribute}
     * respectively.
     *
     * If you are implementing a custom renderer, you must implement this interface.
     *
     * The default Renderer implementation is `DomRenderer`. Also available is `WebWorkerRenderer`.
     * @experimental
     */
    export abstract class RootRenderer {
      abstract renderComponent(componentType: RenderComponentType): Renderer;
    }

score 0 · Accepted Answer · edited May 23 '17 at 12:25

0

When a component is created, a new child injector of the parent components injector is created for the new component. When this child injector is created additional providers can be added. Angular2 does that with the providers and viewProviders you add to your @Component() decorator and it also adds a series of other providers like ElementRef, ViewContainerRef, Injector, the parent component, ...

How to create a child injector is for example shown in https://stackoverflow.com/a/37734641/217408

See also https://angular.io/docs/ts/latest/api/core/index/DirectiveMetadata-class.html for how providers are resolved when a component instance is created.

edited May 23 '17 at 12:25

Community

1
1

answered Jun 29 '16 at 08:32

Günter Zöchbauer

623,577
216
2,003
1,567

I think i didn't phrase my question correctly, or maybe I'm just not understanding your answer. Basically I'm confused as to how the DI is resolving Renderer to the concrete class DomRenderer (https://github.com/angular/angular/blob/master/modules/%40angular/platform-browser/src/dom/dom_renderer.ts#L58). The BrowserAppProvider (https://github.com/angular/angular/blob/master/modules/%40angular/platform-browser/src/browser.ts#L64) is only providing DomRootRenderer and RootRenderer, both of which uses the same class DomRootRenderer_, I think? So when is DomRenderer provided as Renderer? – Edward Song Jun 29 '16 at 19:36
I haven't found where it's added to providers, but I assume it is what is returned from `DomRootRenderer.renderComponent()` (https://github.com/angular/angular/blob/3644eef860cdc31a22368acd48b0e657fd89f501/modules/%40angular/platform-browser/src/dom/dom_renderer.ts#L42) – Günter Zöchbauer Jun 30 '16 at 05:14
Yeah that's what I'm assuming as well. It was just bugging me because both RootRenderer and DomRootRenderer were not provided with the useFactory so I didn't know when renderComponent was called. But like I said on the original post, not a big deal. Thanks for your help. – Edward Song Jun 30 '16 at 17:57

When is Angular 2 Renderer provided?

2 Answers2