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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Dynamic ejDialog

Thread ID:





129053 Feb 23,2017 01:54 PM UTC Oct 30,2018 11:15 AM UTC Angular 3
Tags: ejDialog
Asked On February 23, 2017 01:54 PM UTC


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 [Syncfusion]
Replied On 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. 

john taylor
Replied On October 29, 2018 02:55 PM UTC

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

Silambarasan I [Syncfusion]
Replied On 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? 


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

or the page will be automatically redirected to sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon