Can I add an idea to a tab item, so I can easilty identify the tab in typescript?

[Niels Van Goethem]

I want certain actions to be done when the user switches tabs. Those actions are specific per tab..

Is there some way that I can give id or name to a tab item, so in my typescript code, I can easily identify on which tab the user resides?

[Swathi Ravi]

Hi Niels Van Goethem,

Thank you for reaching out to us.

Yes, you can assign an id to each tab item, which will allow you to easily identify and manage specific actions for each tab in your TypeScript code. Below is an example demonstrating how to set the id property for each tab item:

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

    <div class="e-sample-resize-container">

        <!-- Render the Tab Component -->

        <ejs-tab id="tab_default" heightAdjustMode='Auto'>

                <e-tabitems>

                    <e-tabitem id="tab1" [header]='headerText[0]'>

                        <ng-template #content>

                           

                        </ng-template>

                    </e-tabitem>

                    <e-tabitem id="tab2" [header]='headerText[1]'>

                        <ng-template #content>

                           

                        </ng-template>

                    </e-tabitem>

                    <e-tabitem id="tab3" [header]='headerText[2]'>

                        <ng-template #content>

                            

                        </ng-template>

                    </e-tabitem>

                </e-tabitems>

            </ejs-tab>

    </div>

</div>

Sample: https://stackblitz.com/edit/angular-zkeqki?file=src%2Fapp.component.html

Please let us know if you have any further questions or need additional assistance.

Best regards,

Swathi

[Niels Van Goethem]

And how can I get the id of the active tab? That's what I was trying to do

[Swathi Ravi]

Niels Van Goethem,

To obtain the ID of the active tab, you can utilize the created and selected events of the Tab component. The created event helps capture the active tab ID during the initial load, while the selected event provides the ID when a different tab is selected.

Below is an example demonstrating how to achieve this:

[app.component.html]

 <ejs-tab #tabObj id="tab_default" heightAdjustMode='Auto' (selected)="onTabSelected($event)" (created)="onTabCreated()">

[app.component.ts]

import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core';

import { SelectEventArgs, TabComponent, TabModule } from '@syncfusion/ej2-angular-navigations';

export class AppComponent {

    @ViewChild('tabObj') public tabObj: TabComponent;

    public items: any;

    public activeTabId: string;

    public headerText: Object = [{ text: "Twitter", 'iconCss': 'e-twitter' },

    { text: "Facebook", 'iconCss': 'e-facebook' }, { text: "WhatsApp", 'iconCss': 'e-whatsapp' }];

    onTabSelected(args: SelectEventArgs): void {

        this.activeTabId = this.items[args.selectedIndex].id;

        console.log("Active tab id is =>", this.activeTabId);

    }

    onTabCreated() {

        this.items = this.tabObj.items;

        this.activeTabId = this.items[this.tabObj.selectedItem].id;

        console.log("Active tab id is =>", this.activeTabId);

    }

}

You can also find a working example here: angular-tab-active-tab-id (forked) - StackBlitz

We hope this helps you achieve your goal. Please feel free to reach out if you have any further questions.