How to pass data to a ng-template when adding a new tab?

[Jay Bauer]

I am attempting to add a variable number of tabs (depending on an API response), and each of these tabs is meant to contain a Grid component that loads different data. I'm able to add a new tab, but I can't solve how to then pass a variable to each new tab in order to render data in the Grid component.

Here is a simplified version of my code to show what I have working thus far, please let me know if any additional information is required.

<ejs-tab #tabElement id="tabElement">

    <e-tabitems>

    </e-tabitems>

</ejs-tab>

<ng-template #resultsTableTemplate let-results="results">

    <ejs-grid #grid [dataSource]="results" (dataBound)="dataBound()">

        <e-columns>

            <e-column field="example" headerText="Example" width="300"></e-column>

            <e-column field="example2" headerText="Example 2" width="200"></e-column>

        </e-columns>

    </ejs-grid>

</ng-template>

[...]

@ViewChild("tabElement") tabElem: TabComponent

    @ViewChild("grid") grid: GridComponent

    @ViewChild("resultsTableTemplate") resultsTableTemplate: TemplateRef<any>

    @Input() modelId: string

    kpiList: [] = []

[...] getKpiList(): void {

        this.api.getKpiList(this.modelId)

            .subscribe(res => {

                this.kpiList = res

                res.forEach(kpi => {

                    let newKpiTab: any = [

                        { header: { text: kpi }, content: this.resultsTableTemplate }

                    ]

                    this.tabElem.addTab(newKpiTab, 1)

                })

            })

    }

[Vinitha Devi Murugan]

Dear Customer,

Greetings from Syncfusion Support.

We have checked your query “How to pass data to a ng-template when adding a new tab?” and we achieved your requirement using below code. We have prepared simple sample for your reference.

Sample: https://stackblitz.com/edit/pass-data-to-a-ng-template-when-adding-a-new-tab?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

[Jay Bauer]

Hello,

Thank you for your response,! It's a start, though it has not solved the issue. In stackblitz sample you provided, when adding a new tab, the content updates across all tabs rather than only applying to the newest tab added.


Do you have any ideas for a different approach?

[Ravikumar Venkatesan]

Hi Jay,

We have validated your query “when adding a new tab, the content updates across all tabs rather than only applying to the newest tab added.” at our end and achieved your requirement using ngFor as shown in the shared code snippet.

Sample: https://stackblitz.com/edit/ej2-angular-tab-pass-data-to-dynamicly-added-tab-content?file=app.component.html

[app.component.html]

<div class="control-section e-tab-section">

  <div class="col-lg-8 content-wrapper">

 

    <!-- Render the Button Component -->

    <button ejs-button cssClass="e-info" (click)="addDynamicTabComponent()">

      Add tab with component content

    </button>

 

    <!-- Render the Tab Component -->

    <ejs-tab id="tab_orientation" #Tab heightAdjustMode="Auto" [showCloseButton]="true">

      <e-tabitems>

        <ng-template ngFor let-data [ngForOf]="listOfTabs" let-i="index">

          <e-tabitem>

            <ng-template #headerText>

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

            </ng-template>

            <ng-template #content>

              <ng-container [ngTemplateOutlet]="custom" [ngTemplateOutletContext]="{result:data.result}">

              </ng-container>

            </ng-template>

          </e-tabitem>

        </ng-template>

      </e-tabitems>

    </ejs-tab>

  </div>

</div>

 

<ng-template #custom let-data="result">

  <div class="product-header-container">

    <div class='product-id'>

      Id

    </div>

    <div class='product-name'>

      Product Name

    </div>

  </div>

  <div *ngFor="let product of data;">

    <div class="product-container">

      <div class='product-id'>

        {{product.Id}}

      </div>

      <div class='product-name'>

        {{product.ProductName}}

      </div>

    </div>

  </div>

</ng-template>

Kindly try the shared sample and let us know if you need any further assistance.

Regards,

Ravikumar Venkatesan