<!-- <ion-toolbar>
  <form [ng-form-model]="toolbarForm">
    <ion-search-bar ng-control="toolbarSearchQuery"></ion-search-bar>
  </form>
</ion-toolbar> -->
<ion-content>
  <form [ng-form-model]="form">
    <label> Search - Default </label>
    <ion-search-bar ng-control="searchQuery" class="e2eFloatingSearchBar"></ion-search-bar>
    <label> Search - Custom Placeholder </label>
    <ion-search-bar ng-control="searchQuery" placeholder="Filter"></ion-search-bar>
    <label> Search - Cancel Button </label>
    <ion-search-bar ng-control="searchQuery" show-cancel="true"></ion-search-bar>
    <label> Search - Custom Cancel Button </label>
    <ion-search-bar ng-control="searchQuery" show-cancel="true" cancel-text="Done"></ion-search-bar>
  </form>
</ion-content>

<!-- <ion-toolbar>
  <form [ng-form-model]="toolbarForm">
    <ion-search-bar ng-control="toolbarSearchQuery"></ion-search-bar>
  </form>
</ion-toolbar> -->
<ion-content>
  <form [ng-form-model]="form">
    <label> Search - Default </label>
    <ion-search-bar ng-control="searchQuery" class="e2eFloatingSearchBar"></ion-search-bar>
    <label> Search - Custom Placeholder </label>
    <ion-search-bar ng-control="searchQuery" placeholder="Filter"></ion-search-bar>
    <label> Search - Cancel Button </label>
    <ion-search-bar ng-control="searchQuery" show-cancel="true"></ion-search-bar>
    <label> Search - Custom Cancel Button </label>
    <ion-search-bar ng-control="searchQuery" show-cancel="true" cancel-text="Done"></ion-search-bar>
    <label> Search - Custom Cancel Action</label>
    <ion-search-bar ng-control="searchQuery" show-cancel="true" cancel-text="Done" [cancel-action]="myCancelAction"></ion-search-bar>
  </form>
</ion-content>

Update search bar floating demo for custom cancel action
Fix(demo): Update search bar floating demo for custom cancel action
