In some cases, System has to provide suggestions to user while user typing. Sending request for each and every request to server will be overhead. So sending request to server when user finishes typing will give good performance. We can detect whether user typing or finished his typing by delaying the change event.
Markup
displayName function will be triggered when user changes input
<input (ngModelChange)="displayName()" [(ngModel)]="name"/>
Script - app.component.ts
Observe below displayName function
import { Component } from '@angular/core'; import { NgZone } from '@angular/core'; @Component({ selector: 'my-app', template: ` <h4>Type something in below text box</h4> <input (ngModelChange)="displayName()" [(ngModel)]="name"/> <h4>Value : {{name1}} </h4> ` }) export class AppComponent { name: string = ''; name1: string = ''; _timeout: any = null; constructor(public lc: NgZone) { } displayName() { this._timeout = null; if(this._timeout){ //if there is already a timeout in process cancel it window.clearTimeout(this._timeout); } this._timeout = window.setTimeout(() => { this._timeout = null; this.lc.run(() => this.name1 = this.name); },1000); } }
Nice work man, but I think you need to remove `this._timeout = null;` before your `if(this._timeout){` as it will always be null
ReplyDeletePrevious comment is right.
ReplyDeleteApart from that it works perfect, thanks for your solution!
Thank you very much for your help
ReplyDeletemark anthony elbambo is right
ReplyDeleteThanks for the help
Jacques would turn into a vegetable in the event of an activity. One evening, in transit to the emergency clinic, I got a call from his mom who said that he was in the pains of death. I hurried to the emergency clinic. floral backdrop
ReplyDelete