Inject an angular HTML component in object Panels

Good afternoon,

I'm using the 'Dashboard' component for Angular, my question is how to 'inject' an angular HTML component that I created in the 'content' property of the 'panels'?

Example:

teste.component.html: where you have your html content

teste.component.scss: where is your css

This component is called test-component.


There's a way in the 'content' of the 'panels' to look like this:


public panels: any = [{'id':'Panel0', 'sizeX': 1, 'sizeY': 1, 'row': 0, 'col': 0, header:'<div>Panel 0</div >', content:'<test-component></test-component>'}]


I tried this way and I couldn't, is there any way to be like this? Thinking about angular, which is fully componentized and reusable, that would be a big help.


Thanks and looking forward to a solution.


1 Reply

LD LeoLavanya Dhanaraj Syncfusion Team August 19, 2022 05:17 PM UTC

Hi Tech,


We have validated your reported Dashboard Layout query in React platform. In this below mentioned forums, we have rendered a component inside the Dashboard Layout panel using ngTemplate support. In similar way, you can achieve your requirement using the content property.


Check the below blob links, for your reference.


http://www.syncfusion.com/forums/150694/how-to-add-diagram-control-to-dashboard-layout-panel?reply=NYb8vF

http://www.syncfusion.com/forums/145054/accumulationchart-in-dashboard-panel?reply=NL65X4

https://www.syncfusion.com/forums/147712/inserting-dynamic-component-panels-on-the-dashboard


Please try this at your end and revert us back if you need any further assistance.


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


Regards,

Leo Lavanya Dhanaraj


Loader.
Up arrow icon