We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Dynamic ejDialog


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..

3 Replies

RJ Rekha J Syncfusion Team February 24, 2017 12:28 PM UTC

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: 
Please refer to the below link for adding dynamic component:  
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. 

JT john taylor October 29, 2018 02:55 PM UTC

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

SI Silambarasan I Syncfusion Team October 30, 2018 11:15 AM UTC

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. 
    template: `<div #element id="basicDialog">Dialog Content 
export class AppComponent implements OnInit { 
    @ViewChild('element') elementRef;    
        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? 

Live Chat Icon For mobile
Up arrow icon