I have an Ion-icon which is visible based on a condition. The property used in this condition is bound to 2 elements. They all react properly, the values are correct, but the icon shows incorrectly.
the code:
<ion-item>
<p>Bedrag in Euro's {{withdraw.amount}}, {{max}}</p>
<ion-icon *ngIf="withdraw.amount > max" item-end name="alert" (click)="showErrorMessage()" color="error"></ion-icon>
</ion-item>
<ion-item class="withdrawitem">
<ion-input type="number" placeholder="Bedrag" [(ngModel)]="withdraw.amount"></ion-input>
</ion-item>
<ion-item class="withdrawitem">
<ion-range min="1" [max]="max" [step]="max/15" color="secondary" (ionChange)="amountChanged($event)" [(ngModel)]="withdraw.amount">
</ion-range>
</ion-item>
example result when using the slider --> which is correct, due to the fact that the amount is lower than the maximum amount.
But when editing the input-field, the icon shows as following, even though the amount is still lower than the maximum amount:
The slider has the correct value, the text is showing the correct value, but the icon is visible until i use the slider again.
What is the reason behind this behaviour, and how do i fix this issue?