How to create dynamic tabs on ionic 2 RC3

Ionic Framework ionic-v3
1

I’ve try to create dynamic tabs with this code :<ion-tab *ngFor="let tab of userTab" [root]="tab1Root" tabTitle="hello"></ion-tab> . I use web service to populate userTab to array but when I run it still not working and show blank white screen
can someone help me?

2

Hello, did you solve the problem?
Same situation here…

3

There’s nowhere near enough information to say anything with certainty, but when I see “I use web service to populate”, I suspect that the array is not initialized in the constructor with some sane dummy/default value, which is needed because the template is going to try to access that property before the web service has responded.

1 Like
4

If I understood what you said, I had the same issue. And @rapropos is right, the tabs are initialized before your web server responds.

The solution I found was to keep the splash screen shown, and use promises. Once the web server responds, I trigger the promise’s resolve, set the tabs, and then hide the splash screen, like this :

this.theme.init().then(() => { // theme.init calls the web server and sets tabs data on global variables
          StatusBar.styleDefault();
            this.rootPage = TabsPage; // in my TabsPage, the tabs are created with global variables
              Splashscreen.hide();
        });

But don’t forget that you don’t know how much time the server will take to respond (it depends on the mobile network), so may be you should think of setting default values, and update the data when the server responds, if it’s possible.

2 Likes