Ionic Programmatic Tab Population

Question

I'm attempting to create a tab for each section of a menu.

So I have the following data structure:

[
  { name: 'Wines', contents:[...] },
  { name: 'Ciders', contents: [...] },
  { name: 'Beers', contents:[...] }
]

What I want is some sort of ngFor that would produce a tab for each element in the array above.

I haven't seen anything online for this and can't seem to solve it myself.

Does anyone have any experience with this?

Answer 1

Try something like this:

let tabs = [{name:'Wines', contents:[...]},
 {name:'Ciders', contents: [...]},
 {name:'Beers', contents:[...]}
];

<ion-tabs>
  <ion-tab *ngFor="let tab of tabs" [root]="tab.name"></ion-tab>
</ion-tabs>

This should work if tab.name is a page that has an @IonicPage decorator where the class-name equals the name property of your tab object. Example:

@IonicPage()
@Component({
  ...
})
export class MyPage {
}

Then tab.name has to be MyPage.

Please note that setting a string as root of a tab utilizes lazy loading to set the root page of the tab. So you should probably read the following articles by the ionic-team if you are not familiar with it:

• Part 1
• Part 2