Inserting dynamic component panels on the dashboard

Joel Santos

Asked On September 20, 2019 07:10 PM UTC

Hi,

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.

Reply | Reply with quote

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?

https://stackblitz.com/edit/angular-1zsxrm-scmuez?file=app.component.html

Please let us know if you have any concerns on this sample.

Regards,

Ashokkumar B.

Reply | Reply with quote

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.

Reply | Reply with quote

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.

https://stackblitz.com/edit/angular-4le1hh-wca2wj?file=app.component.html

<ejs-tab id="tab_default" (created)="onCreated($event)">

<e-tabitems>

<e-tabitem *ngFor="let tab of tabElements">

<ng-template #headerText>

<div>{{tab.header}} </div>

</ng-template>

<ng-template #content>

<div>{{tab.content}}</div>

</ng-template>

</e-tabitem>

</e-tabitems>

</ejs-tab>

Regards,

Karthi

Reply | Reply with quote

Vasudeva Naik

Replied On April 23, 2020 08:56 AM UTC

Hi,

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

Reply | Reply with quote

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.

app.component.html:

app.component.ts:

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);

this.tabObj.dataBind();

this.tabObj.select(count);

}

Sample: https://stackblitz.com/edit/angular-dynamic-tab-creation-with-component-content-xwvaav?file=app.component.html

UG: https://ej2.syncfusion.com/angular/documentation/tab/how-to/load-tab-items-dynamically/

Kindly try the above links and let us know if you need further assistance.

Regards,

Balasubramanian S

Reply | Reply with quote

Thread ID:	Created:	Updated:	Platform:	Replies:
147712	Sep 20,2019 07:10 PM UTC	Apr 24,2020 08:36 AM UTC	Angular - EJ 2	5

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US