Disable & enable tabs programmatically

Hello,

I see we can do:

“<\ion-tab [root]=“tab1Root” enabled=“false” tabTitle=“Map” tabIcon=“ios-globe”>”

But how can we enable / disable tabs programmatically? I’m using Ionic 2.

Thanks,
Roy

I’m never sure what people mean by “programatically”, especially when it comes to the world of Angular where things are much more reactive than imperative, but you can bind enabled to a property just as you can anything else:

public boolean mapTabEnabled;

<ion-tab [root]="tab1Root" [enabled]="mapTabEnabled" tabTitle="Map" tabIcon="ios-globe">

Thanks,

We can do this from tab.ts . but how can we do this from other pages ? I like to conditionally enable / disable the tabs.

One option might be, set sessionstorage from the pages. and retrieve that in tab.ts
Maybe there is an better solution, please enlighten me.

Even though you removed the question, I’d like to recommend a service provider to control the tabs like that.

ok, and then set the exact states in tab.ts ?

I’m gonna make it brief, hopefully you’ll get the idea:

@Injectable()
export class TabStateService {
    public states: { [s: text]: any } = {};

    setState(tab: string, enabled: boolean) {
        this.states[tab] = enabled;
    }
}

And then in tabs.ts

import { TabStateService } from '...';

...

constructor(tabStateService: TabStateService) {}

Aaaand in the HTML:

<ion-tab [root]="..." [enabled]="tabStateService.states.home" tabTitle="home" tabIcon="home">

And you can now use setState() anywhere you import it.

1 Like

Thanks it works !

I implemented google maps with markers on one tab. When clicking on a marker I like to navigate to the second tab.
Do you also know how to achieve that ?

this.navCtrl.parent.select(2); gives a undefined error

Not that there’s any reason to care about my opinion, but as a user, tabs are something that allow me to flip back and forth between disconnected features of an application, and any time the app is changing them for me, I feel disoriented.

A concrete example: say we have a recipe application. Once a recipe is selected, we have three tabs: one for ingredients, one for cooking process, a third for suggested accompaniments. When I’m at the store, I choose the first tab. In the kitchen, the second. This makes sense to me.

What does not make sense (and I’ve tried my share of interfaces like this before eventually swearing off of them) is to have a drilldown interface use tabs. A first “search recipes” tab and a second “recipe details” tab. When I choose a recipe from the first tab, the app switches me to the second tab.

TL;DR: whenever you feel the need to do tab-based navigation in any other fashion than “user directly selecting tab”, maybe ask yourself if tabs are really the best UI fit here.

I appreciate your explanation on the usage of tab layouts.

but my only task is to convert an Ionic1 App into a Ionic2 App.

For example:
this.navCtrl.parent.select(2);

gives:
Cannot read property ‘parent’ of undefined

How to resolve the undefined issue? meanwhile I will talk with the client about the tab layout.

Thanks

Hi there Rapropos

I have one problem with that and I don´t know if you could help me…

[enabled] works fine on ionic serve or even on Ionic devApp on my device, but when I make the signed APK and install it, it stops working (I mean, tabs are not enabled or not depending on condition).

More info here:

Thanks in advance for your help.

Thanks a lot! Very useful.