Significant difference between ionInput and ionChange
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.
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
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.