Dynamic tab-bar in Ionic 2/3 - mobile

Question

Need help to create a dynamic tab-bar for Ionic 3 app.
I've already created the dynamic tab-bar which receives tabs names from API, stores in storage and creates them in app after
ts:
unionTabs = [];
this.storage.get('tabs').then((tabs)=>{
tabs.forEach(title => {
switch(title){
case 'Home': this.unionTabs.push({title: title, root: HomePage, icon: 'home'})
break;
case 'Social Feed': this.unionTabs.push({title: title, root: SocialFeedPage, icon: 'pulse'})
break;
case 'Contact': this.unionTabs.push({title: title, root: ContactPage, icon: 'contacts'})
break;
case 'Mail': this.unionTabs.push({title: title, root: MailClientPage, icon: 'mail'})
break;
case 'Settings': this.unionTabs.push({title: title, root: SettingsPage, icon: 'settings'})
break;
default: alert('There is some error with the tabs!!')
}
});
})
html:
<ion-tabs *ngIf="unionTabs.length>0;else noData">
<ion-tab *ngFor="let tab of unionTabs" [root]="tab.root" [tabTitle]="tab.title" [tabIcon]="tab.icon"></ion-tab>
</ion-tabs>
But can't figure it out how to display only five (5) tabs and the last tab should display the list of other tabs. The same functionality is in the Facebook App. Unfortunately, I can't hardcoded these 5 tabs because I receiving the different tabs from a server (depends on user account)
Thank you.

Answer 1

Ok, I think I found the solution.
this.storage.get('tabs').then((tabs) => {
if (tabs.length < 6) {
for (let title of tabs) {
this.drawTab(title);
}
} else {
var tabNumber = 0;
for (let title of tabs) {
if (tabNumber === 4) {
this.unionTabs.push({ title: 'More', root: TabListPage, icon: 'menu' });
break
}
tabNumber++;
this.drawTab(title);
}
}
})
drawTab(tabName: string) {
switch (tabName) {
case 'Home': this.unionTabs.push({ title: tabName, root: HomePage, icon: 'home' });
break;
case 'Social Feed': this.unionTabs.push({ title: tabName, root: SocialFeedPage, icon: 'pulse' })
break;
case 'Contact': this.unionTabs.push({ title: tabName, root: ContactPage, icon: 'contacts' })
break;
case 'Mail': this.unionTabs.push({ title: tabName, root: MailClientPage, icon: 'mail' })
break;
case 'Events': this.unionTabs.push({ title: tabName, root: EventsPage, icon: 'megaphone' })
break;
case 'Settings': this.unionTabs.push({ title: tabName, root: SettingsPage, icon: 'settings' })
break;
default: alert('There is some error with the tabs!!')
}
}
And on the 'MorePage' u can do with rest of the tabs whatever you want:
listTabs = [];
this.storage.get('tabs').then((tabs)=>{
let tabCounter = 0;
for (let tab of tabs){
tabCounter++;
if(tabCounter > 4){
this.listTabs.push(tab)
}
}
})
Hope someone will find it useful as I.