I'm trying to use DynamicComponentLoader and the sample code is below:
import {Component, View, bootstrap, OnInit, DynamicComponentLoader} from 'angular2';
...
DynamicComponentLoader.loadIntoLocation(PersonsComponent, itemElement);
When I run the app, I get the error:
DynamicComponentLoader.loadIntoLocation is not a function
How can I use DynamicComponentLoader.loadIntoLocation in ES6 JavaScript using class?
DynamicComponentLoader is class. It doesn't have any static method loadIntoLocation. But instances of this class have it. You must instantiate DynamicComponentLoader using dependency injection:
import { Component, View, DynamicComponentLoader, ElementRef } from 'angular2/angular2'
@Component({
selector: 'dc'
})
@View({
template: '<b>Some template</b>'
})
class DynamicComponent {}
@Component({
selector: 'my-app'
})
@View({
template: '<div #container></div>'
})
export class App {
constructor(
dynamicComponentLoader: DynamicComponentLoader,
elementRef: ElementRef
) {
dynamicComponentLoader.loadIntoLocation(DynamicComponent, elementRef, 'container');
}
}
See this plunker
UPD
What about ES6, I've answered it here
DynamicComponentLoader is long gone.
https://angular.io/guide/dynamic-component-loader explains how it's done in newer Angular version.
loadComponent() { this.currentAddIndex = (this.currentAddIndex + 1) % this.ads.length; let adItem = this.ads[this.currentAddIndex]; let componentFactory = this.componentFactoryResolver.resolveComponentFactory(adItem.component); let viewContainerRef = this.adHost.viewContainerRef; viewContainerRef.clear(); let componentRef = viewContainerRef.createComponent(componentFactory); (<AdComponent>componentRef.instance).data = adItem.data; }
