Issue with Syncfusion Diagram Component Not Fully Loading in Angular Dialog

[Stefan Ugarkovic]

Hello everyone,

I'm encountering an issue with the Syncfusion Diagram component when it's loaded within an Angular Dialog. The grid layer on which the diagram is supposed to be drawn doesn't fully expand to cover the entire dialog. The diagram only displays correctly after I manually resize the browser window.

Here's a link to the code where you can see the implementation, and I've also created a video that demonstrates the issue visually.

I'd appreciate any advice or suggestions on how to resolve this problem.

Thanks in advance for your help!

Attachment: bandicam_20240818_134316388_3e537ce.zip

[Vivisa Ganesan]

Hi,

We've updated the sample according to your requirements. In the created event, we've called the updateViewPort method. Please refer to the sample and code snippet below:

Code-snippet:

created() {

    this.diagram.updateViewPort();

  }

 

Sample:

Angular Starter (forked) - StackBlitz

Regards,

Vivisa

[Stefan Ugarkovic]

I still have a white blank space that only fills up after I resize the browser window.

[Vivisa Ganesan]

Hi,

We have modified the sample as per your requirement. You can call the updateViewPort method on ngOnInit method. Refer the below sample.

Code-snippet:

ngOnInit() {

    this.diagram.updateViewPort();

  }

 

Sample:

https://stackblitz.com/edit/stackblitz-starters-8t3cg8?file=src%2Fdiagram.component.ts

Regards,

Vivisa