Dynamic tabs - invisible tabbar

Ionic Framework ionic-v3
1

I fetch a collection of json objects (each for a tab) from php backend then try to display each in a tab

<ion-tabs #myTabs>
 	<ion-tab *ngFor="let tab of userGroups" [root]="page" rootParams="{{tab.id}}" tabTitle="{{tab.group}}" tabIcon="pulse"></ion-tab>
</ion-tabs>

(page - the same one for each, only params passed are different)

The problem is the tabbar is invisible (when you hover over it, the mouse cursor changes so it’s physically there). When you click, the whole tabbar becomes visible and the clicked tab is selected - then all works as expected.

My observations:

  1. When you add at least one static tab, all the other dynamic are visible (the static is selected).
  2. Inspecting the page with Chrome tools shows that div containing the tabs has only ‘tabbar’ class (opacity:0). When you click one of the tabs, class of ‘show-tabbar’ is added.
  3. Trying to force any tab to be selected after displaying them has no effect (selectedIndex=“0”, selecting the tab programatically by referencing the parent tabs has also no effect)
  4. When you hardcode the objects array in tabs component .ts file, all works - problem persists only when you fetch it from a server like so: 
     ionViewDidLoad() {
		this.api.getGroupsList()
			.subscribe(
			data => {
				this.userGroups = data;
			},
			err => this.helpers.presentAlert( err ) //show modal with err
			);
	}

Conclusion is that you cannot force a selection on tabs generated dynamically in *ngFor loop. As a consequence, no selection leaves the div container with only ‘tabbar class’ (ie opacity:0)

Have you run into similar issues?

ps. As a workaround for now I’ve added “div.tabbar {opacity:1;}” to tabs.scss (but still there’s no default selection).

2 Likes
3

Hi,

It’s a shame the issue persists in ionic 3
Another workaround I found is to do server query BEFORE the tabs page
not on it. So try passing data to populate the tabs as params of the
push/set method.

rgs
Konrad

W dniu 2017-04-08 o 00:22, Avilao pisze:

1 Like
4

Could you be clearer please? I’m new to Ionic and I have the same issue :frowning:

5

I think tabs are a bad fit here, and would look for another solution.

6

Is your tabs page the root/home page?

If so, extend your navigation with another home page that will precede the tabs page. And there you do server query for
data that will be pushed to the tabs page.

  1. home page (fetch data from server and push it to 2 with params) - check the docs for navController.push method as to how to push data
  2. tabs page (get params) - check NavParams obj docs

hope I managed to clarify;)

1 Like
7

If anoyone runs into a similar problem - now I managed to solve it another way. I create the tabs component dynamically and using lifecycle hooks I make sure the data is fetched and only then pass the data to tabs and then display it. Works like a charm.

1 Like
8

May I trouble you for the code for this?