*ngIf hide show

html 

<ion-header #head>

  <ion-navbar>

    <ion-title *ngIf="!isOn">Offers</ion-title>

    <ion-searchbar (input)="getItems($event)" *ngIf="isOn" placeholder="Search your offers"></ion-            searchbar>

    <ion-buttons end *ngIf="!isOn" (click)="toggleON()">

      <button ion-button icon-only>

        <ion-icon name="ios-search-outline"></ion-icon>

      </button>

    </ion-buttons>

    <ion-buttons end (click)="presentPopover($event)">

      <button ion-button icon-only>

        <ion-icon name="ios-pin-outline"></ion-icon>

      </button>

    </ion-buttons>

  </ion-navbar>

</ion-header>

page.ts

  private isOn: boolean = false;

  getButtonText(): string {

    return `Switch ${this.isOn ? 'Off' : 'On'}`;

  }

  setState(): void {

    this.isOn = !this.isOn;

  }

  toggleDetails() {

    this.isOn = !this.isOn;

  }

  toggleON() {

    this.isOn = !this.isOn;

  }