CODEWITHSUNDEEP
angularjstypescriptangularionic2
Marc-André Therrien
Marc-André Therrien

Reputation: 549

Angular 2 ngModel value not updating fast enough using ionic

I have a ion-searchbar that looks like this

<ion-searchbar [(ngModel)]="searchQuery" (keyup.enter)="search();"></ion-searchbar>

and the searchQuery is defined in my typescript file like this

export class SearchPage {
  searchQuery: string; 

  constructor(){}

  search() {
   this.service.search(this.searchQuery).subscribe(
     data => this.searchResults = data,
     error => {
       //something
     }, () => {
       //something
     }
   );
  }
 }

The problem is that if I change the value too fast and I press Enter, the value of searchQuery is not updated. For example, if I search "test" and I wait two seconds it will work. If I then search "testing" and I type it fast and press Enter right away, the value will still be "test". Now, I know this sounds weird, but it is really happening!

Any ideas why the value is not changed as soon as I type something?

Thank you

Upvotes: 5

Views: 1112

Answers (3)

tfrascaroli
tfrascaroli

Reputation: 1219

This is how I did it, based on the documentation for ion-searchbar:

<ion-searchbar #searchBar [debounce]="50" (ionChange)="search(searchBar.value)">
</ion-searchbar>

and in the TS file:

search(value: string) {
    // do something with value
}

Explanation:

It's pretty self-explanatory, but here it is. The #searchBar creates a 'hook' for the element (sort of a 'self', or 'this', but named). We then use the property value from ion-searchbar to pass it to our function. The last thing is modifying the [debounce] property to make it update faster (but it will trigger more times when people write fast - use with discretion).

Upvotes: 2

mayur
mayur

Reputation: 3618

In Html try this event change

  <form [ngFormModel]="searchForm" (ngSubmit)="search()">
      <ion-searchbar [(ngModel)]="searchQuery" (keyup)="search()"></ion-searchbar>
        <button type="submit" block>Submit</button>
   </form>

Even check here might this help

In ts trim the value

  this.service.search(this.searchQuery.trim()).subscribe(.....)

Upvotes: 2

sebaferreras
sebaferreras

Reputation: 44659

Something you can do to improve the way the search bar is being handled is:

In your page.html:

<ion-searchbar primary hideCancelButton [(ngModel)] = "searchQuery" [ngFormControl]="searchQueryControl"></ion-searchbar>

And in your page.ts:

// Remember to import these things:
import {FORM_DIRECTIVES, Control} from 'angular2/common';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/distinctUntilChanged';

constructor ( ... ) {
    //...
    this.searchQuery = '';
    this.searchQueryControl = new Control();
    //...

    this.searchQueryControl
        .valueChanges
        .debounceTime(1000)
        .distinctUntilChanged()
        .subscribe(text => {

            if(text !== '') {
              this.searchQuery = text;
              this.search();
            }
      });

    //...
}

By doing that, we would only run the code when the input has changed (this.searchQueryControl.valueChanges), and when there hasn't been another change within 1 second (.debounceTime(1000)). The distinctUntilChanged() allow us to run the code if the value is different to the last time it ran. So if the user typed 'asd', hit the backspace key and then retyped the ending 'd' again, nothing would happen.

Upvotes: 0

Related Questions