Can't display input value

Question

Trying to take user input and print calculated values

//html

<div class="empty">
<h5> Input Empty Total </h5>
    <ion-item>
        <ion-input placeholder="Enter Empties.." type="number" name="emptySeats" [(ngModel)]="emptySeats"> </ion-input>
    </ion-item>
</div>

<p> {{arenaCurrent}} </p>

//js

arenaTotal: number = 1000;
emptySeats: number;
arenaCurrent: number;

constructor() {
    this.arenaCurrent = this.arenaTotal - this.emptySeats;
 }

arenaCurrent will print 1000 - emptySeats (user input)

Answer 1

Use (ionChange) to display the result.

<div class="empty">
     <h5> Input Empty Total </h5>
      <ion-item>
      <ion-input (ionChange)="change()" placeholder="Enter Empties.." type="number" name="emptySeats"[(ngModel)]="emptySeats"> </ion-input>
        </ion-item>
    </div>    
    <p> {{arenaCurrent}} </p>

In javascript call the function change.

arenaTotal: number = 1000;
emptySeats: number;
arenaCurrent: number;
constructor() {}
change(){
    this.arenaCurrent = this.arenaTotal - this.emptySeats;
}

The above will update the result instantly when user inputs value in ion-input.

Answer 2

You're doing the math only once in the constructor, you probably want to make it a property. This way the template can remain unchanged but the value will update whenever either arenaTotal or emptySeats changes.

arenaTotal: number = 1000;
emptySeats: number;

get arenaCurrent() {
    return this.arenaTotal - this.emptySeats;
}

constructor() {}

Answer 3

You can try something like this #emptySeats="ngModel" in you ion-input tag

<div class="empty">
<h5> Input Empty Total </h5>
    <ion-item>
        <ion-input placeholder="Enter Empties.." type="number" name="emptySeats" [(ngModel)]="emptySeats" #emptySeats="ngModel"> </ion-input>
    </ion-item>
</div>

<p> {{arenaCurrent}} </p>