CODEWITHSUNDEEP
angularionic-frameworkionic5
kamcknig
kamcknig

Reputation: 925

Dynamically set background color of ion-item in an ion-list

I'm attempting to set the background color of an <ion-item> component in an Angular application but I can't seem to get it working with code.

If I view the page and manually change the css of the element to have --background: red in the browser then it works as seen below.

enter image description here

However, if I try to change it via code then the CSS doesn't show up at all in the browser on the element and of course the color isn't changed.

<ion-list inset *ngIf="socketService.connected$ | async">
  <ion-item
    *ngFor="let user of users$ | async"
    button
    (click)="selectUser(user)"
    [ngStyle]="{ '--background': user.color }"
  >
    <ion-label color="primary">{{user.name}}</ion-label>
  </ion-item>
</ion-list>

I've also moved the expression bound to [ngStyle] to a method that returns an object just so I can make sure that proper css is being returned and it is. user.color is a hex color in the form #XXXXXX

Upvotes: 0

Views: 1655

Answers (2)

jplattus
jplattus

Reputation: 341

IONIC VUE

You can use :style directive:

<ion-item :style="{'--background': 'yellow'}">...<ion-item>

Upvotes: 0

kamcknig
kamcknig

Reputation: 925

Using [style.--background]="user.color" on the ion-item worked. I guess Angular was removing the style since it started with --

Upvotes: 1

Related Questions