Changing ion-navbar dynamically


I know we can now do <button [color]="newColor">. Do you know how to do it for <ion-navbar>? If it is not possible, do you know if it will eventually be?


1 Like

should work with ng-class:

<ion-nav-bar ng-class="{ 'bar-dark' : condition }">

@nicfo, have you really tried with Ionic 2 <ion-navbar> and [ngClass]? Can’t make it work.

<ion-nav-bar> is the v1 component for a navbar. For v2 it is <ion-navbar>. This is not currently possible if you don’t know the attribute name in advance, but yes it is something we need to support.

For example, if you know you want to add primary when true but don’t add it all otherwise, you can do:

<ion-navbar [attr.primary]="true ? '' : null">

Open issue on Angular for this here:

@brandyshea, I would see more something like

<ion-navbar [color]={{ navbar.color }}>

It would be nice! :smile:

1 Like

Yes, this is something we’re doing for buttons and it needs to be supported on navbar as well. I believe it will be something that needs to be added to most components.

1 Like

I use:

ngAfterViewInit() {‘navBarID’).elementRef.nativeElement.setAttribute(‘secondary’, true);


The that you use is of type App or IonicApp?

forget my question. I clicked to fast. It is IonicApp and working like a charm!


Do you know how to hide the navbar on pages with tabs on ionic 2?

There is currently no framework specific way to do it, but there is an issue here:

Hi @smlex2006,

Have you tried that code with beta 7? I did and got this:

ORIGINAL EXCEPTION: TypeError: Cannot read property 'elementRef' of undefined

any clue?

I just noticed that beta 7 does not getParam anymore for IonicApp. I need to use ViewChild, but it does not work


<ion-navbar *navbar #navBarId>


export class MyClass {
    @ViewChild(navBarId) _navbar: Navbar;


    ngAfterViewInit() {

this._navbar is undefined and I don’t know what to put next to change the navbar color like suggested here

Hey Brandy was the ionic team able to create something along the lines of <ion-navbar [color]=myColor> ?

Your workaround works but requires quite a bit extra code.

My plunk for the bellow code can be found Here

I pass the color I want my home page nav bar to be from my tabs page. The options are red, blue, or green.

In order to make the nav bar dynamic I have to add 3 attributes to the navbar:

<ion-navbar [attr.primary]="blue ? '' : null" [attr.secondary]="green ? '' : null" [attr.danger]="red ? '' : null">

And then have a switch case to set the properties true in my constructor:

this.theme =; = false; = false; = false;

switch (this.theme) {
	case "danger": = true;
	case "secondary": = true;
		default: = true
	}default: = true

While my button can easily be bound without having to use to switch statement:
<button [color]="theme">I change too!</button>

Like I said it works but it takes a bit extra work.