I am developing a medical website , i want show alert in page of medicament.component.HTML when the quantity of medicaments is < 50 . I did this :
<span *ngFor="let medicament of medicaments" >
<span *ngIf="{{medicament.quantity}} < 50">
<div class="callout callout-danger lead">
<h4>Alert!</h4>
<p>Vous devez charger le stock de medicaments {{medicament.nom}}
de type {{medicament.type}} </p>
</div>
</span></span>
But i don't know why it doesn't work , the error is :
> Unhandled Promise rejection: Template parse errors:
TypeError: Cannot read property 'toUpperCase' of undefined ("<span
*ngIf="medicaments">
<span *ngFor="let medicament of medicaments" >
<span [ERROR ->]*ngIf="{{medicament.quantity}} < 50">
<div class="callout callout-danger lead">
"): MedicamentComponent@26:18
Can't bind to '*ngIf' since it isn't a known property of 'span'.
("<span *ngIf="medicaments">
<span *ngFor="let medicament of medicaments" >
<span [ERROR ->]*ngIf="{{medicament.quantity}} < 50">
<div class="callout callout-danger lead">
"): MedicamentComponent@26:18
You shouldn't use interpolation {{ }} in ngIf; it expects an expression:
<span *ngIf="medicament.quantity < 50">
ngIf is already in the angular context, which means, that you must remove the brackets {{}}
Here in your logs you can see the point of error:
<span [ERROR ->]*ngIf="{{medicament.quantity}} < 50">
and it is because you are using an expression on a property where you shouldn't. You just need to use property you are comparing:
<span *ngIf="medicament.quantity < 50">