Changing div color dynamically : Can't bind to 'color' since it isn't a known property of 'button'

Ionic Framework ionic-v3
1

Hi guys,
I am trying to change color of my div when user click on it.

export class Page1Page {
myColor: string ="";
//constructor
clickMethod(input) {
    switch (input) {
      case "A": {
        this.myColor = "primary";
        break;
      }.......
}

and there is how the view looks like:

<ion-grid>
    <ion-row align-items-start>
      <ion-col col-2  (click)="clickMethod('A')">
        <div  [color]="myColor">
          <br> <br>
          <ion-icon ios="ios-laptop" md="md-laptop"></ion-icon>
          Click Me <br> <br>
        </div>
      </ion-col>
.......

thar fire an error:

Can’t bind to ‘color’ since it isn’t a known property of ‘button’.

   <ion-row align-items-start>
      <ion-col>
        <div  col-2 [ERROR ->][color]="myColor">
          <br> <br>

How can i resolve this problem
i’am using ionic 2.4.3

2

you can use [style.color]

<ion-grid>
    <ion-row align-items-start>
      <ion-col col-2  (click)="clickMethod('A')">
        <div  [style.color]="myColor">
          <br> <br>
          <ion-icon ios="ios-laptop" md="md-laptop"></ion-icon>
          Click Me <br> <br>
        </div>
      </ion-col>
2 Likes
3

@MarcusIII it works. thank you

1 Like