How to Dynamically Add Custom Component to a tab ejs2 16.1.37

[Ace]

Hi,

I have created a custom component which is basically a data capturing form with input text box. grid and button.  How can I dynamically add such component to Tab 

I have tried the below  option, but the custom component is not displayed in the tab

Would appreciate any help. 

Thanks

let formcontent = '<div id="myForm"> <app-dataform></app-dataform> </div>';

this.tabObj.items.push({ header: { text: 'MyForm' }, content: formcontent });

this.tabObj.refresh();

[Arun Palaniyandi]

Hi Ace,  

  

Thanks for Contacting Syncfusion support.  

  

Based on your requirement of dynamically adding the other components, we suggest your add them using the Angular <router-outlet> and then load them. 

  

  

<ejs-tab id="element" #element (selected)="select($event)" (created)=created($event) > 

  <e-tabitems> 

    <e-tabitem [header]='headerText[0]' content="#idv"></e-tabitem> 

    <e-tabitem [header]='headerText[1]' content="#idv" ></e-tabitem>  

  </e-tabitems> 

</ejs-tab> 

  

<div id="idv" > 

<router-outlet></router-outlet> 

</div> 

  

  

Ts: 

  

  public created(e){ 

  

this.tabObj.items.push({ header: { text:  'MyForm'  }, content: "#idv" });  // refer the router id 

  

(<any>this.tabObj).refresh(); 

  

} 

  

  

public select(e: any) { //based on the selection index the page will load with the dynamic components in it 

    if (e.selectedIndex == 0) {// selected index  

  

      this.router.navigateByUrl('/home'); 

  

    } 

    else if (e.selectedIndex == 1) { 

  

      this.router.navigateByUrl('/about'); 

  

    } 

      else if (e.selectedIndex == 2) { 

  

      this.router.navigateByUrl('/home'); 

  

    } 

  } 

  

  

  

  

Demo sample :  https://stackblitz.com/edit/github-lushmu-yajpgf?file=src/app/app.component.ts 

  

  

Please check our shared sample and if you still have any query means, please let us know so that we would help you out better. 

  

  

Let us know if you have any further queries.   

  

Regards,  

Arun P.  

[Ace]

Thanks Arun, It works as required. Appreciate your help. 

[Arun Palaniyandi]

Hi Ace,    

   

Thanks for your update.  

  

We are glad that our shared solution has helped you out.  

  

Please let us know if you have any queries in future.  

  

Regards,  

Arun P.  

 

[Turboshurik]

I added [showCloseButton]="true"  And after closing selected tab, it stops working: https://stackblitz.com/edit/github-lushmu-3eawqq

The problem can be avoided if you close inactive tabs. But closing the last tab also causes a problem if you add new tabs again.

[Vengatesh Maniraj]

Hi Turboshurik, 

Greetings from Syncfusion Support. 

We have validated your reported problem “dynamic content is not updated when closing the active tab” and we are able to reproduce the issue and logged the defect report in the below feedback link. We will fix the issue and included the solution in our patch release which scheduled on the 2^nd week of May 2020. 

Feedback: https://www.syncfusion.com/feedback/13774/dynamic-content-is-not-updated-properly-when-we-close-the-active-tab 

Regards, 

Vengatesh  

[Vengatesh Maniraj]

Hi Turboshurik,

 

Thanks for your patience.

 

We further validated your reported issue and found that the reported issue is related to sample end. Using the code snippet below we can add the dynamic custom component in tab without using router. We suggest that you follow the sample below and refer to 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-molqa3

UG links:

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

 https://ej2.syncfusion.com/angular/documentation/tab/how-to/adding-dynamic-items-with-content-reuse/

 

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

 

Regards,

Vengatesh

[Turboshurik]

HI Vengatesh Maniraj,

The problem is not resolved!

Steps to repeat:

