DynamicComponentLoader

loadAsRoot(type: Type, overrideSelector: string, injector: Injector, onDispose?: () => void) : Promise<ComponentRef>

Creates an instance of a Component type and attaches it to the first element in the platform-specific global view that matches the component's selector.

In a browser the platform-specific global view is the main DOM Document.

If needed, the component's selector can be overridden via overrideSelector.

You can optionally provide injector and this Injector will be used to instantiate the Component.

To be notified when this Component instance is destroyed, you can also optionally provide onDispose callback.

Returns a promise for the ComponentRef representing the newly created Component.

#

@Component({ selector: 'child-component', template: 'Child' }) class ChildComponent { } @Component({ selector: 'my-app', template: 'Parent (<child id="child"></child>)' }) class MyApp { constructor(dcl: DynamicComponentLoader, injector: Injector) { dcl.loadAsRoot(ChildComponent, '#child', injector); } } bootstrap(MyApp);

Resulting DOM:

<my-app> Parent ( <child id="child">Child</child> ) </my-app>

loadIntoLocation(type: Type, hostLocation: ElementRef, anchorName: string, providers?: ResolvedProvider[]) : Promise<ComponentRef>

Creates an instance of a Component and attaches it to a View Container located inside of the Component View of another Component instance.

The targeted Component Instance is specified via its hostLocation ElementRef. The location within the Component View of this Component Instance is specified via anchorName Template Variable Name.

You can optionally provide providers to configure the Injector provisioned for this Component Instance.

Returns a promise for the ComponentRef representing the newly created Component.

#

@Component({ selector: 'child-component', template: 'Child' }) class ChildComponent { } @Component({ selector: 'my-app', template: 'Parent (<div #child></div>)' }) class MyApp { constructor(dcl: DynamicComponentLoader, elementRef: ElementRef) { dcl.loadIntoLocation(ChildComponent, elementRef, 'child'); } } bootstrap(MyApp);

Resulting DOM:

<my-app> Parent ( <div #child="" class="ng-binding"></div> <child-component class="ng-binding">Child</child-component> ) </my-app>

loadNextToLocation(type: Type, location: ElementRef, providers?: ResolvedProvider[]) : Promise<ComponentRef>

Creates an instance of a Component and attaches it to the View Container found at the location specified as ElementRef.

You can optionally provide providers to configure the Injector provisioned for this Component Instance.

Returns a promise for the ComponentRef representing the newly created Component.

#

@Component({ selector: 'child-component', template: 'Child' }) class ChildComponent { } @Component({ selector: 'my-app', template: 'Parent' }) class MyApp { constructor(dcl: DynamicComponentLoader, elementRef: ElementRef) { dcl.loadNextToLocation(ChildComponent, elementRef); } } bootstrap(MyApp);

Resulting DOM:

<my-app>Parent</my-app>
<child-component>Child</child-component>