BoldSignEasily embed eSignatures in your .NET applications. Free sandbox with native SDK available.
<!-- 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> |
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]);
}
} |
Query:
How can I use the above described method in a more generic way? I'd like to be able to use several angular components as content and be able to save and restore with the settings for each component.
Our components include (not all are listed):
Here is the static load with only counters.
Hi David,
We understand that you want to achieve multiple components from different pages into the Dashboard Layout component. You can render those components in generic way by following the dynamic component rendering way. Similar requirements have been achieved in the below link.
Please check the sample and get back to us if you need any further assistance.
Regards,
Indhumathy L