how do i add ngClass in angular need to show status active red and other should be inactive black

Question

how do I add ngClass in angular need to show current status active red color and others should be inactive black?

<div *ngFor="let item of status_history; let i = index">
  <div [ngClass]="checkStatusClass(i)">
      <span class="material-icons">check_circle</span>
      <span class="status_font">{{item?.invoice_status?.data[0]?.status}}</span>
      <div class="history-font">{{item?.updated_at}}</div>
  </div>
</div>

score 1 · Accepted Answer · answered Sep 29 '20 at 05:55

1

<div *ngFor="let item of status_history; let i = index">
  <div [ngClass]="{'icons_inactive' : (i+1) === status_history.length, 'icons_active': (i+1) !== status_history.length}">
      <span class="material-icons">check_circle</span>
      <span class="status_font">{{item?.invoice_status?.data[0]?.status}}</span>
      <div class="history-font">{{item?.updated_at}}</div>
  </div>
</div>

Have you tried this?

answered Sep 29 '20 at 05:55

arbghl

358
2
14

not working @arbghl – Abid Sep 29 '20 at 06:03
when you say latest state is active, does that mean that it will be the first element in the status_history array? if that is the case then you can do
– arbghl Sep 29 '20 at 06:10
@Abid "not working" is not a response, explain your problem or detail your question. This `ngClass` statement as far as I can tell is equal to the function you wrote – Sep 29 '20 at 06:13

score 0 · Answer 2 · answered Sep 29 '20 at 05:57

0

Try this (untested):

<div *ngFor="let item of status_history; let i = index">
  <div class="checkStatusClass(i)">
      <span class="material-icons">check_circle</span>
      <span class="status_font">{{item?.invoice_status?.data[0]?.status}}</span>
      <div class="history-font">{{item?.updated_at}}</div>
  </div>
</div>

answered Sep 29 '20 at 05:57

paulsm4

114,292
17
138
190

1

While this does work, using functions in your template is discouraged for performance reasons. – Sep 29 '20 at 06:08

how do i add ngClass in angular need to show status active red and other should be inactive black

2 Answers2