Add nested tabs in Angular Tab component
6 Sep 20224 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 selected
event handler.
import { Component, OnInit } from '@angular/core';
import { isNullOrUndefined as isNOU } from '@syncfusion/ej2-base';
import { Tab, TabComponent, SelectEventArgs } from '@syncfusion/ej2-angular-navigations';
import { nested_tab_items, usa_items, france_items, australia_items } from '../datasource.ts';
/**
* Add nested Tabs
*/
@Component({
selector: 'app-container',
template: `
<ejs-tab id="element" #tab [items]='tabItems' (created)='handleCreatedEvent($event)' (selected)='handleSelectEvent($event)'>
</ejs-tab>`
})
export class AppComponent implements OnInit {
public tabItems: Object[];
public usaItems: Object[];
public franceItems: Object[];
public australiaItems: Object[];
public ngOnInit(): void {
this.tabItems = nested_tab_items;
this.usaItems = usa_items;
this.franceItems = france_items;
this.australiaItems = australia_items;
}
public handleCreatedEvent(): void {
if (isNOU(document.querySelector('#usa_tab.e-tab'))) {
let usa_obj: Tab = new Tab({
items: this.usaItems
});
usa_obj.appendTo('#usa_tab');
}
}
public handleSelectEvent(e: SelectEventArgs): void {
if (e.selectedIndex === 1 && isNOU(document.querySelector('#france_tab.e-tab'))) {
let france_obj: Tab = new Tab({
items: this.franceItems
});
france_obj.appendTo('#france_tab');
} else if (e.selectedIndex === 2 && isNOU(document.querySelector('#australia_tab.e-tab'))) {
let australia_obj: Tab = new Tab({
items: this.australiaItems
});
australia_obj.appendTo('#australia_tab');
}
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { TabModule } from '@syncfusion/ej2-angular-navigations';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule, FormsModule, TabModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);