1. Home
  2. Forum
  3. Angular - EJ 2
  4. nested tab

nested tab

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 :-)

1 Reply
BS Buvana Sathasivam Syncfusion Team June 20, 2018 11:46 AM UTC

  
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: 
 
Refer to the following UG documentation link:   


Regards, 
Buvana S 
 


Loader.
Up arrow icon