Creating Dialog at Runtime and Injecting a Component

[Matt Shanahan]

Hello,

I've been looking through other posts trying to find a way to do this using the DialogComponent. Is there a way to instantiate the Dialog within the TypeScript code and pass in a component type to display in the content area of the dialog? Similar to how Angular Material works. If this isn't presently supported, is it something that might be included in a future roadmap release?

Thank you.

[Narayanasamy Panneer Selvam]

Hi Matt Shanahan, 

 

Thanks for Contacting Syncfusion Support. 

 

Yes, we can render dialog at runtime. In this example we have created dialog dynamically on button click. You can also any other component in dialog’s content area by using “content” property, which is allow you to use either string or html element. 

we have prepared a sample based on the example which is given in the following link (Angular Dialog). 

Sample link: http://plnkr.co/edit/uNlcGkTqYO92aLKTdXbe?p=preview  

API link: http://ej2.syncfusion.com/15.4.23/documentation/dialog/api-dialog.html?lang=typescript#content  

 

If we have misunderstood your requirement, please let us know with some more information. So that we can help you out in best. 

 

Regards, 

Narayanasamy P.

[Matt Shanahan]

Thank you for the reply and the example. I've put together an example of my own that may show more clarification. Ideally, I'm looking for something more robust that can be handed a component type and have that rendered in the content area of the dialog.

http://plnkr.co/edit/KRPrUjRTyhxtzU1p9xjP?p=preview

On line 30 of src/app.ts, notice I'm calling my createDialog function using ChildComponent as the first parameter. Ideally, I'd like to render ChildComponent (or any other component type) in the content area of the Dialog.

Important to note, in my actual project, I'm referencing the @syncfusion/ej2-ng-popups package rather than the @syncfusion/ej2-popups package.

It would also be ideal if when creating the Dialog from TypeScript, if the dialog could just be shown and instantiated without having to do DOM manipulation, e.g., without all this:

    var ele=document.createElement('div');
    ele.setAttribute('id','modalDialog');
   if(document.getElementById('modalDialog') == null) {
      var newtarget=document.getElementById('target');
      newtarget.appendChild(ele)
      dialogObj.appendTo('#modalDialog');
    }
    else {
     dialogObj.appendTo('#modalDialog');
    }

Something cleaner, like with the Angular Material dialog:

  constructor(public dialog: MatDialog) {}

  openDialog(): void {
    let dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
      width: '250px',
      data: { name: this.name, animal: this.animal }
    });

    dialogRef.afterClosed().subscribe(result => {
      console.log('The dialog was closed');
      this.animal = result;
    });
  }

Thank you.

[Narayanasamy Panneer Selvam]

Hi Matt Shanahan,   

We have validated your query. 

Query 1: I'm looking for something more robust that can be handed a component type and have that rendered in the content area of the dialog. 

 

Yes, we can render another component dynamically inside Dialog’ content area by using “content” API. You will inject the component dynamically by using Angular’s ComponentFactoryResolver. Set Dialog’s “content” property as HTML element or string which is obtained from the ComponentFactoryResolver instance. 

 

Query 2:  In my actual project, I'm referencing the @syncfusion/ej2-ng-popups package rather than the @syncfusion/ej2-popups package. 

We can also refer “@syncfusion/ej2-ng-popups” for your requirement. 

 

We have modified your sample with these requirements, please find the sample link: http://plnkr.co/edit/RbKgynaCP0NxCsPvWQZ6?p=preview  

Regards,   

Narayanasamy P. 

[Matt Shanahan]

This is great, thank you so much!! Your support and responsiveness is very much appreciated.

[Narayanasamy Panneer Selvam]

Hi Matt Shanahan,   

Thanks for your appreciation. 

Please let us know if you need any further assistance. 

Regards,   

Narayanasamy P.