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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Inserting dynamic component panels on the dashboard

Thread ID:





147712 Sep 20,2019 07:10 PM UTC Apr 24,2020 08:36 AM UTC Angular - EJ 2 5
Tags: Tab
Joel Santos
Asked On September 20, 2019 07:10 PM UTC


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.

Ashokkumar Balasubramanian [Syncfusion]
Replied On 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. 

Joel Santos
Replied On 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.

Karthigeyan Krishnamurthi [Syncfusion]
Replied On 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> 

Vasudeva Naik
Replied On 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

Balasubramanian Sattanathan [Syncfusion]
Replied On 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


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon