Modal Dialog box within another component

[Albert K]

I have tried the example here and it works.  What I want to achieve is to enable programmatic modal box popup on a button click within another component.  The example from syncfusion website launches the dialog box upon loading.  How do it do that?   Thank you.

http://ej2.syncfusion.com/15.4.17/angular/documentation/dialog/getting-started.html

[Gobalakrishnan S]

Hi Albert, 

Thanks for using Syncfusion products. 

We have prepared the simple sample as per your requirement (“to enable programmatic modal box popup on a button click within another component”). Please find the sample on the below plunker. 

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

If still you face any difficulties or if we have misunderstood your requirement, kindly get back to us with more additional information to identify your exact requirement. or please revert back the provided sample based on your application along with the replication procedure. This would be more helpful for us to provide a better solution at the earliest. 

Regards, 

Gobalakrishnan S 

[Albert K]

In your example the target  referes to the Html element id of  "dialog-container" which is the id of the "",  Is this the default way of doing this or can we anchor it to the "selector" of @Component of the current page.  

Also your example does not work on Microsoft Edge 41.16299.15, meaning that you cannot dismiss the dialog box by clicking on the overlay.

Edge Debug error

ERROR TypeError: Unable to get property 'remove' of undefined or null reference

  (overlayClick)="removeDialogComponent($event)" [target]='targetElement'  width='250px'>

[Narayanasamy Panneer Selvam]

Hi Albert, 

Query1: In your example the target refers to the Html element id of "dialog-container" which is the id of the "",  Is this the default way of doing this or can we anchor it to the "selector" of @Component of the current page. 

 

In the previous sample, we have set the "dialog-container" id to the selector element ( <app-container>) of the given page and assigned as target to the Dialog component. 

Yes, you can also use selector element as target to the Dialog component which is given in @Component of the current page. 

 

Query2:  example does not work on Microsoft Edge 41.16299.15. 

Sorry for the inconvenience caused. 

Due to some restriction with traversing in edge browser, the issue has occurred. Please find the modified runnable sample in the below link  

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

Please let us know if you have further queries. 

 

Regards, 

Narayanasamy P. 

[Kenana Reda]

Hi!

I need to open modal from another component, I had a look on the example here, but it doesn't seems achieve what I need, Could you explain with more details in simple way?

[Prince Oliver]

Hi Kenana,  

 

Thank you for contacting Syncfusion support 

 

You can render the dialog within another component by using angular selectors. Also, you can pass the data by using angular service. It helps to pass the values between angular components. Please refer the below code block  

  

[app.service.ts]  

  

import { Component, Injectable } from '@angular/core';  

  

@Injectable()  

  

// create the sepearate sevice for dialog  

export class ShareRouting {  

public dialogContent: string;  

  

constructor() {  

// setting the default value  

this.dialogContent = '';  

}  

  

setData(data) {  

this.dialogContent = data;  

}  

getData() {  

return this.dialogContent;  

}  

}  

  

  

  

Based on your requirement we have prepared the sample. Please find the sample at the following location:  

https://stackblitz.com/edit/angular-wfuiuv  

   

Regards,  

Prince