Ion-search bar in header

hi, i am trying to add search bar in the header , thats only as an icon when clicked the searchbar should appear/expand in place of ion-header title …


how can I achieve this ??


   <ion-header class="shrinkable">
         <button ion-button menuToggle>
             <ion-icon name="menu"></ion-icon>
       <ion-buttons end>
           <button ion-button end icon-only (click)="seachbar()">
               <ion-icon name="search"></ion-icon>

       <ion-buttons end>
          <button ion-button end icon-only (click)="presentPopover($event)">
              <ion-icon name="more"></ion-icon>


i was looking for this answer too

any one found any answer ???

I am not sure with the code but there is a way where u can achieve the search-bar as shown in the picture or image.

  1. Place a search-bar icon in the header and give it a button function.
  2. Create a page for the searching.
    By following these steps we can achieve the search-bar as shown in the picture.

Try this.

<ion-toolbar color="primary">
    <ion-buttons slot="start">
      <ion-icon name="menu" size="large"></ion-icon>
    <ion-searchbar type="text" color="light" placeholder="Search text" clearInput>
    <ion-buttons slot="end">
      <ion-icon name="search" size="large"></ion-icon>