[Fixed] Angular Conditional in HTML does not like less than or greater than symbols

Issue

Simple question, cannot seem to find an answer…
(this will be a quick ‘point’ for someone)

I’m looking to have a condition in an Angular 5 ngIf be “less than” some variable.

<div class="row" *ngIf="Subject < 4" >
<div class="row" *ngIf="Subject <= 4" >

this syntax bombs because “<” – how can I do this? (without having to write function)?

Solution

*ngIf doesn’t work with ‘<=’ sign. Need to check equal(==), less than(<) and greater than(>) conditions separately with OR operator.

<div class="row" *ngIf="Subject<4 || Subject==4" >
  Row 1 (Rendered when Subject is lesser than or equal to 4)
</div>
<div class="row" *ngIf="Subject>4" >
  Row 2 (Rendered when Subject is greater than 4)
</div>

Some IDE might show ‘<‘ or ‘>’ sign in as syntax error while writing the code, because these are used for HTML tags also. But, it will not throw any compile or run time error.