Load dynamically component inside modal

Question

I need to load dynamically a custom component inside a modal and make it as flexible as possible.

For example :

-HTML CODE-

<button id="floating_button" class="floating_button animation_floating_in" (click)="createNewPost('new_post_form_modal')"><i class="material-icons">gesture</i></button>
      <div class="modal-content" id="loadHere" >
          <!-- LOAD MY CUSTOM COMPONENT HERE  -->
      </div>

-TYPE SCRIPT CODE-

public createNewPost(nomeComponent:any)
{
    // Load dynamically here nomeComponent inside div with id="loadHere"
}

Can someone help me please?

Answer 1

you may create components dynamically like below,

   @Component({
     selector: "parent",
     template: `<button id="floating_button" class="floating_button animation_floating_in" (click)="createNewPost('new_post_form_modal')"><i class="material-icons">gesture</i></button>
  <div class="modal-content" #loadHere >
      <!-- LOAD MY CUSTOM COMPONENT HERE  -->
  </div>`
   })
   export class ParentComponent {
      @ViewChild("loadHere", { read: ViewContainerRef }) childContainer: ViewContainerRef;

    constructor(private viewContainer: ViewContainerRef, private _cr: ComponentResolver) {}

    createNewPost = (componentName): void => {
       componentToLoad = 'resolve component here using componentName'; 
       this._cr.resolveComponent(componentToLoad ).then(cmpFactory => {               
          this.childContainer.createComponent(cmpFactory);
       });
     }
   }

If you want to pass some parameters you may see this