title: Dynamically set background color of ion-item in an ion-list
body: <p>I'm attempting to set the background color of an &lt;ion-item&gt; component in an Angular application but I can't seem to get it working with code.</p>
  <p>If I view the page and manually change the css of the element to have <code>--background: red</code> in the browser then it works as seen below.</p>
  <p><a href="https://i.stack.imgur.com/cMQ16.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cMQ16.png" alt="enter image description here" /></a></p>
  <p>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.</p>
  <pre><code>&lt;ion-list inset *ngIf=&quot;socketService.connected$ | async&quot;&gt;
    &lt;ion-item
      *ngFor=&quot;let user of users$ | async&quot;
      button
      (click)=&quot;selectUser(user)&quot;
      [ngStyle]=&quot;{ '--background': user.color }&quot;
    &gt;
      &lt;ion-label color=&quot;primary&quot;&gt;{{user.name}}&lt;/ion-label&gt;
    &lt;/ion-item&gt;
  &lt;/ion-list&gt;
  </code></pre>
  <p>I've also moved the expression bound to <code>[ngStyle]</code> to a method that returns an object just so I can make sure that proper css is being returned and it is. <code>user.color</code> is a hex color in the form <code>#XXXXXX</code></p>