Ionic button with dynamic colors

Hi all, i have like hundred ionic buttons on a page which i need to change the back color dynamically. How to bind each button to an element of an array? or are there any better ways to do? thankyou for your advice

Please post code examples of what you have tried so far and specific explanations of how they are deficient.

Thank you for replying. My approach

in .html
<button ion-button [style.background-color]=‘getStatus(“A001”)’ > A001

in .ts
getStatus(para) {
let items = this.array;
let ret: string = “Green”;

    items.forEach((value, index) => {
        if (value.object == para) {
            if (condition1) {
                ret = "Green"
            } else if (condition2) {
                ret = "Orange"
            } else if (condition3) {
                ret = "Red";
        return ret;


It work for the when first initialized. any changes to data would not reflect on the page.

Assuming that “this.array” is an array of objects, I would add a “color” property to each of them and populate it however makes sense for your application. Then, you can do something like this:

<template ngFor let-foo [ngForOf]="array">
  <button ion-button [style.color]="foo.color">{{}}</button>

Can use associative array in ionic 2? Such as [style.color]=‘arr[“A01”].color’?

I believe so. I’m not entirely sure about HTML’s quoting rules, so I can’t say that that exact syntax will work, but I believe the underlying concept should be OK.

Thanks. the associative array way works