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