Dialogue is not opening on second time

[RakhiS]

Hi,

This is my dialogue

<div *ngIf="ShowPopupFlag">

  <ejs-dialog #Dialog header='Add new column' [position]="position"

              showCloseIcon='true' [target]='target' [width]='550' (open)="dialogOpen()" (close)="dialogClose()">

</ejs-dialogue>

</div>

When ever I want to show this dialogue I set the "ShowPopupFlag" to true and it is false by default. Now what happens when the page refreshes and this

dialogue opens for the first time only from the second time it is not opening. 

what is the problem? 

and also is their any way we can call a function on the close icon

of the dialogue which is shown using "showCloseIcon" to true.

Thanks in advance

[Indrajith Srinivasan]

Hi Rakhi, 

 

Greetings from Syncfusion support,

We have validated your reported queries and below are the responses for it.

Query 1: “Dialogue opens for the first time only from the second time it is not opening. “

The dialog is opened only for the first time because it is created only after the ShowPopup variable is set to true also when closing the dialog visible property will be set to false. Unless the dialog property is affected the dialog will not be shown. The dialog visible property has two-way binding support. While updating the ShowPopup variable, update the visible property also to achieve your requirement. We have also prepared a sample.

Sample: https://stackblitz.com/edit/angular-nvf4zk-bgftda?file=app.component.ts

Query 2: “Also is their any way we can call a function on the close icon of the dialogue“

Yes, we have events beforeClose and close in Dialog which is triggered when the close icon is clicked. Below is the API link for reference.

API link: https://ej2.syncfusion.com/angular/documentation/api/dialog#beforeclose
https://ej2.syncfusion.com/angular/documentation/api/dialog#close

Can you please try out the above solution and let us know if it meets your requirements?

Regards, 

Indrajith 

[RakhiS]

Thanks Indrajeet, It is working for the dialogue which is in the same component but here is my 

another case, in which the dialogue is in different component  and it is called in another component  by the selector of the component which contains it. in that case it is not working.

basic component :

<div *ngIf="showstepcol">

          <app-step-columns></app-step-columns>

 </div>

showstepcol this boolean variable is set to true and false inside this component only

calling component which contains the dialogue

<ejs-dialog class="demo" #confirmationDialog [animationSettings]='animationSettings'

            showCloseIcon="true" isModal="true" allowDragging='true'>

  <ng-template #header>

    some header content

  </ng-template>

  <ng-template #content>

  </ng-template>

</ejs-dialog>

Please help

[Indrajith Srinivasan]

Hi Rakhi, 

 

Thanks for the update, 

 

We have validated your reported query. We have prepared a sample based on your requirement and covered the following functionalities. 

 

• Dialog rendered in a separate page ("alert-dialog").
• The dialog called on another page based on the selector to show and hide using *ngIf.

 

Sample: https://stackblitz.com/edit/angular-8c4tpz-pmsnzu?file=app.component.ts 

 

As we said earlier, until you affect the dialog properties it will not be opened for the second time. Hence, suggested updating the visible property of the dialog which support two-way binding.

API Link: https://ej2.syncfusion.com/angular/documentation/api/dialog/#visible 

 

Can you please check the sample and let us know if it meets your requirements? 

 

Regards, 

Indrajith