Dynamic ejDialog

[Me]

Hello,

How can I add ejDialog dynamically into HTML with Angular2 component inside as content? I couldn't find any working solution for this scenario, everywhere it's already hardcoded into HTML which won't work for me..

[Rekha J]

Hi Me, 

Thanks for contacting Syncfusion support. 

 

We can add components dynamically by using dynamic component. You need to declare dynamic component in HTML page. In component class file, you can create ej-dialog dynamically and properties of dialog are mapped to its values in the constructor. 

For your reference, we have created a simple sample and the sample is available in: 

http://www.syncfusion.com/downloads/support/forum/129053/ze/angular2-seeds-systemjs-2076003768.zip 

Please refer to the below link for adding dynamic component:  

http://stackoverflow.com/questions/34855718/angular-2-append-component-dynamic-to-dom-or-template 

 

If this is not your requirement, could you please provide the below details. 

1.       Do you want to dynamically create a Dialog element in DOM? 

2.       Or do you want to change the content of the dialog dynamically? 

The details which will helpful to provide appropriate solution at the earliest. 

 

Regards, 

Rekha. 

[john taylor]

I am interested in dynamically creating a Dialog element. Is there any example to do this?

[Silambarasan I]

Hi John, 

 

We have checked your requirement ‘dynamically creating a Dialog element’ and it can be achievable by using ‘template’ property. Please refer the following code example. 

 

Please find the below plunker sample. 

http://next.plnkr.co/edit/XiyrmwiHZcpxVeIe  

 

App.component.ts 

 

@Component({ 

    template: `<div #element id="basicDialog">Dialog Content 

       </div>`, 

}) 

 

export class AppComponent implements OnInit { 

    @ViewChild('element') elementRef;    

     ngOnInit(){   

        jQuery(this.elementRef.nativeElement).ejDialog({  // Render dialog 

            title: "Header", 

            actionButtons: ["close", "maximize", "minimize"] 

        }) 

    } 

} 

 

 

Could you please check the above sample and get back to us with more information if we misunderstood your requirement or need further assistance? 

 

Regards, 

Silambarasan