Searchbar on Navbar in IONIC2

Ionic Framework ionic-v3
1

How to use Searchbar on Navbar in Ionic2, When I click on Search icon the Searchbar will activate.

Just like this Example in Ionic1- IONIC1 Searchbar on Navbar

Please share me with the complete solution.

2

Take a look at the component documentation for searchbar in toolbars. You could combine that with an ngIf and an ion-button to show and hide the toolbar.

Iā€™m not going to post the entire code here for you but if you post what you have done after looking at that documentation we can give you more guidance if needed.

3

ISSUE SOLVED- THANKS
HTML-

<ion-title *ngIf="!isOn">Feedback</ion-title>
      <ion-searchbar *ngIf="isOn"></ion-searchbar>
    <ion-buttons end>
      <button (click)="toggleDetails()" ><ion-icon name="ios-search"></ion-icon></button>
    </ion-buttons>

Controller-

 private isOn: boolean = false;

  getButtonText(): string {
    return `Switch ${ this.isOn ? 'Off' : 'On' }`;
  }
  setState(): void {
    this.isOn = !this.isOn;
  }

toggleDetails() {
    this.isOn = !this.isOn;
  }
2 Likes