Add nested tabs in EJ2 TypeScript Tab control

2 May 20234 minutes to read

Tab supports to render the nested level of Tabs by using content property. You can add the nested Tab element inside the parent Tab content property. To render the nested Tab, initialize the component using the id of Tab from a selected event handler.

import { Tab, SelectEventArgs } from '@syncfusion/ej2-navigations';
import { enableRipple, isNullOrUndefined as isNOU } from '@syncfusion/ej2-base';
import { usa_cities, france_cities, australia_cities } from './datasource.ts';

enableRipple(true);

let tabObj: Tab = new Tab({
  selected: handleSelectEvent,
  created: handleCreatedEvent,
  items:  [
    {
      header: { 'text': 'USA' },
      content: '<div id="usa_tab"></div>'
    },
    {
      header: { 'text': 'France' },
      content: '<div id="france_tab"></div>'
    },
    {
      header: { 'text': 'Australia' },
      content: '<div id="australia_tab"></div>'
    }
  ]
});
tabObj.appendTo('#element');

function handleCreatedEvent(): void {
  if (isNOU(document.querySelector('#usa_tab.e-tab'))) {
    let usa_obj: Tab = new Tab({
      items: usa_cities
    });
    usa_obj.appendTo('#usa_tab');
  }
}
function handleSelectEvent(e: SelectEventArgs): void {
  if (e.selectedIndex === 0 && isNOU(document.querySelector('#usa_tab.e-tab'))) {
    let usa_obj: Tab = new Tab({
      items: usa_cities
    });
    usa_obj.appendTo('#usa_tab');
  } else if (e.selectedIndex === 1 && isNOU(document.querySelector('#france_tab.e-tab'))) {
    let france_obj: Tab = new Tab({
      items: france_cities
    });
    france_obj.appendTo('#france_tab');
  } else if (e.selectedIndex === 2 && isNOU(document.querySelector('#australia_tab.e-tab'))) {
    let australia_obj: Tab = new Tab({
      items: australia_cities
    });
    australia_obj.appendTo('#australia_tab');
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 Tab</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 Tab" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>LOADING....</div>
    <div id='container'>
        <div id='element'></div>
        <br/><br/>
        <div id='result'></div>
    </div>
</body>

</html>