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

@gokujy wrote:

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.

Posts: 5

Participants: 2

Read full topic