Remove/Close search bar in Angular or Ionic 5 when hitting cancel button

Question

I am using Ionic on mobile and I want to make sure that when you hit the cancel button, the search bar is removed totally. Even better: when you hit any area outside the search bar. I am already showing the search bar after a click on an icon.

   <ion-searchbar
            *ngIf="toggled"
            placeholder="Search"
            inputmode="text" type="text"
            [(ngModel)]="searchTerm" mode="ios"
            (ionChange)="onSearchChange($event)"
            (ionCancel)="showDefaultBar()"
            (ionBlur)="showDefaultBar()"
            showCancelButton="always"
            [debounce]="250"
            animated="true">
</ion-searchbar

Here is the code. So, you can see that the cancel button is always being shown. The problem is that when you hit cancel, it only clears the text input field and does not actually cancel the searchbar. I would like to make sure the searchbar is hidden/removed after hitting cancel, like on native iOS.

Is there a way to do this? Couldn't find anything in the Ionic documents.

Answer 1

In the .ts file, you can do this in the showDefaultBar() function:

showDefaultBar() {
  this.toggled = false;  <-- add this line
  ...
}