CODEWITHSUNDEEP
ionic-frameworksass
SleeplessFox
SleeplessFox

Reputation: 183

Ionic navbar color dynamically

I get a color string from my server and will change the ion-navbar background navbar dynamically. How can I set the navbar bg color to the color from the variable string?

I know it is possible with fixed defined colors in the variables.scss but I just get the color string e.g. '#00000' from the server so that I cant add it to the variable.scss before.

I tired something like that:

<ion-header>
   <team-header [teamColor]="team.teamColor"></team-header>
</ion-header>

-------- header.ts ---------------

@Component({
  selector: 'team-header',
  templateUrl: 'teamheader.html'
})

export class TeamheaderComponent {

@Input() teamColor;

constructor(public navCtrl: NavController, public viewCtrl: ViewController) {
}

-------- teamheader.html----------- ------------------

<ion-navbar [style.background-color]="teamColor">
...
</ion-navbar>

But it doesnt work. How can I change the color dynamically?

Upvotes: 0

Views: 160

Answers (2)

Renata
Renata

Reputation: 186

Maybe it's not the best solution, but it worked for me when I changed the property backgroundcolor of the title class.

home.html

    <ion-header>
        <ion-navbar>
            <ion-title>Home</ion-title>
        </ion-navbar>
    </ion-header>

home.ts

import { Component, ElementRef } from '@angular/core';
import { NavController, Platform } from 'ionic-angular';

@Component({
    selector: 'page-home',
    templateUrl: 'home.html'
})

export class HomePage {

    constructor(public navCtrl: NavController,
        public platform: Platform,
        public element: ElementRef) {

        this.platform.ready().then(() => {
            let el = this.element.nativeElement
            el = document.getElementsByClassName("title")[0]
            el.style.background = 'red';
        })

    }

}

Upvotes: 1

Chad Nehemiah
Chad Nehemiah

Reputation: 881

This seems far from ideal, I would not suggest using server-side code to determine your styling, but in any case, you could try 

<ion-header>
   <team-header [color]="teamColor"></team-header>
</ion-header>

Upvotes: 0

Related Questions