Is there a function like dialog service that can show specified dialog component in typescript?

Question

I'd like to write a dialog into a component, so I want show this dialog component in typescript, how should I do?

I don't want to put dialog html and button in one html file, I just want to use like dialog service of angular material .

Karthikeyan Viswanathan · Answer

Hi lorryl, 

Thanks for contacting Syncfusion support. 

Currently, we are working to support an utility function to create a dialog dynamically with the selected API’s. This feature will be available in our volume 3, 2018 release. 
Regards,Karthikeyan V.

lorryl · Answer

Ok, I will wait for using the utility function. Thank you!

Karthikeyan Viswanathan · Answer

Hi lorryl,  
 
Thanks for the update. 
 
we will let you know once the feature is included.  
Regards,Karthikeyan V.

lorryl · Answer

Does the show dialog utility function exists in version 16.3.27?

Prince Oliver · Answer

Hi lorryl, 

Thank you for contacting Syncfusion support. 

Yes, the dialog utility function is available for angular dialog components in the version 16.3.27. Since the version 16.3.17, we have included the dialog utility function support. For more information about dialog utility functions, please refer the below UG documentation link 
https://ej2.syncfusion.com/angular/documentation/dialog/how-to.html#render-a-dialog-using-utility-functions 

Regards, 
Prince

lorryl · Answer

Is there a public method to show another component dialog now ?My dialog and the open dialog button will not be in the same html...

Prince Oliver · Answer

Hi Lorryl, 

Thank you for your update. 

We can use the Show method in the Dialog component to display the Dialog. You can access the method through the control’s instance. Kindly refer to the following code snippet. 





//Accessing the Dialog componenent's instance 
@ViewChild('ejDialog') ejDialog: DialogComponent; 
 
public someEvent = function(event: any): void { 
    // Call the show method to open the Dialog 
    this.ejDialog.show(true); 
} 

To know more on the Dialog utility functions, Kindly refer to the following UG documentation: https://ej2.syncfusion.com/angular/documentation/dialog/how-to#render-a-dialog-using-utility-functions 

Please let us know if you need any further assistance on this. 

Regards, 
Prince

lorryl · Answer

Thanks for your apply.My component is not a realy dialog, but use dialog html, as follow picture:I want to show the tec-add-user.component in my user-list.component, how to show it ?and after click ok button and closed the tec-add-user component dialog, how to add one record in the user list component ??

Prince Oliver · Answer

Hi Lorryl, 

Thank you for your update. 

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 
 
In the above sample, click on open Dialog button to render the dialog and enter the value in textbox. By clicking on update data button, the entered value will be updated in the service. You can get it by using this.childItem.getData() in your application. 
 
Regards, 
Prince