Adding dynamic items with content reuse in Angular Tab component

28 Sep 20235 minutes to read

You can add dynamic tabs by reusing the content using Angular TemplateRef. Tabs can be added dynamically by passing array of items and index value to the addTab method.

Content reuse can be achieved by using the following steps:

  1. Create a TemplateRef variable in your component(app.component.ts) file.
  2. Access the TemplateRef using ViewChild on the <ng-template> element.
  3. Provide separate TemplateRef declaration for each angular component and pass content by dynamically adding tab. It will reuse the content of angular component.

Refer to the following sample.

<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>
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({
  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);
  }

}
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 { DatePickerComponent } from './date-picker.component';
import { DropDownComponent } from './drop-down.component';

import { AppComponent } from './app.component';

@NgModule({
  imports: [TabAllModule, BrowserModule, FormsModule, DatePickerModule ],
  declarations: [AppComponent, DatePickerComponent, DropDownComponent, DropDownListComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

import 'zone.js';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);