Add style to specific multiple divs using Angular

by

sorry I am new in angular and StackOverflow
I have 3 divs and I want to add background-color: red to all divs which status is requesting payment. It should make background color to the second and the third div but it makes to only the third

html

<div class="col-md-4 mb-4" *ngFor="let invoice of Invoices let i=index">
  <div id="{{'activeInvoice'+i}}" class=" d-flex justify-content-between align-items-center w-100  card-header ">
    <strong class="text-gray-dark">{{langVar.Invoice}} {{invoice.invoiceNumber}}</strong>
    <i class="fa fa-info-circle" title="show Details" aria-hidden="true" (click)="showInvoiceDetailsModal(invoice.id)"></i>
  </div>
</div>

for (var i = 0; i <= this.Invoices.length-1; i++) {
  console.log("invoice num", this.Invoices[i].invoiceNumber);
  console.log("order", this.Invoices[i].order.length);

  for (var j = 0; j <= this.Invoices[i].order.length - 1; j++) {
    console.log("STATUS", this.Invoices[i].order[j].status);
    if (this.Invoices[i].order[j].status == 'requestingPayment') {
      var elementValue = 'activeInvoice'+i;
      setTimeout(() => {
        document.getElementById(elementValue).classList.add("cardBackGround");
      }, 1000);
    }
    else {}
  }
}

24 thoughts on “Add style to specific multiple divs using Angular”

Leave a Comment