How I can change ion-card background for even, odd and other type

Question

I'm stuck here in a part of my job, I want the ion-card to have one color when it's odd and another when it's even. However, when the status = alert, I need it to turn red. I believe there's something wrong with the code and I'm not finding the error.

In my code I can already set the pair and odd, I just can't change the background color. Any ideas on how to solve my problem?

home.html

<ion-list>    
  <ion-item-sliding *ngFor="let house of houses;">   
    <ion-card class="cards">
      <ion-card-header class="card-header">
        <ion-card-title class="card-title" [ngStyle]="{'background':getColor()}"> {{ home.number}} </ion-card-title>
      </ion-card-header>
    </ion-card>
  </ion-item-sliding>
</ion-list>

home.ts

   getColor() {
    var status: string;
    var x;

    for (x = 0; x < this.houses.length; x++) {
      if ((x % 2) == 0) {
        status = 'even';
      } else {
        status = 'odd';
      }
    }

    switch (status) {
      case 'even':
        return 'Blue';
      case 'odd':
        return 'LightBlue';
      case 'alert':
        return 'Red';
    }
   }

score 1 · Answer 1 · answered Jun 24 '20 at 12:27

Changing your ngStyle and *ngFor attribute to this should work for you:

<ion-list>    
  <ion-item-sliding *ngFor="let house of houses; let i = index;">   
    <ion-card class="cards">
      <ion-card-header class="card-header">
        <ion-card-title class="card-title" [ngStyle]="{'background':  status === 'alert' ? 'Red' : ( i % 2 === 0 ? 'Blue' : 'LightBlue' ) }"> {{ home.number}} </ion-card-title>
      </ion-card-header>
    </ion-card>
  </ion-item-sliding>
</ion-list>

You don't need to have getColor() function in the .ts file. That just adds a lot of unnecessary load on your component.

Nicho · Answer 2 · 2020-06-26T08:17:29.150

if you only want to change color base on odd and even u can do something like this on html file :

      <ion-list>    
        <ion-item-sliding *ngFor="let house of houses;let i = index;">   
          <ion-card class="cards">
            <ion-card-header class="card-header">
              <ion-card-title class="card-title" [ngStyle]="{'background':getColor((i+1))}"> {{ house.number}} </ion-card-title>
            </ion-card-header>
          </ion-card>
        </ion-item-sliding>
      </ion-list>

on ts file :

getColor(i) {
    var status: string;   
       
    if (i % 2 == 0) {
      status = 'even'
    } else {
      status = 'odd'
    }

    switch (status) {
      case 'even':
        return 'Blue';
      case 'odd':
        return 'LightBlue';
      case 'alert':
        return 'Red';
    }
   }

result :

score 0 · Answer 3 · answered Jun 24 '20 at 05:28

<ion-list *ngFor="let house of houses;let i = index;"> 
  <ion-item-sliding >   
    <ion-card class="cards">
      <ion-card-header class="card-header">
        <ion-card-title class="card-title" [ngStyle]="{'background':  i % 2 == 0 ? 'blue' : 'red' }"> {{ home.number}} </ion-card-title>
      </ion-card-header>
    </ion-card>
  </ion-item-sliding>
</ion-list>

score 0 · Answer 4 · answered Jun 24 '20 at 06:45

ngFor is pretty strong, you do not need any logic to give style/class from ts you can do it from within html. You can use the two variable even & odd. You can see the usage below:

*ngFor="let house of houses; let even = even; let odd = odd"

then in your ion-card

<ion-card-title class="card-title" [ngClass]="{ odd: odd, even: even }"> {{ house.number}} </ion-card-title>

So as a result ngClass will add relevant odd or even class to relevant rows

For status alert you can give additional class the same way with ngClass if status == alert etc.

How I can change ion-card background for even, odd and other type

4 Answers4