Beta 14 NavBar not working with ngClass

[danjohnso]

When using ngClass to dynamically assign the nav bar color, the color is not applied.

ng-class="{ 'bar-assertive': isBarVisible, 'bar-clear': !isBarVisible }"

The class is applied when I use inspector, but something else must not get added in as just assigning bar-assertive works fine.

http://codepen.io/danda1man/pen/dPMBJL

[drewrygh]

Confirmed, working in beta-13

How are you using this? Are you switching the css class when you switch views, or is it being changed within a view? If you have are switching views, it may be easier to use a unique navbar for each view, see the "Alternate Usage" section of the navbar docs for an example.

[danjohnso]

I was using it on a view change , I did end up using a different navbar to work around it

[vader-dvt]

Having same problem :

is not displaying the selected color (yet the class is correctly being added to the view)

Just bellow I use :

and it it working as expected for the menu's header color.

[mvidailhet]

Having the same issue here with beta14. Even if the var is on the rootScope, the class is never changed.

[mvidailhet]

For those looking for a workaround until it's fixed, you can achieve this by adding or removing manually the class from the ion-nav-bar element:

var element = angular.element(document.querySelector('ion-nav-bar'));

element.addClass('your-class');

If you want to change the class when changing views, you can listen to the event $stateChangeStart on the rootScope:

$rootScope.$on('$stateChangeStart',
    (event, toState, toParams, fromState: any, fromParams): void => {
        // change class here
    });

Hope this helps

[vader-dvt]

Mhmm... it didn't even do the trick with your code in my controller ...

[timcosta]

I believe this is also an issue with ngStyle. Using ion-nav-bar.nav-title-slide-ios7(ng-style="{'background-color':GlobalConfig.baseHex}") I can inspect the element in chrome and see that the background-color has been applied to ion-nav-bar, but it is not visible on the background that is actually in view.

[reviyou]

Looks like it's an issue with release candidate as well, would be nice to hear back from ionic team about plans to address it hopefully. Workaround gets ugly very fast especially if you have caching and different styles for different pages - you should be mindful about which navigation bar you are trying to change our of 10 cached ones etc...

[JoeKomputer]

+1 I am running into this problem with rc.1

[michaeljonathan]

+1

I am getting this on Ionic 1.0.0. Having ngClass on the ion-nav-bar works perfectly fine DOM-wise (properly updates the classes on ion-nav-bar) but it doesn't update the classes of the Ionic generated element(s) ion-nav-bar > .nav-bar-block > ion-header-bar.

[ghost]

+1

Any workaround in the meantime?

[lonormaly]

+1

[mhartington]

#3896 should address this, but it won't get merged in until 1.1, being a big change. In the mean time, I have this demo that people can use.

http://codepen.io/mhartington/pen/dozjvv

[miickel]

Not sure if this was solved in 1.1, but it sure works for me.

jade

ion-nav-bar(
  ng-class="{ 'bar-transparent': isNavBarTransparent }"
)

css

.bar-transparent .bar.bar-header {
    background: transparent;
}

[mhartington]

Closing this for now. #3896 will allow this, but will be added in 1.1.

[emilyemorehouse]

@mhartington, was this added in 1.1? Didn't see it in the changelog.

[mhartington]

Unfortunately not it was not. Other feature too priority this time around, but as stated in the PR, you can already do this with a little bit of code.

http://codepen.io/mhartington/pen/dozjvv

[emilyemorehouse]

Yep, I grabbed the directive already. Works great with animations too, thanks!

[nateev]

Thanks @mhartington for the directive, however how to get it worked with dynamic value like
<ion-view nav-bar-class="bar-{{item.theme}}"> for example ?

[david-bulte]

@nateev I changed @mhartington's code a bit so you could use it with dynamic values. Mind you, I'm not sure what the "cacheNavBar" in the original solution is (I'm quite new to Ionic) and I left it out. So maybe there is room for improvement.

Here's the directive:

function NavBarClass() {

    var colors = ['positive', 'stable', 'light', 'royal', 'dark', 'assertive', 'calm', 'energized'];

    return {
        restrict : 'A',
        scope : {
            navBarClass : '='
        },
        link : function($scope) {
            var activeNavBar = document.querySelector('.nav-bar-block[nav-bar="active"]');
            var activeHeaderBar = activeNavBar.querySelector('.bar-header');

            cleanUp(activeHeaderBar);
            activeHeaderBar.classList.add('bar-' + $scope.navBarClass);
        }
    }

    function cleanUp(activeHeaderBar) {
        for (var i = 0; i < colors.length; i++) {
            activeHeaderBar.classList.remove('bar-' + colors[i]);
        }
    };

}

And this is how you'd use it:

<ion-view view-title="{{detailsCtrl.productClass.name}}" nav-bar-class="detailsCtrl.getColorClass()">

...where getColorClass() is a method on the Controller.

[theromis]

any progress on this issue?

[fahimshekaib]

I am using Angular1. I wana change the ion-nav-bar color by assigning alternate classes to it to render different colors based on a boolean variable at rootScope level depending on whether the device is set to receive push notification or not. I hope for a solution to ng-class usage issue in ion-nav-bar

[ashishbajaj99]

any updates?

[maxime1992]

@david-bulte I don't understand how to use your code and it would really help me :)

Can you give me more details please ?

I do have this :
<ion-nav-bar class="bar-dark" ng-class="menuCtrl.selectedMenu.color">

And the ng-class doesn't work.

I tried to patch ionic with this : 4ab30d2 but it's not working either

Thank you