Searchbar

Improve this doc

Manages the display of a Searchbar which can be used to search or filter items.

Component

selector: ion-searchbar

Usage

<ion-searchbar
  [(ngModel)]="myInput"
  [hideCancelButton]="shouldHideCancel"
  (input)="onInput($event)"
  (cancel)="onCancel($event)">
</ion-searchbar>

Input Properties

Attr Type Details
cancelButtonText string

Sets the cancel button text to the value passed in

hideCancelButton boolean

Hides the cancel button

debounce number

How long, in milliseconds, to wait to trigger the input event after each keystroke. Default 250.

placeholder string

Sets input placeholder to the value passed in

ngModel any

Expression to evaluate when the Searchbar input has changed including cleared

Output Events

Attr Details
input

When the Searchbar input has changed including cleared

blur

When the Searchbar input has blurred

focus

When the Searchbar input has focused

cancel

When the cancel button is clicked

clear

When the clear input button is clicked

Related

Searchbar Component Docs

API

Native

General