-1

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>
Abid
  • 117
  • 2
  • 11

2 Answers2

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?

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
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>
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