How to change ion-toolbar background dynamically - Ionic v4

Ionic Framework
1

Hello!

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!

2

Have you tried

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

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

4

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.

5

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

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

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>
3 Likes
6

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.

.toolbar-background{
	background-color:red;
}
7

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