ionCancel not returning my full list

Ionic Framework ionic-v3
1

hi guys,
I am new in ionic 2,
I have created a “search bar” and it is working as expected when searching list
but when I clicking 'cancel ’ or 'x ’ button function throwing error ERROR TypeError: Cannot read property ‘trim’ of undefined
I want to show my full list when I click 'cancel ’ or 'x ’ button
please help
here is my code:

page.html:

<ion-searchbar *ngIf="toggled" [(ngModel)]="searchstudent" [showCancelButton]="true" cancelButtonText="close" 
      (ionInput)="getFilteredItem($event)" (ionClear)="cleared()" (ionCancel)="onCancel()"></ion-searchbar>

page.ts:

getFilteredItem(searchbar) {
    var item = searchbar.target.value;
    this.paneList = this.items.filter((data) => {
      return (data.EmployeeName.toLowerCase().indexOf(item.trim().toLowerCase()) > -1);
    });
  }

  onCancel(){
    
    this.toggled=false;
    return this.paneList;
  }

  cleared(){
    return this.paneList;
  }

error
error.JPG1016×948 50.2 KB

2

I dont get your logic

You want to hide the searchbar when you hit cancel? (Ngif)

And the cancel event does a return which is not used. It should say this.panrlist=items yielding an ulfiltered list

Same issue with cleared

And the error likely pops due tonsome code not displayed which calls the filter function which trying to obtain a value of a component no longer existing due to the ngif

3

Check the ionic doc on searchbar

4

getFilteredItem function working

I want to return my non filter list( or full list) on clicking cancel button

5 
  onCancel(){
this.paneList = this.items
  }