Angular 2 “ng-style” within “*ngFor” background color change

Question

I am trying to apply background colors using ng-style. Each row of list is generated using ngFor. Each item having separate background colors

<ion-item class="category-list" *ngFor="let item of character['items']">
   <ion-avatar item-left>
  <i class="icon" [ngStyle]="{'background-color': item.bgcolor}"><img src="../img/icons/category/{{item.img}}.png"></i>
  </ion-avatar>
    <h2>{{item.category}}</h2>
  </ion-item>

And the Typescript.ts:

 var characters = [
  {
    name: 'Gollum',
    quote: 'Sneaky little hobbitses!',
   items: [
      { bgcolor: 'fb9667', img: 'airTicket', category: 'Air tickets' },
      { bgcolor: '000000', img: 'airTicket', category: 'Beauty/Fitness'},
      { bgcolor: '0b9660', img: 'airTicket', category: 'Bike'}
    ]
  },
]

Don't know how to apply color code to list.

Answer 1

You can change the background colour using [style.backgroundColor]:

<i class="icon" [style.backgroundColor]="item.bgcolor"></i>

If of course the string in item.bgcolor is a valid css colour string:

#FFFFFF white rgb(255,255,255) rgba(255,255,255,1)

Which in your case isn't.. You are missing the leading # and you should change your item list to this:

items: [
      { bgcolor: '#fb9667', img: 'airTicket', category: 'Air tickets' },
      { bgcolor: '#000000', img: 'airTicket', category: 'Beauty/Fitness'},
      { bgcolor: '#0b9660', img: 'airTicket', category: 'Bike'}
]