How to load Tab items dynamically in Angular Tab

31 Aug 20265 minutes to read

Tabs can be added dynamically by passing an array of items and an index to the addTab method.

    // New tab title and content inputs are fetched and stored in local variable
    let title: string = document.getElementById('tab-title').value;
    let content: string = document.getElementById('tab-content').value;

    // Required tab item object formed by using textbox inputs
    let item: Object =  { header: { text: title }, content: createElement('pre', { innerHTML: content.replace(/\n/g, '<br>\n') }).outerHTML };

    // Pass the item object and the index argument to the addTab method to add a new tab
    this.tabInstance.addTab([item], this.totalItems - 1);

Steps

  1. Add a + icon to the tab header via the iconCss property on the items configuration.
  2. Capture new-tab title and content from input fields.
  3. Click the Add Tab button to call addTab([item], index) with the calculated last index.

In the following demo, tab content is added by clicking the + icon.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { FormsModule } from '@angular/forms'
import { TabModule } from '@syncfusion/ej2-angular-navigations'




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

enableRipple(true);

/**
 * Add new tabs dynamically
 */

@Component({
imports: [
        FormsModule, TabModule
    ],


standalone: true,
    selector: 'app-container',
    template: `<ejs-tab #element id="element" (created)="tabCreated()" (selected)="tabSelected($event)">
            <e-tabitems>
                <e-tabitem [header]='headerText[0]' content="#tab1_content"></e-tabitem>
                <e-tabitem [header]='headerText[1]' content="#form-container"></e-tabitem>
            </e-tabitems>
        </ejs-tab>`
})

export class AppComponent {
      @ViewChild('element') tabInstance?: TabComponent;

    public totalItems?: number;
    public headerText: { text?: string, iconCss?: string }[] = [{ 'text': 'Tab1' }, { 'iconCss': 'e-add-icon' }];
    public tabCreated(): void {
        let tooltip: Tooltip = new Tooltip({
            content: 'Add Tab'
        });
        tooltip.appendTo('.e-ileft.e-icon');

        (document.getElementById('btn-add') as HTMLElement).onclick = (e : Event) => {
            let title: string = (document.getElementById('tab-title') as any).value;
            let content: string = (document.getElementById('tab-content') as any).value;
            let item: Object =  { header: { text: title }, content: createElement('pre', { innerHTML: content.replace(/\n/g, '<br>\n') }).outerHTML };

            this.totalItems = document.querySelectorAll('#element .e-toolbar-item').length;
            this.tabInstance?.addTab([item], this.totalItems-1);
        };
    }

    public tabSelected(args: SelectEventArgs): void {
        if (args.selectedIndex === document.querySelectorAll('#element .e-toolbar-item').length -1) {
            (document.getElementById('tab-title') as any).value = '';
            (document.getElementById('tab-content') as any).value = '';
        }
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Index parameter

Pass 0 to prepend a tab or currentItems.length to append it. Indices outside the valid range throw an error.

Removing dynamically added tabs

Call removeTab(index) on the Tab instance to remove a tab by its current index.

See Also