Clear text in ion-searchbar

ion-searchbar example ionic 4
ion-searchbar icon right
ion-searchbar cancel event
ionic 4+: search bar example
ionic search bar with button
ionic 4 searchbar set focus
ionic 4 search bar in header
ion-searchbar css

I have a search bar

<div id="search"><ion-searchbar [(ngModel)]="searchQuery" (change)="onChange($event)" (ionClear)="onCancel($event)" (ionInput)="onInput($event)" debounce="1"></ion-searchbar></div>

How do I, from the ts file clear the text the user has entered?

Here is the ts file function that tries to clear the search bar text.

private searchQuery: string = null;

  subscribeEvents() {'mapFilter:update', (data) => {
      this.employeeModel = data[0].employeeModel;
      if (data[0].fromClearFilters) {
        this.searchQuery = '';

this.searchQuery = ''; does reset the filter but the text remains


I am using Ionic 2

First, add an identifier to your HTML element

<ion-searchbar #mySearchbar ...>

Then, import ViewChild:

import { ViewChild } from '@angular/core';

Then, import Searchbar

import { Searchbar } from 'ionic-angular';

Add it as a property:

@ViewChild('mySearchbar') searchbar: Searchbar;

Then, fire the onInput event and pass a null identifier (so your onInput event listener knows its you)


Clear text in ion-searchbar - ionic-v3, First, add an identifier to your HTML element. <ion-searchbar #mySearchbar > Then, import ViewChild: import { ViewChild } from� A Searchbar should be used instead of an input to search lists. A clear button is displayed upon entering input in the searchbar's text field. Clicking on the clear button will erase the text field and the input will remain focused. A cancel button can be enabled which will clear the input and lose the focus upon click.

Instead of using the ngModel in the search bar, you can just use the event sent to get the value like this:

<ion-searchbar (ionInput)="getItems($event)" (ionCancel)="onCancel($event)" [showCancelButton]="true"></ion-searchbar>

By doing that, you can clear the text in the (ionCancel) event by just doing:

  onCancel(ev) { 
    // Reset the field = '';

Please notice that you don't need the ngModel binding and also you don't need to use the (change)="..." event.

Clear text in ion-searchbar, I have a search bar <div id="search"><ion-searchbar [(ngModel)]="searchQuery" (change)="onChange($event)" (ionClear)="onCancel($event)"� var htmlElement: HTMLElement = document.getElementById("ion-searchbar"); htmlElement.nodeValue = ''; and. htmlElement.setAttribute('value', ''); and. htmlElement.setAttribute('ng-reflect-model', ''); But the values does not clear. Because I have done this.searchQuery = '';, when I focus on the search bar, it clears. So this makes me think that the problem is it is not refreshing to show the new value.

Anyone who is interested, the way this worked for me is:

@ViewChild('userSearchBar') searchbar: Searchbar;

then in your method:


This works like a charm...

Clear text in ion-searchbar, Clicking the clear button in <ion-searchbar> (the x at the end) (ionClear) is calling a function twice (for the event types 'mousedown' and 'click'). Attr Details; ionCancel: Emitted when the cancel button is clicked. ionClear: Emitted when the clear input button is clicked. ionInput: Emitted when the Searchbar input has changed, including when it's cleared.

Are you using Angular, aren´t you?

So you only have to clear the associated model "searchQuery" in controller. This way, angular will automatically clear the field;

this.searchQuery = '';

But ng-model should be bound to an object and not to an variable.

The means the the declaration of the variable should be something like:

 $scope.searchBox = {
    searchQuery: ''

And change your search object to:

<ion-searchbar ... ng-model="searchBox.searchQuery" ... />

<ion-searchbar> (ionClear) is calling twice � Issue #9956 � ionic , Bug Report Ionic version: [x] 4.11.7 Current behavior: Clear text icon is not showing in the search bar as described in the docs in Ionic 4 app. Bug Report Ionic version: [x] 4.11.7 Current behavior: Clear text icon is not showing in the search bar as described in the docs in Ionic 4 app. Expected behavior: I was expecting a clear text icon in the search bar which was not showing

My answer builds on the answer DJ gave. I would just make this a response to his answer, but I don't have enough reputation. So, I'll make an answer of my own.

In order to get the clearInput() function to work. You need to pass it an event instance.

The best way to get this is to store the event object that gets passed in when you associate a function with an output event, something like (ionInput)="myfunction($event)". Then just pass this into the clearInput function. If you put null, it will return an error like Cannot find property 'target' of null.


myFunction(event) {
    this.eventInstance = event;

    //the rest of your code

bug: Ionic 4 ion-searchbar not showing clear text icon � Issue , Improve this doc. Manages the display of a Searchbar which can be used to search or filter items. Sets the cancel button text to the value passed in When the Searchbar input has focused. cancel. When the cancel button is clicked. clear . Enter text in the ion-searchbar input field. Tap the clear button in a precise manner to avoid tapping the surrounding area. (Sometimes the issue doesn't seem to occur if you "fat-finger" the clear button.) Tap the Done button on the accessory bar of the iOS keyboard.

Searchbar, ionClear. Emitted when the clear input button is clicked. ionFocus Color of the searchbar input text $searchbar-ios-input-clear-icon-color, rgba(0, 0, 0, .5). Anyone knows how to change the searchbar-clear-icon color in Ionic2? Seems to be defined as svg. Should I override this css and set background-image as none and use another one? .searchbar-clear-icon { backgrou…

Searchbar - Ionic API Documentation, Well, the article text seems clear you're wanting two distinct arrays: "I creating an extra array just to store the same data" and "created 2 arrays" etc. so that may� This time I will tell you about the SearchBar, which is a control that allows us make a search of a specific information between a set of these. To understand better, I will be display these topics in the following sets: 🔹 SearchBar basic structure 🔹 Implementing SearchBar Page Let's start!!! SearchBar basic structure To understand better, is important to know the basic structure needed

Implement a Search Bar on your Ionic app to filter your Firebase data �, Clicking on the clear button will erase the text field and the input will remain focused. A cancel button can be enabled which will clear the input and lose the focus� Set to "clear" for a transparent button, to "outline" for a transparent button with a border, or to "solid". The default style is "solid" except inside of a toolbar, where the default is "clear".

  • It's a lot of work just to reset the input field. Unfortunelly I did not found a simple approach
  • Works fine on ionic 3
  • Hi, thanks for the advise, but I get this ts error: [ts] Property 'value' does not exist on type 'EventTarget'. any
  • Hmmm but that error is not happening in the plunker, right? Could you please check if your code is somehow different than the one in the plunker? (just the search bar in the html code). Or maybe try to replicate that error in the plunker so I can take a look and see which kind of event is being sent to the method...
  • Hi sebaferreras, I am using what might be considered a hack. I am getting the htmlelement and clicking on the search cancel button.
  • The issue you're using that hack for, is also happening in the plunker? There must be a better way to handle that scenario but I'd need to have it replicated there to take a look at it
  • Thanks. I am busy on some other work at the moment, but when I get a chance, I will try get it running on plunker.
  • Hi Diogo, thanks for the advise. I am using Ionic 2 which is built on top of Angular 2. However, I do set the this.searchQuery = '';, which does clear the search results, but the actual text value in the search bar stays. My question is, how do I clear the text value the user typed into the search bar?
  • Are you sure that the text is not from input field autocomplete?
  • Hi, I'm sorry, I don't understand? My html code is exactly like the code I posted above.
  • I have added more code samples. Let me know if you need more
  • strange.... i did the test with normal input and it works