ngIf condition unstable with multiple data-bindings

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.
image

But when editing the input-field, the icon shows as following, even though the amount is still lower than the maximum amount:
image

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?

It could be caused by the ion-input returning a string even although the type is defined as a number.

This is a known problem reported in this forum back in 2016

2 Likes