Is it possible to disable a tab


Wanted to find out if it is possible to disable/hide a specific ion-tab and display it when something is set.

I tried the following:

<ion-tab ng-if="project" title="Stands" icon="icon ion-android-search" href="#/app/stand">

Where the ion-tabs is part of my app.html which is defined as the abstract state

.state('app', {
    url: "/app",
    abstract: true,
    templateUrl: "templates/app.html"

Are scope items exposed in such a way at that level

Many thanks

Sure, you can use ng-if on an element to show or hide it.

But from your code it’s not apparent what you’re doing with ‘project’ in the ng-if statement. It will always set as true so the tab will always display.

Lets say you use this in your controller:

if ( test_something == true ) {
   $scope.project = true;
} else {
   $scope.project = false;

And then you would use in your tabs:

<ion-tab ng-if="project=='true'" title="Stands"...

This will hide the tab when the condition in your controller tests as false, or show the tab if the condition in your controller tests as true.

@coen_warmer thanks for the response.

Forgive me for not being explicit enough. Just for testing purposes consider the following code:

// Setting up states
angular.module('app', ['ionic', 'app.controllers', ''])

.run(function($ionicPlatform) {
    $ionicPlatform.ready(function() {
        if(window.StatusBar) {
            // org.apache.cordova.statusbar required

.config(function($stateProvider, $urlRouterProvider) {


        .state('app', {
            url: "/app",
            abstract: true,
            templateUrl: "templates/app.html"

        .state('app.home', {
            url: '/home',
            views: {
                'app-home': {
                    templateUrl: 'templates/app-home.html',
                    controller: 'HomeController'



Then the app.html

<ion-tabs class="tabs-icon-top">

    <!-- Home Tab -->
    <ion-tab title="Home" icon="icon ion-home" href="#/app/home">
        <ion-nav-view name="app-home"></ion-nav-view>

    <!-- Stands Tab -->
    <ion-tab ng-if="project=='true'" title="Stands" icon="icon ion-android-search" href="#/app/stand">
        <ion-nav-view name="app-stand"></ion-nav-view>


app-home.html view:

<ion-view title="Nubb Offline">
    <ion-content class="has-header padding">
        <h1>Welcome home</h1>
        <p ng-if="project">Project has been set to {{project}}</p>

Then inside the controller:

angular.module('app.controllers', [])

.controller('HomeController', function($scope, Project) {
    $scope.project = true;

.controller('StandController', function($scope) {
    console.log('Welcome to stands');

Now if I change $scope.project = false; then the message does not display inside app-home view not inside the app.html view. Must be something I am missing with perhaps scope’s shared across multiple views or inside the abstract view.

Thanks for your help, appreciated.

You’re not calling StandController anywhere, not in your router setup or your partial.

You’re just setting $scope.project to true in your HomeController, which will lead the tab to display. If you set it to false, the tab won’t display.

I’m not clear on your question now: originally you wanted the tab to display conditionally based on something. Now you want some message to appear where?

Could you also set up a Plunker / Codepen with your code? That will lead to easier debugging / support.

@coen_warmer as it is in the example, I just wanted the display/not-display to work. ie to display the navtab or not display the navtab based on the setting in the HomeController. But even if I set it to true it does not display the tab at all. It is like app.html does not see $scope.project.

I will look at getting something up on Codepen or Plunker.


@coen_warmer I got a Codepen version going.

In the codepen sample I am just trying to get a simple case working, if a condition is met display the additional tab.

If you remove the ng-if from <ion-tab ng-if="displaySearchTab">...</ion-tab> the tab displays but somehow it is not registering that the displaySecondTab has been set inside the default controller.

@lvismer Your controller was tied to the wrong template view.

Check out this adjusted example:

What I did was create a new controller, and add that controller to the /app state. Now when you change the displaySearchTab variable to false, the tab won’t display. And when you set it to true, it will display.

@coen_warmer many thanks, will have a look. Will see how I transpose this to the real use case, ie. the idea is to expose the search tab only after a project has been set. So it would imply that the action for the form submit which is built via the ProjectController and app-project view will need to be the TabController.

That is correct.

If you can’t do your logic within the TabController, it is also possible to pass variables from one controller to another. You do that by using Services. Read up more here:

Good luck!

I had a similar issue. I was not able to disable clicks for ion tabs, but somehow I resolved that with the help of css.
you can override the style as

in ur customStyle.css

.disable-clickon-tabs .tab-nav.tabs {
    pointer-events: none !important;


in your tabs.html file

<ion-tabs class="tabs-icon-top tabs-color-active-calm tabs-dark disable-clickon-tabs">
      <ion-tab title="Home"></ion-tab>
      <ion-tab title="Contact"></ion-tab >

u can use the disable-clickon-tabs class with ng-class in the ion-tabs where u can apply the class only where you needed.