CODEWITHSUNDEEP
angularionic-framework
Sahil
Sahil

Reputation: 553

how to display ion-item in ion-row with alternate color in it?

<ion-row   *ngFor="let box of Boxes"   >
  <ion-col col-9>
  <ion-item  >
  {{box}}
  </ion-item>
  </ion-col>
  <ion-col col-3>
      <ion-checkbox></ion-checkbox>
  </ion-col>

</ion-row>

How to display item in alternate color ? alternate color for every row item.?

Upvotes: 7

Views: 10842

Answers (3)

Utpaul
Utpaul

Reputation: 2007

Try this:

.html

<ion-row   *ngFor="let box of Boxes">
    <ion-col col-9>
        <ion-item  class="custom-bg">
            {{box}}
        </ion-item>
    </ion-col>
    <ion-col col-3>
        <ion-checkbox></ion-checkbox>
    </ion-col>
</ion-row>

.scss

.row-custom-bg:nth-of-type(even) {
    background: green;
}
.row-custom-bg:nth-of-type(odd) {
    background: blue;
}

I think it will be helpful..

Upvotes: 1

AddWeb Solution Pvt Ltd
AddWeb Solution Pvt Ltd

Reputation: 21681

Try this:

.html

<ion-row   *ngFor="let box of Boxes; let i = index;">
    <ion-col col-9>
        <ion-item  [ngClass]="(i % 2 == 0) ? 'odd' : 'even'">
            {{box}}
        </ion-item>
    </ion-col>
    <ion-col col-3>
        <ion-checkbox></ion-checkbox>
    </ion-col>
</ion-row>

.scss

.odd{
  color: blue;
}
.even{
  color: green;
}

Upvotes: 14

Ankit Kapoor
Ankit Kapoor

Reputation: 1754

You can use even odd properties of ngFor

<ion-row   *ngFor="let box of Boxes; let odd=odd; let even=even;
[ngClass]="{ odd: oddStyleClass, even: evenStyleClass }   >

Here oddStyleClass and evenStyleClass will define background color or any other style you want to apply

Upvotes: 0

Related Questions