Adding dynamic items with content reuse in Angular Tab component

22 Sep 20255 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 index value to the addTab method.

Content reuse can be achieved using the following steps:

1. Create a TemplateRef variable: Define TemplateRef variables in your component (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.

Refer to the following sample.

app.component.html

<ng-template #DatePickertemplateRef>
    <date-picker></date-picker>
</ng-template>

<ng-template #FirstDropDowntemplateRef>
  <drop-down [data]="firstDropDownData"></drop-down>
</ng-template>

<ng-template #SecondDropDowntemplateRef>
  <drop-down [data]="secondDropDownData"></drop-down>
</ng-template>

<ng-template #ThirdDropDowntemplateRef>
  <drop-down [data]="thirdDropDownData"></drop-down>
</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]="DatePickertemplate"></e-tabitem>
		<e-tabitem [header]='tabItemsHeaderText[1]' [content]="FirstDropDowntemplate"></e-tabitem>
		<e-tabitem [header]='tabItemsHeaderText[2]' [content]="SecondDropDowntemplate"></e-tabitem>
	</e-tabitems>
</ejs-tab>

app.component.ts

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 { 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 ],


standalone: true,
  selector: 'my-app',
  templateUrl: 'app/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: Object = [{ '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);
  }

}

main.ts

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