The response: It varies depending on the component in use.
To begin with, a clear understanding of ionInput and ionChange is crucial. These are essentially EventEmitters defined within each component, leading to differences between them. For instance, ion-tabs utilizes ionChange to signal tab changes, while ion-input relies on it for input value alterations.
Moreover, not all components feature both ionInput and ionChange. While ion-input only supports ionInput, ion-searchbar accommodates both events.
Lastly, distinguishing between the functionality of ionInput and ionChange in ion-searchbar can be insightful. Consider running a brief 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 search value after 2s of page loading
setTimeout(()=>{
console.log("change from the code");
this.searchText = "222";
},2000)
}
Typing in the text box triggers both events, but only changing the value of searchText programmatically fires ionChange. Thus, in the ion-searchbar component, ionInput event occurs during user typing, while ionChange takes place when the textbox value changes.
Explore the live example