Ionic button with dynamic colors

Ionic Framework ionic-v3
1

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

2

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

3

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.

4

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">{{foo.name}}</button>
</template>
5

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

6

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.

7

Thanks. the associative array way works