Hi Samba,
Thanks for contacting Syncfusion support.
We have checked your reported query that render Diagram component dynamically in the Dashboard panel in angular platform. To achieve your requirement, we have added the diagram component to be rendered in the dynamic panel within the ng-template with a template reference along with a ng- container as shown below.
|
<!-- placing the custom component within ng-template -->
<ng-template #CustomTemplate>
<div style="height:100%; width: 100%;" class="templateContent">
<!-- placing the diagram component inside the chart root -->
<chart-root></chart-root>
</div>
</ng-template>
<!-- adding a ng container to append the template in the container -->
<ng-container #viewContainer></ng-container> |
In the script side on clicking the button, this template will be initialized to get render in the DOM and the rendered template appended will be added as the content of the panel as shown in the below code.
|
BtnClick() {
// adding panel dynamically
let panel: PanelModel[] = [{
id: "layout_" + this.count.toString(),
'sizeX': 4, 'sizeY': 2, 'row': 2, 'col': 0,
}];
this.Dashboard.addPanel(panel[0]);
//rendes the (CustomTemplate) template in dom
const templateValue = this.CustomTemplate.createEmbeddedView(null);
// inserts the template into the view container
this.viewContainer.insert(templateValue);
// Obtaining the content element of the panel
let panel_Content = document.getElementById("layout_" + this.count.toString() + "_content");
// appending the template to the panel content element.
panel_Content.appendChild(templateValue.rootNodes[0]);
}
} |
Refer the sample link below. In that sample, we have added simple diagram control for your reference.
Please let us know, if you need any further assistance on this.
Regards,
Shameer Ali Baig S.
