how do i set a style attribute value from an object data?

Question

I thought this was pretty easy, but i don't have a clue of how to make it work, my last try is on the style attribute in the button tag, i've searched the web for like and hour and nothing works.

<ion-header>

  <ion-navbar color="danger">
    <ion-title>Cadenas</ion-title>
  </ion-navbar>

</ion-header>


<ion-content  container class="card-cadenasmercados">

  <button id="sucursal"
          *ngFor="let cadena of cadenasCollection"
          [navPush]="sucursalesPage"
          [navParams]="cadena"
          style:background='{{cadena.img}}'>
    {{cadena.nombre}}</button>

</ion-content>

Answer 1

You can use ngStyle: https://angular.io/api/common/NgStyle

<button id="sucursal"
          *ngFor="let cadena of cadenasCollection"
          [navPush]="sucursalesPage"
          [navParams]="cadena"
          [ngStyle]="{'background': cadena.img}">
    {{cadena.nombre}}</button>

this assumes cadena.img is something like "url(someimage.png)"