How to set Search Bar as Sub Header?

Ionic Framework ionic-v3
1

Hello i want to set my searchbar as subheader so its sticky all the time.
What i have at the moment:

<ion-content>
      <ion-searchbar
      [showCancelButton]="shouldShowCancel"
      (ionInput)="getItems($event)"
      (ionCancel)="onCancel($event)">
    </ion-searchbar>
  <ion-list no-lines>
  <button color="androidprimarydark" style="padding-top:0px;margin-top:0px;" ion-item *ngFor="let item of items" (click)="itemSelected(item)">
    {{ item }}
  </button>  
</ion-list>
</ion-content>

As you can see its in my content view but i want it as subheader.

2

Sloved it by myselfe.
This is what my code looks right now:

<ion-header>
  <ion-toolbar no-border-top color="androidprimary">
      <ion-searchbar
      [showCancelButton]="shouldShowCancel"
      (ionInput)="getItems($event)"
      (ionCancel)="onCancel($event)">
    </ion-searchbar>
  </ion-toolbar>
</ion-header>
<ion-content>
  <ion-list no-lines>
  <button color="androidprimarydark" style="padding-top:0px;margin-top:0px;" ion-item *ngFor="let item of items" (click)="itemSelected(item)">
    {{ item }}
  </button>  
</ion-list>
</ion-content>
1 Like