0

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?

renchan
  • 519
  • 5
  • 24

0 Answers0