Search code examples
angular

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

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.