We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Inserting dynamic component panels on the dashboard


Is there a way to insert dynamic components into the panel content?

I see on the documentation/code that I can set a string or a HTMLElement as my panel content, but there's no way to add my own components. I wanted to use my components as cards (or panel content) so I can make a more reusable dashboard, does anyone knows if this is possible?

Thanks in advance.

5 Replies

AB Ashokkumar Balasubramanian Syncfusion Team September 23, 2019 09:07 AM UTC

Hi Joel Santos, 
Good day to you. 
Yes, possible. You can use ngTemplate concept to render the own component in dashboard panels. Could you please check the below sample? 
Please let us know if you have any concerns on this sample.  
Ashokkumar B. 

JS Joel Santos October 4, 2019 06:03 PM UTC

Hi Ashokkumar,

I tried and it worked but I need a way to dynamically add more tabs and with this strategy seems that it's not possible.

I'm creating tabs on startup iterating over a list and this is working fine:

<e-tabitem *ngFor="let item of items; let i = index;">
<ng-template #content>
   <div >

But when I try to add elements on this list, the tab component is not refreshed. If I try to programatically add a new tab I can't recreate the same structure which is basically some divs and ejs-* components.

Is it possible to do something like this?

Best regards.

KK Karthigeyan Krishnamurthi Syncfusion Team October 7, 2019 10:34 AM UTC

Hi Joel, 
Thanks for the update. 
Yes, we have prepared the below sample to load Tab content using ngFor. 
<ejs-tab id="tab_default" (created)="onCreated($event)"> 
        <e-tabitem *ngFor="let tab of tabElements"> 
          <ng-template #headerText> 
            <div>{{tab.header}} </div> 
          <ng-template #content> 

VN Vasudeva Naik April 23, 2020 08:56 AM UTC


Is there any way to add component dynamically(using addPanel method) within e-panel?
We have a set of components which will be added as the content of the panel, I want to add these panels to the e-panels dynamically to the dashboard is it possible?

Thanks in advance

BS Balasubramanian Sattanathan Syncfusion Team April 24, 2020 08:36 AM UTC

Hi Vasudeva Naik, 

Thanks for the update. 
We have validated your requirement “Is there any way to add component dynamically(using addPanel method) within e-panel?” at our side and prepared a sample based on that using below code snippet. We suggest you to follow the below sample and refer the shared UG. 
<hello style="display: none" id='custom'> </hello> 

addDynamicTabComponent() { 
  const count: number = this.tabObj.items.length; 
  const item1: Object = { header: { text: 'Tab ' + count }, content: '#custom' }; 
  this.tabObj.addTab([item1], this.tabObj.items.length); 
Kindly try the above links and let us know if you need further assistance. 
Balasubramanian S

Live Chat Icon For mobile
Up arrow icon