CODEWITHSUNDEEP
javascripthtmlangular
eric.dummy
eric.dummy

Reputation: 399

How can I listen to the change in input and then change the text?

I have this code in HTML:

<label for="date">START DATE:
    <input id="date" name="date" type="number"> <span>days</span>
<label>

Now I want to make that if a user inputs 1 as a value in the input the span should change into the day, and if it has more than 1 day it should remain days. How can I make this with *ngIf?

Thanks.

Upvotes: 1

Views: 54

Answers (2)

Imants Volkovs
Imants Volkovs

Reputation: 836

It can be done with ngIf directive, but still that seems wrong approach. In my opinion you can change value in code and just display it in span tag, but it seems you have certain task to do it with ifs

<input id="date" name="date" type="number" [(ngModel)]="selectedNumber">
<span *ngIf="selectedNumber==1">day</span>
<span *ngIf="selectedNumber!=1">day</span>

Upvotes: 1

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657118

update

<input id="date" name="date" type="number" #myInput>
<span>day{{myInput.value <= 1 ? '' : 's'}}</span>

original

<input ngModel (ngModelChange)="doSomething($event)" id="date" name="date" type="number"> <span>days</span>

With this form you can bind to a field. If the field is a getter/setter, then you can also execute code when the value changes:

<input [(ngModel)]="someprop"" id="date" name="date" type="number"> <span>days</span>

You can also use 

<input (change)="doSomething($event)" id="date" name="date" type="number"> <span>days</span>

or

<input (input)="doSomething($event)" id="date" name="date" type="number"> <span>days</span>

Upvotes: 1

Related Questions