CODEWITHSUNDEEP
jqueryangularionic-frameworkecmascript-6
herhuf
herhuf

Reputation: 527

Reload page after data has been modified

My Ionic app contains a page that shows a list of items. This list should be searchable by a searchbar. I implemented the searchbar like this

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>{{pageTitle}}</ion-title>
  </ion-navbar>

  <ion-searchbar 
    [(ngModel)]="searchQuery" 
    [showCancelButton]="shouldShowCancel" 
    (ionInput)="onInput($event)">
  </ion-searchbar>

</ion-header>
<ion-content>
  <ion-list>
    <ion-card *ngFor="let item of displayedList">

      <ion-card-header left color="primary">
        <ion-icon name="person" padding-right></ion-icon>
        {{item.name}}
      </ion-card-header>

    </ion-card>

  </ion-list>
</ion-content>

The onInput method looks like that

public onInput(inputEvent: Event):void {
    this.initializeList();
    var query:string = this.searchQuery;

    if (query) {
      this.displayedList = $.grep(
        this.defaultList,
        (item, index) => {
          return item.name.includes(query);
        }
      );
      // gives expected correct output
      console.log(this.displayedList);

    }
  }

Actually it works well, even the output after the grep call is correct. But the page will not be updated and still show all list items. How do I make the page reload after the underlying data (displayedList) has been changed?

Upvotes: 0

Views: 56

Answers (1)

DavidX
DavidX

Reputation: 1319

Try (ngModelChange) instead of (ionInput).

Upvotes: 1

Related Questions