How to add dynamic background color in ion-fab-button using ionic-v4?

Ionic Framework
1

I am using the ionic 4 fab button, in the fab button I want to set a dynamic background color.

here example code:

page.html

<!-- fab placed to the bottom end -->
<ion-fab vertical="bottom" horizontal="end" slot="fixed">
  <ion-fab-button [style.background.color]="currentColor" [style.color]="isColorLight(currentColor) ? 'black' : 'white'"
    size="small">
    <ion-icon name="color-palette"></ion-icon>
  </ion-fab-button>
  <ion-fab-list side="top">
    <ion-fab-button (click)="switchColor(i)" [style.background.color]="colors[i]"
      *ngFor="let color of colors; let i = index">
    </ion-fab-button>
  </ion-fab-list>
</ion-fab>

page.ts

colors: string[] = ['#000000', '#db0f0f', '#0fbf0f', '#35a3e8', '#FFFFFF'];
currentColor: string = this.colors[0];
::
::
switchColor(index: number) {
  this.currentColor = this.colors[index];
}

Also, I try [style.background-color]="currentColor" but it is not working.

2

try [style.backgroundColor]

3

fab-error

Not working

4

is the color of fab button changing if you give color in scss

5

Yes, working if I add style in the page.scss file

ion-fab-button {
  --background: #000000;
}

1fab-error

6

See if this helps

7

did you try [style.color] instead of background…

8

maybe not, just 2 min i will check

9

not working this too

10

do you want to change the background or the color of fab button…I suppose the color of fab button?

11

I want to change ion-fab-button background color

12

it is just color
ion-fab-button [color]="‘yourcolor’"

Here you can generate the code for the colors

13

@gokujy Did it work??

14

Well If I user as @danielmm1997 said but it’s working with var color. My question is I want to use custom color as in the question. Thank you for your time @PratikVaity and @danielmm1997

15

i think u can make your own colors in variable.scss and use them. i have never tried it though

16
2 Likes
17

this might help try it

18

I did as you said and it’s working good. thank you :slight_smile:

1 Like