How to set ion-searchbar to disabled


Title says it all.

I have a searchbar…


But want to make it disabled based on a condition.

I have already tried


Cordova CLI: 6.4.0
Ionic Framework Version: 2.0.1
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.1.7
Ionic App Scripts Version: 1.0.0
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 10
Node Version: v4.2.1
Xcode version: Not installed


Surely this is simple to do…

Does nobody have a solution?


I used [disabled]=disabled in ion-searchbar, and it worked correctly before last update. May be it was a glitch that it worked 'cause it hasnt an attribute “disabled”.
Finally, I made new component that extends Searchbar with one new property - disabled. Realization can be taked from ion-input component. Works fine.


Thanks, seems like it should have an attribute for disabled.


Did you find a way to disable an ion-searchbar ? Can’t believe this is not possible…


I haven’t been active with ionic for a while so there may be an update addressing it but to answer your question I did not find a solution.


I think this is a bug. Searchbars do indeed have a disabled attribute, and binding to it works, in the sense that it does flip from true to false. The problem seems to be that the searchbar component itself isn’t caring.


have u found solution for this ??


Any updates on this?


not work for me.


Any news on this? I’m also having this issue.


Me too!. Have used [disabled] on buttons… So why not searchbar… I know it’s a composite with things like the x to clear…


i use “fieldset”

fieldset disabled=true style=“border : none”

<ion-searchbar *ngIf="disabled == false" #searchbarElem type="text" placeholder="{{guidance | translate}}"  (ionInput)="search($event)" 
    (ionClear)="search($event)" [(ngModel)]="suggestTerm">


        private renderer:Renderer) {


    ngOnInit() {
        let input = this.searchBar.getElementRef().nativeElement.querySelector('input');
        this.renderer.setElementAttribute(input, 'disabled', 'true');

Have fun


@mica great solution but getting error,

RROR Error: Uncaught (in promise): TypeError: Cannot read property 'nativeElement' of undefined
TypeError: Cannot read property 'nativeElement' of undefined
    at CampusMapPage.webpackJsonp.442.CampusMapPage.ngOnInit

<ion-searchbar #searchBar placeholder=“Search for a Destination”>

ngOnInit() {
let input = this.searchBar.nativeElement.querySelector(‘input’);
this.renderer.setElementAttribute(input, ‘disabled’, ‘true’);
this.platform.ready().then(() => {

ERROR :interrobang: