how to do click and view search bar in ionic 2 application

Question

How to code the click and view search bar in ionic 2 application. In that one the search icon only shows first, when i click the search icon the the search bar will show.

Answer 1

ts

export class Page1{
    public toggled: boolean = false;

    constructor() {
       this.toggled = false;
    }

    public toggle(): void {
       this.toggled = !this.toggled;
    }
}

html

<div>
    <ion-icon *ngIf="!toggled" (click)="toggle()" name="search"></ion-icon>
    <ion-searchbar
       *ngIf="toggled"
       [(ngModel)]="someValue"
       (ionInput)="searchThis($event)"
       (ionCancel)="cancelSearch($event)"
       (ionClear) = "cancelSearch($event)"
       [showCancelButton]="true">
    </ion-searchbar>
</div>

In your cancelSearch() you can call this.toggle() to show the icon again.