Dialog content visibility

[Daniel Vasiliu]

Hello,

I'm having a problem with a DialogComponent (the template is below). When the component is first rendered, the contents of the dialog are temporarily visible on the page, not inside the dialog, but directly within the page (see the picture below). The initial value of adding ​and editing ​variables is set to false​. After a short interval, the dialog content disappears and then it works as expected.

I'm using Angular 19.2 and EJ2 Grids 29.2.4.

Am I doing something wrong?

This is the template

<div id="container-dialog">
  <ejs-dialog
    [visible]="adding || editing"
    [header]="dialogTitle"
    [showCloseIcon]="false"
    [width]="'400px'"
    [isModal]="true"
    height="auto"
    [isModal]="true"
    (close)="resetStatus()"
    target="#container-dialog"
    [animationSettings]="{ effect: 'SlideTop', duration: 200, delay: 0 }"
  >
    <div class="container-form">
      <form [formGroup]="form" class="form">
        <ejs-textbox
          placeholder="Număr"
          formControlName="numar"
          floatLabelType="Auto"
          [cssClass]="'e-bigger ' + (numar?.hasError('required') && numar?.touched ? 'e-error' : '')"
        ></ejs-textbox>


        <ejs-textbox
          placeholder="Descriere"
          formControlName="nume"
          floatLabelType="Auto"
          [cssClass]="'e-bigger ' + (nume?.hasError('required') && nume?.touched ? 'e-error' : '')"
        ></ejs-textbox>


        <ejs-numerictextbox
          placeholder="Consum"
          formControlName="consum"
          step="0.01"
          [showSpinButton]="false"
          floatLabelType="Auto"
          [cssClass]="'e-bigger ' + (consum?.hasError('required') && consum?.touched ? 'e-error' : '')"
        ></ejs-numerictextbox>


        <ejs-checkbox label="Inactiv" formControlName="inactive"></ejs-checkbox>
      </form>
    </div>


    <div class="container-butoane">
      <button ejs-button cssClass="e-primary" [disabled]="form.invalid || saving" (click)="onSalvare()">Salvare</button>
      <button ejs-button cssClass="e-flat" (click)="resetStatus()">Renunț</button>
    </div>
  </ejs-dialog>
</div>

And this is what appears inside the page on load.

[YuvanShankar Arunagiri]

Hi Daniel,

We have reviewed the provided code snippet along with the reported issue. For further clarification, it appears you are trying to render the popup component within the context of a Dialog. In such cases, the rendering of the popup may be delayed because the Dialog's content element is still initializing. As a result, the popup might briefly appear and then disappear on the initial page load.

To resolve this issue, we recommend rendering the popup component inside the Content Template of the Dialog component. Refer to the below code snippet and sample link.

UG link: https://ej2.syncfusion.com/angular/documentation/dialog/template#content

<ejs-dialog

    #dialogObj

    [visible]="visible"

    [header]="dialogTitle"

    [showCloseIcon]="false"

    [width]="'400px'"

    height="auto"

    [isModal]="true"

    (close)="resetStatus()"

    target="#container-dialog"

    [animationSettings]="{ effect: 'SlideTop', duration: 200, delay: 0 }"

  >

  <ng-template #content>

    <div class="container-form">

      <form [formGroup]="form" class="form">

        <ejs-textbox

          placeholder="Număr"

          formControlName="numar"

          floatLabelType="Auto"

        ></ejs-textbox>

 

        <ejs-textbox

          placeholder="Descriere"

          formControlName="nume"

          floatLabelType="Auto"

        ></ejs-textbox>

 

        <ejs-numerictextbox

          placeholder="Consum"

          formControlName="consum"

          step="0.01"

          [showSpinButton]="false"

          floatLabelType="Auto"

        ></ejs-numerictextbox>

 

        <ejs-checkbox

          label="Inactiv"

          formControlName="inactive"

        ></ejs-checkbox>

      </form>

    </div>

 

    <div class="container-butoane">

      <button ejs-button cssClass="e-primary" (click)="saveForm()">Salvare</button>

      <button ejs-button cssClass="e-flat" (click)="closeDialog()">Renunț</button>

    </div>

    </ng-template>

  </ejs-dialog>

 

Sample link: https://stackblitz.com/edit/stackblitz-starters-fbtaktxy?file=src%2Fmain.ts

Kindly get back to us if you need any further assistance on this.

Regards,

YuvanShankar A

[Daniel Vasiliu]

Hi,

It solved the problem, now the dialog is invisible until the [visible] condition becomes true​.

Thank you!

[Sara Donaghy]

The issue with your DialogComponent is common when the dialog content initializes before the dialog itself, causing brief visibility outside the dialog. To fix this in Angular 19.2 with EJ2 Grids 29.2.4, ensure the popup is rendered inside the dialog's content template as shown. This approach prevents unwanted flickering on load, improving user experience much like the smooth gameplay in Sprunki game. Proper component structuring is key for seamless UI behavior.

[YuvanShankar Arunagiri]

You are welcome, Daniel. Please get back to us if you need any further assistance on this.

If that post is helpful, please consider accepting it as the solution so that other members can locate it more quickly.