How to add debounce on ion input in ionic

Ionic Framework ionic-v3
1

Hello All

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

1 Like
2

Google

3

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

4

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 https://angular.io/docs/ts/latest/api/core/index/DirectiveMetadata-class.html
 * for more info on Angular Directives.
 */
@Directive({
  selector: '[debounced-input][ngModel]' // Attribute selector
})
export class DebouncedInputDirective implements OnChanges {  

  @Input('ngModel') debouncedModel: any;  

  // Ref.: https://stackoverflow.com/questions/34990102/angular2-data-binding-for-custom-reusable-component
  // note that this must be named as the input name + "Change"
  // See https://blog.thoughtram.io/angular/2016/10/13/two-way-data-binding-in-angular-2.html
  @Output() debouncedModelChange: any = new EventEmitter();  
  
  modelChanged: Subject<any> = new Subject<any>();  
  modelChangeSubscription: Subscription;
  onChangesCallback: Function;

  private updateData(data: any) {    
    this.modelChanged.next(data);    
  }

  ngOnChanges(changes: SimpleChanges): void {  
    if('debouncedModel' in changes) {      
      this.updateData(changes.debouncedModel.currentValue);       
      this.onChangesCallback();              
    }    
  }
  ngOnDestroy() {
    this.modelChangeSubscription.unsubscribe();
  }  

  constructor(private ref: ChangeDetectorRef,
    private zone: NgZone) {  
    // Ref: https://www.lucidchart.com/techblog/2016/05/04/angular-2-best-practices-change-detector-performance/
    this.onChangesCallback = () => {
      zone.run(() => {
        ref.markForCheck();
      });
    };  

    // Ref.: https://stackoverflow.com/questions/32051273/angular-and-debounce
    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;
        this.debouncedModelChange.emit(data); 
    });
  }

}

In your html template you can use it like:

<ion-item>
	<ion-label floating>User</ion-label>
    <ion-input type="text" 
		debounced-input
		[(ngModel)]="user"
    ></ion-input>
</ion-item>

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

2 Likes
5

Done you a repo…

1 Like
6

thank you sir. really happy for your fast reply