Dynamically change header background color

Ionic Framework ionic-v3
1

see this is my code, here i can add custom color for header , but dynamically, or conditionally how i can change header background color

like inline style i can’t apply here, below is my code

categories
2

no code my friend…

3

image
header.png866×302 19 KB

no code my friend…
[/quote]

> emphasized text

4

i think
[color]=myvar

5

but then u will need to make the val available for every page u want to change the color at

6

[color]=myvar, i have used like and in theme i have give color code, but the problem how i can change header color dynamically as per the condition, because in header bar i am not able to do the style or any class.

same page header i need to change condition base ,

Please advice,
Thanks

7

you need to use some ts file as provider for all of your preject.
you put the var there as public.
and in navbar you do(after putting it in the app constructor if im not mastaking):
[color]=myVars.navColor
then in every page you want you define the provider in your constructor like:
constructor(public myVars: MYVARS){

}

func(){
myVars.navColor=BLUE;
}

see also these guide:

8

its not working…

9

well you should learn how to use services (i think it is called directives in ionic)

it is working call i have a whole project built up with that.

search in youtube ionic directives. open youtube and start learning. here is not the place i can answer for it it is too long to show it.
if you study and then something is not working…i might can help…

10

i have made app with service, like in a provider and using that variable as globally…

here the issue is i am not able use any style or class in a header , in any other element i can use style and class…

here i am not able to change header background color , with some condition…

11

try this:
on the app.scss:
.menu-inner{
background-color: RED;
}

12

no bro, not working, just advice me how we can use any style,class or attribute in header …

13

Possible solution that works for me:
add class to header:

<ion-header-bar class="bar-positive bar bar-header" align-title="center" >

then open css file and add:

.bar.bar-positive{
    background-color: yourchoiceofcolor !important;
}
14

hi@rajeshtbabu
For what condition you want to change the color?

15

If you want to change dynamically, or conditionally the header background color, you can use:

In HTML file :
<ion-navbar [ngClass]='category'><ion-title>Your Title</ion-title></ion-navbar>

In Ts (or JS) file :

public category: any = {
    color1:true,
    color2:false,
    color3:false,
    color4:false
  };

In CSS file :

.color1 .toolbar-background {
  background-color: #0000ff;
}

.color2 .toolbar-background {
  background-color: #00ffff;
}

.color3 .toolbar-background {
  background-color: #ff0000;
}

.color4 .toolbar-background {
  background-color: #ff00ff;
}

When you turn the value of category on true, style is applied.

Have a good day

16

Hi thank,
here also we have to set header color, and that color only we have to choose dynamically…

my requirements, from admin side will change header color, that need to be load in app…

i have made something, its working now… will post …