Angular Check if property exists within template

Question

I have an HTML table and its rows are being generated by an ngFor loop. I need to add a class to these table cells if some criteria is met.

The issue is that that I need to check if the value of a property is empty AND see if the property even if the property even exists in the first place.

<tbody>
 <tr *ngFor="let e of (modalData.compareData | filter: filterString)">
  <td [class.success]="e.NewRuleVersionID === ''">{{ (e.OldRuleVersionID ? e.OldRuleVersionID  : 'New') }}</td>
  <td [class.success]="e.NewRuleVersionID === ''">{{ (e.OldOutcome ? e.OldOutcome : 'New') }}</td>
  <td [class.danger]="e.OldRuleVersionID === ''">{{ (e.NewRuleVersionID ? e.NewRuleVersionID : 'Removed') }}</td>
  <td [class.danger]="e.OldRuleVersionID === ''">{{ (e.NewOutcome ? e.NewOutcome : 'Removed') }}</td>
 </tr>
</tbody>

In the above code, I am adding a class to those cells if the value doesn't exist. However, there are some records where that property doesn't exist at all. Can this be checked inline within the template so I can account for it?

Yeah, it should however I am not able to change the structure of the data which is why I was trying to check the property it self for this issue. — SBB
– SBB, Commented Oct 17, 2017 at 20:44

Pankaj Parkar · Accepted Answer · 2017-10-17 20:47:35Z

2

You could check

[class.success]="e?.NewRuleVersionID?.length >= 0"

You could also move template code to Component.

[class.success]="checkProp(e?.NewRuleVersionID)"

Code

checkProp(value){
   return value && value.length > 0;
}

answered Oct 17, 2017 at 20:47

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

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

Collectives™ on Stack Overflow

Angular Check if property exists within template

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related