CODEWITHSUNDEEP
javascriptangulartypescript
Panda
Panda

Reputation: 415

How to disabled the div in ngClass with boolean true or false in angular

displayData = [
  {
    status: 'CLOSED', ack: false
  },
  {
    status: 'ESCALATED', ack: false
  },
  {
    status: 'ACK', ack: false
  },
  {
    status: 'ACK', ack: true
  },
  {
    status: 'NEW', ack: true
  }
]

and what I want to do here is when the status is 'NEW' and his ack is 'true' is will not disabled the div. if the status is 'CLOSED', 'ACK', 'ESCALATED' even their ack is 'false' it will not disabled the disabled the div. even if the status is 'ACK' and its ack is 'true' then it will also not disabled the

<div class="action-default"
[ngClass] = "!['CLOSED', 'ESCALATED', 'ACK', 'NEW'].includes(dataDisplayed?.status) ? 'disabled' : ''" >
  <i nz - icon nzType = "close-circle" nzTheme = "outline" > </i>
Cancel
  < /div>

Upvotes: 0

Views: 258

Answers (1)

BadPiggie
BadPiggie

Reputation: 6369

The dataDisplayed is an Array of Objects, So you cannot access the property status like dataDisplayed?.status. You need to get the each individual object before access the property.

And according to your explanation, You need to check status and ask, But here you are only checking status.

Your code should be like

<div 
  class="action-default"
  *ngFor="let data of dataDisplayed"
  [ngClass] = "((['CLOSED', 'ESCALATED', 'ACK'].includes(data.status) && data.ack) || (data.status === 'NEW' && !data.ack)) ? 'disabled' : ''" >
  <i nz - icon nzType = "close-circle" nzTheme = "outline" ></i>
  Cancel
</div>

Upvotes: 1

Related Questions