Inserting dynamic component panels on the dashboard

[Joel Santos]

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.

[Ashokkumar Balasubramanian]

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. 

[Joel Santos]

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]

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 

 

[Vasudeva Naik]

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

[Balasubramanian Sattanathan]

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: 

<hello style="display: none" id='custom'> </hello> 

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