nested tab

[Ananya Juhi]

Hi 

Could you please tell me how to achieve the nested tab functionality.

I want three tabs within my parent tab. I have a parent tab, and on select of the parent tab, I want three child tabs.

If you could provide an example, it would be a great help.

Thanks :-)

[Buvana Sathasivam]

  

Hi Ananya, 

Thanks for using Syncfusion Products. 

We have checked your shared query.  We have created a nested tab component using content property.  You can add the nested Tab element inside the parent Tab content property.  If you select first tab, we have created three child tab under the parent tab using selected event.  Please find the below code to create three child tabs. 

app.component.ts 

import { nested_tab_items } from '../datasource'; 

import { Tab, TabComponent, SelectEventArgs } from '@syncfusion/ej2-ng-navigations'; // Import tab components 

 

@Component({ 

    selector: 'app-root', 

  template: ` 

<ejs-tab id="element" #tab[items]='tabItems' (selected)='handleSelectEvent($event)'> 

        </ejs-tab>`  // Render tab component and we have imported items in datasource.ts file 

}) 

 

export class AppComponent implements OnInit { 

 

    public tabItems: Object[]; 

    …… 

   public ngOnInit(): void { 

        this.tabItems = nested_tab_items; 

        …… 

    } 

 

    public handleSelectEvent(e: SelectEventArgs): void { // Triggered selected event when you select tab items 

        if (e.selectedIndex === 0 && isNOU(document.querySelector('#usa_tab.e-tab')))     {                       // checked if first tab is selected on parent tab  

            let usa_obj: Tab = new Tab({ // Initialize child Tab component 

                items: this.usaItems    

            }); 

            usa_obj.appendTo('#usa_tab'); // Render initialized child Tab component 

            let tab3_obj: Tab = new Tab({ 

                items: this.tab3Items 

            }); 

            tab3_obj.appendTo('#tab3'); 

            let tab4_obj: Tab = new Tab({ 

                items: this.tab4Items 

            }); 

            tab4_obj.appendTo('#tab4'); 

        }  

        ………….. 

    } 

} 

datasource.ts 

export let nested_tab_items: Object[] = [ 

    { 

        header: { 'text': 'USA' }, 

        content: '<div id="usa_tab"></div><div id="tab3"></div><div id="tab4"></div>'  // You can specify three child tab into parent content 

    }, 

    { 

        header: { 'text': 'France' }, 

        content: '<div id="france_tab"></div>' 

    }, 

    { 

        header: { 'text': 'Australia' }, 

        content: '<div id="australia_tab"></div>' 

    } 

]; 

 

…………… 

We have prepared a sample based on this. Please refer to the following link: 

https://stackblitz.com/edit/github-lushmu-szeb2w?file=src%2Fapp%2Fapp.component.ts    

 

Refer to the following UG documentation link:   

https://ej2.syncfusion.com/angular/documentation/tab/howto.html#add-nested-tabs  

https://ej2.syncfusion.com/angular/documentation/tab/api-tabComponent.html#selected  

Regards, 

Buvana S