How to add debounce on ion input in ionic

Hello All

is there any way to add debounce on ion input in ionic 3

1 Like


thank you sir. is there any ionic way as like ionic 3 allow for search bar ?

I coded a directive once that may work for you:

import { Directive, Input, Output, EventEmitter, HostListener, ChangeDetectorRef, NgZone, OnChanges, SimpleChanges } from '@angular/core';
import { Subject } from "rxjs/Subject";
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/distinctUntilChanged';
import { Subscription } from "rxjs/Subscription";

 * Generated class for the DebouncedInputDirective directive.
 * See
 * for more info on Angular Directives.
  selector: '[debounced-input][ngModel]' // Attribute selector
export class DebouncedInputDirective implements OnChanges {  

  @Input('ngModel') debouncedModel: any;  

  // Ref.:
  // note that this must be named as the input name + "Change"
  // See
  @Output() debouncedModelChange: any = new EventEmitter();  
  modelChanged: Subject<any> = new Subject<any>();  
  modelChangeSubscription: Subscription;
  onChangesCallback: Function;

  private updateData(data: any) {;    

  ngOnChanges(changes: SimpleChanges): void {  
    if('debouncedModel' in changes) {      
  ngOnDestroy() {

  constructor(private ref: ChangeDetectorRef,
    private zone: NgZone) {  
    // Ref:
    this.onChangesCallback = () => { => {

    // Ref.:
    this.modelChangeSubscription = this.modelChanged
    .debounceTime(300) // wait 300ms after the last event before emitting last event
    .distinctUntilChanged() // only emit if value is different from previous value     
    .subscribe(data => {      
        this.debouncedModel = data;


In your html template you can use it like:

	<ion-label floating>User</ion-label>
    <ion-input type="text" 

Edit, adjust, or use as a code base as needed.
Best regards.
José Ignacio


Done you a repo…

1 Like

thank you sir. really happy for your fast reply