1.  Open your sample:  https://stackblitz.com/edit/angular-dynamic-tab-creation-with-component-content-molqa3
2.  Double click on "Add tab with component content". (Added two tabs "Tab 1" and "Tab 2" with content "Hello !" ).

                

       3. Close the selected "Tab 2".

 Tab 1 is displayed incorrectly! "Hello !" content is missing. It displays "#custom". This is the id of the component tag.

[Ravikumar Venkatesan]

Hi Turboshurik, 

Thanks for the update. 

We have validated your reported query “Hello! content is missing. It displays #custom” at our end. We have resolved your reported problem with the help of the below code. We have prepared a sample for your reference and it can be available below. 

[app.component.html] 

<ng-template #custom> 

  <hello> </hello> 

</ng-template> 

[app.component.ts] 

import { Component, ViewChild, Inject, ViewEncapsulation, TemplateRef } from '@angular/core'; 

import { TabComponent } from '@syncfusion/ej2-angular-navigations'; 

 

@Component({ 

  selector: 'app-root', 

  templateUrl: 'app.component.html', 

  styleUrls: ['app.component.css'], 

  encapsulation: ViewEncapsulation.None 

}) 

export class AppComponent { 

  @ViewChild('Tab', { static: false }) public tabObj: TabComponent; 

  @ViewChild('custom', { static: false }) public customComponent: TemplateRef<any>; 

 

  public dynamiccontent = '<h3>Dynamic Tab content.</h3>' 

  // Mapping Tab items Header property 

  public headerText: Object = [{ text: "Tab Header" }]; 

  public remoteFields: Object = { text: 'Game', value: 'Id' }; 

  public datasrc = [ 

    { Id: "Game1", Game: "American Football" }, 

    { Id: "Game2", Game: "Badminton" }, 

    { Id: "Game3", Game: "Basketball" }, 

    { Id: "Game4", Game: "Cricket" }, 

    { Id: "Game5", Game: "Football" } 

  ]; 

 

  addDynamicTabComponent() { 

    const count: number = this.tabObj.items.length; 

    const item1: Object = { header: { text: 'Tab ' + count }, content: this.customComponent }; 

    this.tabObj.addTab([item1], this.tabObj.items.length); 

    this.tabObj.dataBind(); 

    this.tabObj.select(count); 

  } 

 

} 

Sample: https://www.syncfusion.com/downloads/support/forum/137524/ze/ej2-angular-tab-adding-item-dynamically705373145 

Kindly try the above sample and get back to us if you need any further assistance. 

Regards, 

Ravikumar Venkatesan 

[Unknown]

Hi 

I've came here with same issue, can you please give an reference or sample for passing data to the binded template. 

[Vinitha Devi Murugan]

Hi Sai, 

 

Thanks for your update. 

 

We have checked your query “reference or sample for passing data to the binded template” and achieved your requirement using below code. We have prepared the below sample for your reference. 

 

Sample: https://stackblitz.com/edit/dynamic-tab-with-custom-component-as-content-with-props?file=app.component.html  

 

App.component.html 

 

 

<ng-template #custom> 

  <hello [name]="customName"> </hello> 

</ng-template> 

 

App.component.ts 

 

 @ViewChild('custom', { static: false }) 

  public customComponent: TemplateRef<any>; 

  public customName = 'test content'; 

 

addDynamicTabComponent() { 

    const count: number = this.tabObj.items.length; 

    this.customName = 'Tab Content: ' + count; // Here you can pass the data 

    const item1: Object = { 

      header: { text: 'Tab ' + count }, 

      content: this.customComponent, 

    }; 

    this.tabObj.addTab([item1], this.tabObj.items.length); 

    this.tabObj.dataBind(); 

    this.tabObj.select(count); 

  } 

 

Hello.component.ts 

 

import { Component, Input } from '@angular/core'; 

 

@Component({ 

  selector: 'hello', 

  template: `<h1>Hello {{name}}!</h1>`, 

  styles: [`h1 { font-family: Lato; }`] 

}) 

export class HelloComponent { 

  @Input() name: string; 

} 

 

Kindly try with the above sample and get back to us if you need any further assistance. 

 

Regards, 

Vinitha