How to get the Active tab value on UI in LightningWeb Component

Question

I have created the custom tab as given below , how can i store the name of the active tab value in a variable in my JS file.

even when user switch tab , label of the current tab should get stored in the variable of the JS file.

Below is the code:

    <template>
        <lightning-tabset class='slds-tabs_default' active-tab-value='Item One'>
            <lightning-tab label="Item One" value="1" default>
                Here's the content for Item One:
                
            </lightning-tab>
            <lightning-tab label="Item Two" value="2">
                Here's the content for Item Two:
                
            </lightning-tab>
            <lightning-tab label="Item 3" value="3">
                Here's the content for Item Two:
                
            </lightning-tab>
            <lightning-tab label="Item 4" value="4">
                Here's the content for Item Two:
                
            </lightning-tab>
        </lightning-tabset>
    </template>

import { LightningElement } from 'lwc';

export default class ActiveTabExample extends LightningElement {

    @track activetabContent = '';

  
    
}

Whenever user changes the tab activetabContent must get updated with the current tab in the UI

Answer 1

Handle the onactive event to get the active tab and assign the value to active-tab-value in tabset. Also no need of track decorator since all fields are reactive now with new release except field that contains an object or an array.

<template>
    <lightning-tabset class='slds-tabs_default' active-tab-value={activetabContent}>
        <lightning-tab label="Item One" value="1" default onactive={tabChangeHandler}>
            Here's the content for Item One:
            
        </lightning-tab>
        <lightning-tab label="Item Two" value="2" onactive={tabChangeHandler}>
            Here's the content for Item Two:
            
        </lightning-tab>
        <lightning-tab label="Item 3" value="3" onactive={tabChangeHandler}>
            Here's the content for Item Two:
            
        </lightning-tab>
        <lightning-tab label="Item 4" value="4" onactive={tabChangeHandler}>
            Here's the content for Item Two:
            
        </lightning-tab>
    </lightning-tabset>
</template>

import { LightningElement } from 'lwc';

export default class ActiveTabExample extends LightningElement {

    activetabContent = '';

    tabChangeHandler(event) {
 
       this.activetabContent  = event.target.value;
    }

}

Answer 2

You can use on active event to get active tab

<lightning-tab label="Item One" value="1" default onactive={handleActiveTab}>
                Here's the content for Item One:
                
</lightning-tab>

 handleActiveTab(event) {
     
    this.activetabContent  = event.target.label;
  }