Lazy Loading dialog content

[Niels Van Goethem]

Hi, I have a few dialogs on a page, but the page is starting to get resource heavy.

Is there a way to only render the dialog content when I call the show function?

[Niels Van Goethem]

I have tried to put an ngIf on the component between ejs-dialog tags, but then the component is rendered outside  e-dlg-content

[UdhayaKumar Duraisamy]

To optimize page performance and reduce the initial load time, you can dynamically render the dialog content only when needed. Below is an example demonstrating how to achieve this using the *ngIf directive. This ensures that the content is loaded only when the dialog’s show method is triggered.

[app.component.html]

<div class="control-section">

  <!-- Render Button to open the Dialog -->

  <button ejs-button id="dlgbtn" #ButtonInstance (click)="BtnClick()">

    Open

  </button>

  <ejs-dialog

    #Dialog

    [header]="header"

    [showCloseIcon]="showCloseIcon"

    [target]="target"

    [width]="width"

    [visible]="false"

  >

    <ng-template #content>

      <div *ngIf="isContentLoaded">

        <p>

          In the Succinctly series, Syncfusion created a robust, free library of

          more than 130 technical e-books formatted for PDF, Kindle, and EPUB.

          <br />

          <br />

          The Succinctly series was born in 2012 out of a desire to provide

          concise technical e-books for software developers Each title in the

          Succinctly series is written by a carefully chosen expert and provides

          essential content in about 100 pages.

        </p>

      </div>

    </ng-template>

  </ejs-dialog>

</div>

[app.component.ts]

export class AppComponent {

  @ViewChild('Dialog')

  public Dialog: DialogComponent;

  public header: string = 'About SYNCFUSION Succinctly Series';

  public showCloseIcon: Boolean = true;

  public width: string = '50%';

  public target: string = '.control-section';

  public isContentLoaded: boolean = false;

  public BtnClick = (): void => {

    this.Dialog.show();

    this.isContentLoaded = true;

  };

}

Explanation

• The *ngIf="isContentLoaded" directive ensures that the dialog content is not rendered until the isContentLoaded property is set to true.
• Clicking the button triggers the BtnClick method, which both displays the dialog and loads the content dynamically.
• This deferred loading mechanism improves performance by reducing the initial rendering overhead, particularly for dialogs with heavy or complex content.

You can find a working example of this implementation here: Xkimm3 (forked) - StackBlitz