CODEWITHSUNDEEP
angularionic-frameworkionic4
Azoulay Jason
Azoulay Jason

Reputation: 2999

<ion-searchbar> is not working inside <ion-header> Ionic 4

I m working with Ionic 4 and I'm trying to implement a searchbar into the header just like this :

<ion-header>
  <ion-toolbar>
    <!-- Side menu button-->
    <ion-buttons slot="start">

      <button (click)="openFirst()"><img src="../../../assets/jas.png"></button>
    </ion-buttons>

    <ion-title><ion-searchbar ></ion-searchbar></ion-title>
  </ion-toolbar>
</ion-header>

My problem is that the search bar displays but I can't write anything inside.

Also, when it's not inside <ion-title>, it's not working.

It seems that it is working in every other place of the app

Upvotes: 2

Views: 2366

Answers (3)

umunBeing
umunBeing

Reputation: 671

In ionic 5, you could do somehting like:

<ion-header>
  <ion-tootlbar>
    <ion-title>My Title</ion-title>
  </ion-toolbar>
  <ion-searchbar></ion-searchbar>
</ion-header>

Each new sibling of ion-toolbar will appear as a new line.

This also works if you are trying to use this with collapse=condense, inside ion-content.enter image description here

Upvotes: 0

user13612726
user13612726

Reputation: 1

Try this:

<ion-header>
    <ion-buttons>
       <ion-title>`enter title here`</ion-title>
    </ion-buttons>
    <ion-searchbar></ion-searchbar>
</ion-header>

Upvotes: -1

Sajeetharan
Sajeetharan

Reputation: 222712

Try something like this as follows,

<ion-header>
  <ion-toolbar>
    <ion-title>Enter Place</ion-title> 
    <ion-searchbar [(ngModel)]="autocomplete.query" [showCancelButton]="true" (ionInput)="updateSearch()" (ionCancel)="dismiss()"></ion-searchbar>
    <ion-searchbar [(ngModel)]="autocomplete.query" [showCancelButton]="true" (ionInput)="updateSearch()" (ionCancel)="dismiss()">
    </ion-searchbar>
  </ion-toolbar>
</ion-header>

Upvotes: 2

Related Questions