How to change ion-toolbar background dynamically - Ionic v4


I’m trying to change ion-toolbar color dynamically (I get the hexadecimal color from database), but not working.

I tried:

<ion-toolbar [style.background-color]="customColor"></ion-toolbar>
<ion-toolbar [color]="customColor"></ion-toolbar>

The [style.background-color] work with others components. How i change the toolbar color dynamically?
Thank you!

Have you tried

<ion-toolbar [ngStyle]="{ '--background': custom color }"></ion-toolbar>

Yes, but not working too :frowning:
I really need to change the color dynamically, without it being previously in the variables.

The edit doesn’t make sense to me. Are you sure you will have to add class="ion-color" ?

Try [ngStyle]="{'background-color': customColor}" and see if this works.

Yes, the [ngStyle]="{‘background-color’: customColor}" not work, see result:

When I added the class “ion-color” with [style.background-color] it works fine. See result:

I found the solution!!
Add the class “ion-color” and use [style.background-color] with your color variable.

<ion-toolbar class="ion-color" [style.background-color]="customColor"></ion-toolbar>

Weird, because neither worked in my case in my project. I added the following code in my scss file for a page and then it worked. Of course, the color is static.


Yes of course. So it works, my problem is that I needed it to be a dynamic color.

The way I quoted worked smoothly with me. I can not explain why it worked that way, I also do not think it makes sense, but it works.

1 Like