Disable or enable a tab programatically

Ionic Framework ionic-v3
1

Hello, Is it possible to disable/enable a the tab programatically, I tired this way but did not work:

<ion-tabs tabbarPlacement="bottom" preloadTabs="false" #paymentTabs>
            <ion-tab [root]="cars" [rootParams]="fooId" tabTitle="Cars" tabIcon="pulse"></ion-tab>
            <ion-tab [root]="bikes" tabTitle="Bikes" [rootParams]="fooId" tabIcon="analytics"></ion-tab>
            <ion-tab [root]="boats" tabTitle="Boats" [rootParams]="fooId" tabIcon="card" [disabled]="noitems"></ion-tab>
        </ion-tabs>

In my ts file:

export class Tabs {
   public noitems;
   constructor(){
     this.noitems = true;
   }
}

This did not disable the tabs, Is this correct way to disable the tabs? This works for buttons, Is there any alternative to disable the tabs.

2

I am currently working on this too…yet I haven’t found any concrete way of re-enabling the tab. I am currently working on adding an ng-click=“enableTabs()” to a button within an active tab. And in the controller adding a $scope.enableTabs() { document.getElementById(“tabA”).disabled = false ; } type function. So far, nothing else I have tried has worked. Will post the results of the above in a bit.

3

Ok, awaiting for your results…

4

Are you using ionic 2 or ionic1

5

Ionic 1. The method fired the controller function…but document.getElementById(‘tabA’).disabled = false ; did not re-enable the tab - yet other variables and current tab features were changed as a result of the controller function firing. Still working on it.

6

Ok I will also check for the alternatives and reply back on this thread.

7

its almost as if the <ion-tab id='tabA' disabled='true' ...> isn’t a part of the DOM. However, I can print its value to console.log, but not able to change it.

in my controller function I have:

console.log(document.getElementById(‘tabA’).disabled) ;
document.getElementById(‘tabA’)disabled = true ;
console.log(document.getElementById(‘tabA’).disabled) ;

Which prints to console:
undefined
false

The tab icon is DEF disabled. Thus, the must be some IONIC/AnglurJS add-on and NOT the standard DOM el.disabled definition.

8

I also tried with ng-disabled it did not work

9

I am analyzing this right now. http://plnkr.co/edit/PR0fqJnRHw9019EsFNLS?p=preview It is dynmaiclly building the tabs versus the static tabs IONIC uses. So I am trying to figure out how alter the active/disabled states of the ion-tab - defining an DOM id doesn’t work because the ‘disabled’ in the DOM is not the same as the <ion-tab disabled='true'>. Thus, from the controller, how can you manipulate the ion-tab states?

10

I know what needs to change and where it needs to change - I just can’t figure out how to call that Tabs ion-tab parameters.

11

We cannot manipulate the tab states. It will all the tabs will be loaded dynamically, We don’t have control over the tabs. I tried to load the tabs on a specific action did not work.

12

I think I am onto something, instead of defining the dom id, we need to define the [root] id, still not fully certain how to call it later though.

http://ionicframework.com/docs/v2/api/components/tabs/Tabs/

13

nope…above link is for Ionic v2. However, some degree of success with $ionicTabsDelegate - when the ion-tab is disabled, the icon is greyed (dulled) out. Then call in the controller: $ionicTabsDelegate.$getByHanlde(‘tabA’) - this triggers the tab to execute but still leaves the tab icon still greyed out.

Still can’t figure out how to simply make the icon active again. Very very frustrating.

14

Well, I tried to hide the tab though, Something like this:

<ion-tabs tabbarPlacement="bottom" preloadTabs="false" #paymentTabs>
            <ion-tab [root]="cars" [rootParams]="fooId" tabTitle="cars" tabIcon="pulse"></ion-tab>
            <ion-tab [root]="bikes" tabTitle="bikes" [rootParams]="fooId" tabIcon="analytics"></ion-tab>
            <ion-tab [root]="ships" tabTitle="ships" [rootParams]="fooId" tabIcon="card" ></ion-tab>
        </ion-tabs>

But this doesn’t hide the tab at all. But this works for buttons, div and <p>

15

I got mine working, I think you can take what you need from the below example to get yours working - you will need to create something like the following: - the method is the same for “hidden” or “disabled” tab attributes - you can see in the HTML section below how the same controllers/functions can apply to both hidden and disabled attributes:

app.js: - add a controller to your tabs template call:

.state('tab', {
url: "/tab",
abstract: true,
templateUrl: "templates/tabs.html",
controller: 'TabsCtrl'
  })

Then, in the “TabsCtrl” .controller:

.controller(‘TabsCtrl’, function($scope,$rootScope) {
$scope.tabControl = {
hideCars: true,
hideBikes: true,
hideShips: true
}

var refreshFinalizer = $rootScope.$on(‘updateTabsRefresh’, function (event, data) {
$scope.tabControl.hideCars = false;
$scope.tabControl.hideBikes= false ;
$scope.tabControl.hideShips= false ;
});

$scope.$on(‘$destroy’, function () {
refreshFinalizer ();
});
})

And then in your main tabs.html file (where you define all your tabs):

<ion-tabs tabbarPlacement="bottom" preloadTabs="false" #paymentTabs>
      <ion-tab hidden="tabControl.hideCars" [root]="cars" [rootParams]="fooId" tabTitle="cars" tabIcon="pulse"></ion-tab>
      <ion-tab disabled="tabControl.hideBikes" [root]="bikes" tabTitle="bikes" [rootParams]="fooId" tabIcon="analytics"></ion-tab>
     <ion-tab hidden="tabControl.hideShips" [root]="ships" tabTitle="ships" [rootParams]="fooId" tabIcon="card" ></ion-tab>
</ion-tabs>

And finally, in your one active/shown Tab that has your form is in, in that Tabs controller, perform your tests or conditions that will determine whether to hide/show or disable/enable your tabs: “hidden” literally hides or shows the tab whereas “disabled” will show the tab icon, but its disabled (greyed out) and can’t be clicked on.

  $rootScope.$broadcast('updateTabsRefresh');

Let me know how this works out for you…it mightnot be exactly what you need, but I think it will get you real close - I am pretty certain the above will hide/unhide tabs for you. I tested mine on simply disabling the tabs (visible but not able to click on them) and it works cleanly.

16

You don’t need to tag as disabled the tabs, just set the root as blank, problem solved!