CODEWITHSUNDEEP
ionic4
Guille
Guille

Reputation: 63

Ionic 4 - How can I programmatically clear ion-searchbar?

I work with ion-searchbar on Ionic 4.

I would like to know how I can clear the content, if the user clicks on any other button (not the cancel button).

<ion-searchbar id="name_of_searchbar" animated placeholder='search' (ionChange)="buscar($event)">
</ion-searchbar>

In the function (any another button), I try with: document.getElementById ("name_of_searchbar"). innerHTML = "";

but although it modifies the content, it also removes the ion-searchBar

Thank you!

Upvotes: 1

Views: 1197

Answers (1)

Mostafa Harb
Mostafa Harb

Reputation: 1675

Add in search bar [(ngModel)]="searchValue" 

<ion-searchbar [(ngModel)]="searchValue"  animated placeholder='search' (ionChange)="buscar($event)">
</ion-searchbar>

And in ts file:

export class PageName {
searchValue:string;
constructor(){}

clearSearch(){
    this.searchValue = "";
}
}

In the button you want the user to clear text with , put inside the button click example :

<ion-button color="primary" (click)="clearSearch()">empty search</ion-button>

Upvotes: 1

Related Questions