CODEWITHSUNDEEP
angularionic2
Sanny Srivastava
Sanny Srivastava

Reputation: 1157

ion-searchbar as a tab component IONIC 2

My Ionic 2 App is having 5 tabs:- 

<ion-tabs>
  <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="ios-blicon-home" ></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="Categories" tabIcon="ios-blicon-category"></ion-tab>
  <ion-tab tabTitle="Search" tabIcon="ios-blicon-search" (click)="startsearch()"></ion-tab>
  <ion-tab [root]="tab4Root" tabTitle="Bookmark" tabIcon="ios-blicon-bookmark"></ion-tab>
  <ion-tab [root]="tab5Root" tabTitle="Me" tabIcon="ios-blicon-me"></ion-tab>
</ion-tabs>

I have four component and one is a search tab where I want to pop a seachbar (ion-searchbar) whenever clicked and it can trigger a function on submit.

I am not sure how to do this, please suggest me.

Thank you..!!

Upvotes: 1

Views: 549

Answers (2)

Suraj Rao
Suraj Rao

Reputation: 29614

In your Tabs component, use ionSelect event instead of click

<ion-tabs>
  <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="ios-blicon-home" ></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="Categories" tabIcon="ios-blicon-category"></ion-tab>
  <ion-tab tabTitle="Search" tabIcon="ios-blicon-search" (ionSelect)="startsearch()"></ion-tab><!-- use ionSelect -->
  <ion-tab [root]="tab4Root" tabTitle="Bookmark" tabIcon="ios-blicon-bookmark"></ion-tab>
  <ion-tab [root]="tab5Root" tabTitle="Me" tabIcon="ios-blicon-me"></ion-tab>
</ion-tabs>
<ion-searchbar *ngIf="showSearch"></ion-searchbar>

In the component side have a class variable:

showSearch:boolean=false;
startsearch(){
 this.showSearch = ! this.showSearch;
}

Upvotes: 1

Sagar Kulkarni
Sagar Kulkarni

Reputation: 2081

I think you need to create another page with searchbar - say SearchPage component.

And you have to give the [root] for that tab to that component.

<ion-tab [root]="tab3Root" tabTitle="Search" tabIcon="ios-blicon-search"></ion-tab>

In your tabs.ts - tab3Root = "SearchPage".

Now, whatever searching functionality you need, will be in this SearchPage component. Refer this for how to implement searchbar.

Upvotes: 0

Related Questions