How to add tabs dynamically from json


#1

Hi, How to add tabs dynamically from the json obtained. My ts file returns the json with tab title, icon and component. My HTML is like below
<ion-tabs>
<div *ngFor="#tab of tabs">
<ion-tab [root] = "tab.component" [tabTitle]="tab.name" [tabIcon]="tab.icon"></ion-tab>
</div>
</ion-tabs>

Since my component is a json string, assigning it to the root didn’t set the navigation. I tried to use the (select)=openTab(tab.component) instead of root. But the params in the method remains undefined. Please help me on this.


#2

Any success on this?


#3

I have not found any best solution so far. Just tried the below method to achieve my need.

this.ser.getPages().subscribe(tabData => {
                    for (var key in tabData) {
                        switch (tabData[key].component) {
                            case 'GridPage':
                                tabData[key].component = GridPage;
                                break;
                            case 'ListPage':
                                tabData[key].component = ListPage;
                                break;
                    }
this.check = tabData;
this.nav.setRoot(<any>TabsPage, this.check);