Different ion-card Background Color based on Value of ion-input

@rafidahputrih wrote:

How to create a different ion-card background color based on value of ion-input?
This is my .html

<ion-content padding>
  <ion-input [(ngModel)]="cStatus" type="hidden" value="Diterima"></ion-input>
  <ion-card [ngStyle]="{ 'background-color' : colorCard}" padding>
    {{cStatus}}
  </ion-card>
</ion-content>

and this is my .ts

export class PinjamanRiwayatPage {

  cStatus: string;
  colorCard: any;

  constructor(public navCtrl: NavController, public navParams: NavParams) {
    status = this.cStatus;
    this.setCardBgColor(status);
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad PinjamanRiwayatPage');
  }

  setCardBgColor(status){
    if(status == "Diterima"){
      this.colorCard = "#8CB369";
    }
    else if(status == "Ditolak"){
      this.colorCard = "#BC4B51";
    }
    else if(status == "Menunggu"){
      this.colorCard = "#F4E285";
    }
  }
}

Posts: 1

Participants: 1

Read full topic