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

Ionic Framework
1

How can we close the search bar if we hit the cancel button? Or maybe better: when you hit any area outside the search bar?

   <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>

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 closed after hitting cancel, like on native iOS .

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

2

What do you mean with Searchbar ist closed? That the Keyboard should hide?

3

I mean that the searchbar should be hidden (because I am expanding the searchbar onclick of an icon), I want to hide/remove the searchbar if I hit cancel. Like native iOS does. It removes the searchbar and shows you e.g. the title bar again.

4

Okay how to do you expand the Searchbar on click?

6

and toggle() does what?

7

I have found the solution myself. In the according .ts file, I just had to add:

    showDefaultBar() {
      this.toggled = false;
    }

Thanks for the responses, Hans.