Add dynamic Tab items with content reuse in Angular Tab

31 Aug 20265 minutes to read

You can add dynamic tabs by reusing content through Angular TemplateRef, which provides an efficient way to manage complex tab content without recreating components. Dynamic tabs can be added programmatically by passing an array of items and an index to the addTab method.

Content reuse can be achieved using the following steps:

  1. Create a TemplateRef variable: Define TemplateRef variables in the app.component.ts file to hold references to your template content.
  2. Access the TemplateRef using ViewChild: Use the @ViewChild decorator on <ng-template> elements to programmatically access template references.
  3. Implement separate TemplateRef declarations: Provide distinct TemplateRef declarations for each Angular component type and pass the content when dynamically adding tabs. This enables efficient content reuse across multiple tab instances while preserving component state and functionality.

Indexing: addTab(items, index) inserts items at the given index. Pass 0 to prepend, or items.length to append. Index values outside the valid range throw an error.

Refer to the following sample.

<ng-template #DatePickertemplateRef>
  <ejs-datepicker></ejs-datepicker>
</ng-template>

<ng-template #FirstDropDowntemplateRef>
  <ejs-dropdownlist [dataSource]="firstDropDownData"></ejs-dropdownlist>
</ng-template>

<ng-template #SecondDropDowntemplateRef>
  <ejs-dropdownlist [dataSource]="secondDropDownData"></ejs-dropdownlist>
</ng-template>

<ng-template #ThirdDropDowntemplateRef>
  <ejs-dropdownlist [dataSource]="thirdDropDownData"></ejs-dropdownlist>
</ng-template>

<button id="add" class="e-btn" (click)="addButtonClicked($event)">Click to add</button>
<button id="remove" class="e-btn" (click)="removeButtonClicked($event)">Click to remove</button>

<ejs-tab id="element" #element>
  <e-tabitems>
    <e-tabitem [header]="tabItemsHeaderText[0]" [content]="DatePickertemplateRef"></e-tabitem>
    <e-tabitem [header]="tabItemsHeaderText[1]" [content]="FirstDropDowntemplateRef"></e-tabitem>
    <e-tabitem [header]="tabItemsHeaderText[2]" [content]="SecondDropDowntemplateRef"></e-tabitem>
  </e-tabitems>
</ejs-tab>
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { FormsModule } from '@angular/forms'
import { DropDownListComponent } from '@syncfusion/ej2-angular-dropdowns'
import { DatePickerModule } from '@syncfusion/ej2-angular-calendars'
import { TabAllModule } from '@syncfusion/ej2-angular-navigations'

import { DropDownListModule } from '@syncfusion/ej2-angular-dropdowns'; 



import { Component, ViewChild, OnInit, TemplateRef } from '@angular/core';
import { createElement } from '@syncfusion/ej2-base';
import { TabComponent, SelectEventArgs  } from '@syncfusion/ej2-angular-navigations';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

/**
 * Content reuse
 */

@Component({
imports: [TabAllModule,  FormsModule, DatePickerModule,DropDownListModule, TabAllModule ],


standalone: true,
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})

export class AppComponent {
  @ViewChild('element') tabObj?: TabComponent;
  @ViewChild('DatePickertemplateRef') public DatePickertemplate?: TemplateRef<any>;
  @ViewChild('FirstDropDowntemplateRef') public FirstDropDowntemplate?: TemplateRef<any>;
  @ViewChild('SecondDropDowntemplateRef') public SecondDropDowntemplate?: TemplateRef<any>;
  @ViewChild('ThirdDropDowntemplateRef') public ThirdDropDowntemplate?: TemplateRef<any>;

  public firstDropDownData: string[] = [
    'Badminton',
    'Basketball',
    'Cricket',
    'Golf',
    'Hockey',
    'Rugby'
  ];

  public secondDropDownData: string[] = [
    'Cricket',
    'Golf',
    'Hockey',
    'Rugby',
    'Badminton',
    'Basketball'
  ];

  public thirdDropDownData: string[] = [
    'Rugby',
    'Badminton',
    'Basketball',
    'Cricket',
    'Golf',
    'Hockey'
  ];

  public tabItemsHeaderText: { text: string }[] = [{ 'text': 'DatePicker' }, { 'text': 'Dropdown' }, { 'text': 'Reused Dropdown' }];

  public addButtonClicked(e: any): void {
    var newtabItem = [
      { header: { text: 'DynamicTabItem' }, content: this.ThirdDropDowntemplate }
    ];
    (this.tabObj as TabComponent).addTab(newtabItem as any,1);
  }

  public removeButtonClicked(e: any): void {
    (this.tabObj as TabComponent).removeTab(1);
  }

}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Removing dynamically added tabs

Use the removeTab method on the Tab instance to remove a dynamically added tab by its index.

See Also