I have a service which dynamically creates components, (dialogs in my example) -
createDialog(component: Type, providers: any = []) {
this._resolver.resolveComponent(component).then(factory => {
let resolved = ReflectiveInjector.resolve(providers);
let injector = ReflectiveInjector.fromResolvedProviders(resolved, this._container.injector);
this._container.createComponent(factory, null, injector, []);
});
}
But the problem is that right now I need to create a template for each component with md-dialog
element in it and pass needed dom elements inside ng-content
, like this -
<md-dialog [displayActions]="false" class="warning">
<div content>
<h4> Warning
<a href="close" (click)="close($event)"><i class="material-icons">close</i></a>
</h4>
<div>
Some content
</div>
<button class="mdl-button mdl-js-button save" (click)="continue()">
Continue
</button>
</div>
</md-dialog>
But what I want to, is to pass an object with template to createDialog function, and create component with this template, for example like this -
class DialogTemplate {
header: string;
content: string;
actions: string;
}
createDialog(component: Type, providers: any = [], template: DialogTemplate) {
/*Some imaginary code*/
component.template = `
<md-dialog [displayActions]="false" class="warning">
<div content>
</div>
</md-dialog>`;
/*Imaginary code end*/
this._resolver.resolveComponent(component).then(factory => {
let resolved = ReflectiveInjector.resolve(providers);
let injector = ReflectiveInjector.fromResolvedProviders(resolved, this._container.injector);
this._container.createComponent(factory, null, injector, []);
});
}
Is it possible to do it this way, or something similar? If it is, could someone please link me to an API which allows to do it or give an example?