Significant difference between ionInput and ionChange

Question

Q. What's the difference between (ionInput) and (ionChange)? In which circumstances, should I pick either one of them?

I've tried both code as shown below, and it gives the same result as I expected.

---

Example code using ionInput event

<ion-searchbar type="text" maxlength="18" placeholder="Search" debounce="0" 
 [(ngModel)]="usernameText" (ionInput)="findUserWithUsername()"></ion-searchbar> 

Example code using ionChange event

<ion-input type="text" maxlength="18" placeholder="Search" clearInput
 [(ngModel)]="usernameText" (ionChange)="findUserWithUsername()"></ion-input>

Answer 1

The answer is: It's depend on what component you are using.

First, you need to know, what is ionInput and ionChange. It is EventEmitter and it is definded inside each component. So it will be different between two components. ion-tabs has ionChange which will emit whenever the selected tab changed. ion-input has ionChange which will emit whenever the value of input changed. So these are completely different.

Second, not all components have ionInput. The same with ionChange.ion-input just only has ionInput. But ion-searchbar has both.

Finally, just find out the difference beetwen ionInput and ionChange of ion-searchbar. Lets create a small test:
In home.html:

<ion-searchbar placeholder="Search" debounce="0" (ngModel)]="searchText" (ionChange)="ionChange()" (ionInput)="ionInput()"></ion-searchbar>

In home.ts:

searchText = "111";
ionViewDidLoad(){
   //Change the searck value after 2s the page loaded  
   setTimeout(()=>{ 
      console.log("change from the code");
      this.searchText = "222";
   },2000)
}  

When user typing in the text box, both event fired. But when the value of searchText is changed by code, only ionChange fired. So we can conclude that in ion-searchbar component ionInput event fired whenever user typing in the textbox and ionChange fired whenever the value of textbox changed.

Here is the live example

Answer 2

I have tried (ionInput) but did not fired any event in it . then I tried (input) then it worked for me. So make sure you are correct at it or may be i am missing at some point.

Now difference between (input) & (ionChange)

• (input) : This event fires when user tries to enter value in input field, it will fire even when user copy same value and paste it in field. because it does not mater which value is get entered in it.
• (ionChange): This event fires only when user change value of input field. if user copy and paste same value it will not get fired.but if user enters different value then it will fire. because it matters values of input field.

Hope this information will help you.

Answer 3

Another significant difference is when you use the debounce property. debounce only affects ionChange but not ionInput. This can be handy in specific situations when you would like to perform certain operations before the ionChange event is triggered.

The effect of the debounce property is best felt when using [(ngModel)] on ion-searchbar, which has a default debounce of 250ms. When you use ionInput, the value will always omit the characters typed in the last 250ms, meaning ionChange would be ideal unless the debounce property is set to 0.