Change class dynamically in Angular

Question

I have a list which renders dynamically using a ngFor directive. The data comes from an SQL Lite DB. I am trying to append a class to each list item based on the data present. i.e if the list item is an "Expense" then append a red class, if the list item is an "Income" then append a green class. I have found a similar question here but it only checks for true/false and not exact text.

My code is as follows

<ion-item-sliding *ngFor="let expense of expenses; let i=index">
  <ion-item nopadding [ngStyle]="{greenClass: expense.type==='Income', redClass: expense.type==='Expense'}">
    <p>
      <span>Day of month: {{expense.day}}</span><br>
      Type: {{expense.type}}<br>
      Description: {{expense.description}}
    </p>
    <h3 item-end>
      Amount: R{{expense.amount}}
    </h3>
  </ion-item>
</ion-item-sliding>

You should use [ngClass] instead of [ngStyle]

Harun Yilmaz
– Harun Yilmaz

2019-01-08 07:37:41 +00:00
Commented Jan 8, 2019 at 7:37 — Harun Yilmaz
– Harun Yilmaz, Commented Jan 8, 2019 at 7:37
oops thanks, my bad

RRB
– RRB

2019-01-08 07:39:12 +00:00
Commented Jan 8, 2019 at 7:39 — RRB
– RRB, Commented Jan 8, 2019 at 7:39

Yashwardhan Pauranik · Accepted Answer · 2019-01-08 07:38:21Z

3

You are using ngStyle instead of ngClass.

<ion-item-sliding *ngFor="let expense of expenses; let i=index">
  <ion-item nopadding [ngClass]="{greenClass: expense.type==='Income', redClass: expense.type==='Expense'}">
    ...
  </ion-item>
</ion-item-sliding>

answered Jan 8, 2019 at 7:38

Yashwardhan Pauranik

5,5865 gold badges45 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Change class dynamically in Angular

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related