diff --git a/ionic/components/searchbar/searchbar.ios.scss b/ionic/components/searchbar/searchbar.ios.scss
index 34b9e549a6..9c7ebe4b9b 100644
--- a/ionic/components/searchbar/searchbar.ios.scss
+++ b/ionic/components/searchbar/searchbar.ios.scss
@@ -121,6 +121,12 @@ ion-searchbar {
   .searchbar-input {
     padding-left: 30px;
   }
+}
+
+// Searchbar Focused
+// -----------------------------------------
+
+.searchbar-focused {
   .searchbar-ios-cancel {
     transform: translateX(0);
     flex: 0 0 auto;
@@ -129,7 +135,6 @@ ion-searchbar {
   }
 }
 
-
 // Searchbar in Toolbar
 // -----------------------------------------
 
@@ -148,7 +153,7 @@ ion-searchbar {
     }
   }
 
-  .searchbar-left-aligned .searchbar-ios-cancel {
+  .searchbar-focused .searchbar-ios-cancel {
     padding-left: 8px;
   }
 
diff --git a/ionic/components/searchbar/searchbar.ts b/ionic/components/searchbar/searchbar.ts
index 6bfdfb495e..c7930141b3 100644
--- a/ionic/components/searchbar/searchbar.ts
+++ b/ionic/components/searchbar/searchbar.ts
@@ -1,4 +1,4 @@
-import {ElementRef, Renderer} from 'angular2/core';
+import {ElementRef, Renderer, Directive, Host, forwardRef, ViewChild, Output, EventEmitter} from 'angular2/core';
 import {NgIf, NgClass, NgControl, FORM_DIRECTIVES} from 'angular2/common';
 
 import {Ion} from '../ion';
@@ -18,20 +18,21 @@ import {Button} from '../button/button';
  * <ion-searchbar [(ngModel)]="defaultSearch"></ion-searchbar>
  * ```
  *
- * @property [placeholder] - sets input placeholder to value passed in
- * @property [showCancel] - shows the cancel button based on boolean value passed in
- * @property [cancelText] - sets the cancel button text to the value passed in
+ * @property [placeholder] - (default: 'Search') Sets input placeholder to value passed in
+ * @property [hideCancelButton] - (default: false) Hides the cancel button
+ * @property [cancelButtonText] - (default: 'Cancel') sets the cancel button text to the value passed in
  * @property [cancelAction] - the function that gets called by clicking the cancel button
  * @see {@link /docs/v2/components#search Search Component Docs}
  */
 @ConfigComponent({
   selector: 'ion-searchbar',
-  defaultInputs: {
-    'showCancel': false,
-    'cancelText': 'Cancel',
-    'placeholder': 'Search'
-  },
-  inputs: ['cancelAction'],
+  inputs: [
+    'cancelAction',
+    'hideCancelButton',
+    'cancelButtonText',
+    'placeholder'
+  ],
+  outputs: ['input'],
   host: {
    '[class.searchbar-left-aligned]': 'shouldLeftAlign',
    '[class.searchbar-focused]': 'isFocused',
@@ -40,18 +41,14 @@ import {Button} from '../button/button';
     '<div class="searchbar-input-container">' +
       '<button (click)="cancelSearchbar($event, query)" clear dark class="searchbar-md-cancel"><icon arrow-back></icon></button>' +
       '<div class="searchbar-search-icon"></div>' +
-      '<input [(value)]="query" (focus)="inputFocused()" (blur)="inputBlurred()" ' +
-      '(input)="inputChanged($event)" class="searchbar-input" type="search" [attr.placeholder]="placeholder">' +
-      '<button clear *ngIf="query" class="searchbar-clear-icon" (click)="clearInput($event)"></button>' +
+      '<input [value]="query" class="searchbar-input" type="search" [attr.placeholder]="placeholder">' +
+      '<button clear *ngIf="query" class="searchbar-clear-icon" (click)="clearInput()"></button>' +
     '</div>' +
-    '<button clear *ngIf="showCancel" (click)="cancelSearchbar($event, query)" class="searchbar-ios-cancel">{{cancelText}}</button>',
-  directives: [FORM_DIRECTIVES, NgIf, NgClass, Icon, Button]
+    '<button clear (click)="cancelSearchbar($event)" [hidden]="hideCancelButton" class="searchbar-ios-cancel">{{cancelButtonText}}</button>',
+  directives: [FORM_DIRECTIVES, NgIf, NgClass, Icon, Button, forwardRef(() => SearchbarInput)]
 })
 export class Searchbar extends Ion {
-  /**
-   * @private
-   * This holds the searchbar input value used for querying
-   */
+  @ViewChild(forwardRef(() => SearchbarInput)) searchbarInput;
   query: string;
 
   constructor(
@@ -64,22 +61,115 @@ export class Searchbar extends Ion {
     this.renderer = renderer;
     this.elementRef = elementRef;
 
+    this.input = new EventEmitter('input');
+
     // If there is no control then we shouldn't do anything
     if (!ngControl) return;
 
     this.ngControl = ngControl;
     this.ngControl.valueAccessor = this;
+
+    this.query = '';
+  }
+
+  /**
+   * @private
+   * On Initialization check for attributes
+   */
+  ngOnInit() {
+    let hideCancelButton = this.hideCancelButton;
+    if (typeof hideCancelButton === 'string') {
+      this.hideCancelButton = (hideCancelButton === '' || hideCancelButton === 'true');
+    }
+
+    this.cancelButtonText = this.cancelButtonText || 'Cancel';
+    this.placeholder = this.placeholder || 'Search';
   }
 
   /**
    * @private
    * After the view has initialized check if the searchbar has a value
-   * and then store that value in query
    */
   ngAfterViewInit() {
-    // If the user passes in a value to the model we should left align
-    this.shouldLeftAlign = this.ngControl.value && this.ngControl.value.trim() != '';
-    this.query = this.ngControl.value || '';
+    this.shouldLeftAlign = this.searchbarInput.value && this.searchbarInput.value.trim() != '';
+  }
+
+  /**
+   * @private
+   * Sets the searchbar to focused and aligned left on input focus.
+   */
+  inputFocused() {
+    this.isFocused = true;
+    this.shouldLeftAlign = true;
+  }
+
+  /**
+   * @private
+   * Sets the searchbar to not focused and checks if it should align left
+   * based on whether there is a value in the searchbar or not on input blur.
+   */
+  inputBlurred() {
+    this.isFocused = false;
+    this.shouldLeftAlign = this.searchbarInput.value && this.searchbarInput.value.trim() != '';
+  }
+
+  /**
+   * @private
+   * Clears the input field and triggers the control change.
+   */
+  clearInput() {
+    this.searchbarInput.writeValue('');
+    this.searchbarInput.onChange('');
+  }
+
+  /**
+   * @private
+   * Blurs the input field, clears the input field and removes the left align
+   * then calls the custom cancel function if the user passed one in.
+   */
+  cancelSearchbar(event, value) {
+    this.searchbarInput.elementRef.nativeElement.blur();
+    this.clearInput();
+    this.shouldLeftAlign = false;
+
+    this.cancelAction && this.cancelAction(event, value);
+  }
+
+    /**
+    * @private
+    * Updates the value of query
+    */
+   updateQuery(value) {
+     this.query = value;
+     this.input.next(value);
+   }
+}
+
+@Directive({
+  selector: '.searchbar-input',
+  host: {
+    '(focus)': 'inputFocused()',
+    '(blur)': 'inputBlurred()',
+    '(keyup)': 'inputChanged($event)'
+  }
+})
+export class SearchbarInput {
+  constructor(
+    @Host() searchbar: Searchbar,
+    elementRef: ElementRef,
+    renderer: Renderer
+  ) {
+    this.searchbar = searchbar;
+    this.renderer = renderer;
+    this.elementRef = elementRef;
+
+    if (!searchbar.ngControl) return;
+
+    this.onChange = (_) => {};
+    this.onTouched = (_) => {};
+
+    this.ngControl = searchbar.ngControl;
+    this.ngControl.valueAccessor = this;
   }
 
   /**
@@ -87,7 +177,10 @@ export class Searchbar extends Ion {
    * Write a new value to the element.
    */
   writeValue(value) {
-    this.query = value;
+    this.value = value;
+    if (typeof value === 'string') {
+      this.searchbar.updateQuery(value);
+    }
   }
 
   /**
@@ -108,52 +201,27 @@ export class Searchbar extends Ion {
 
   /**
    * @private
-   * Updates the value of the control when the searchbar input changes.
+   * Sets the Searchbar input to focused and aligned left on input focus.
+   */
+  inputFocused() {
+    this.searchbar.inputFocused();
+  }
+
+  /**
+   * @private
+   * Calls the Searchbar function to blur
+   */
+  inputBlurred() {
+    this.searchbar.inputBlurred();
+  }
+
+  /**
+   * @private
+   * Update the Searchbar input value
    */
   inputChanged(event) {
     this.writeValue(event.target.value);
     this.onChange(event.target.value);
   }
 
-  /**
-   * @private
-   * Sets the searchbar to focused and aligned left on input focus.
-   */
-  inputFocused() {
-    this.isFocused = true;
-    this.shouldLeftAlign = true;
-  }
-
-  /**
-   * @private
-   * Sets the searchbar to not focused and checks if it should align left
-   * based on whether there is a value in the searchbar or not on input blur.
-   */
-  inputBlurred() {
-    this.isFocused = false;
-    this.shouldLeftAlign = this.ngControl.value && this.ngControl.value.trim() != '';
-  }
-
-  /**
-   * @private
-   * Clears the input field and triggers the control change.
-   */
-  clearInput(event) {
-    this.writeValue('');
-    this.onChange('');
-  }
-
-  /**
-   * @private
-   * Blurs the input field, clears the input field and removes the left align
-   * then calls the custom cancel function if the user passed one in.
-   */
-  cancelSearchbar(event, query) {
-    this.element = this.elementRef.nativeElement.querySelector('input');
-    this.element.blur();
-    this.clearInput();
-    this.shouldLeftAlign = false;
-
-    this.cancelAction && this.cancelAction(event, query);
-  }
 }
diff --git a/ionic/components/searchbar/test/floating/index.ts b/ionic/components/searchbar/test/floating/index.ts
index b0acc22e0d..3f2606d06d 100644
--- a/ionic/components/searchbar/test/floating/index.ts
+++ b/ionic/components/searchbar/test/floating/index.ts
@@ -8,7 +8,7 @@ import {SearchPipe} from 'ionic/components/searchbar/searchbar';
   directives: [FORM_DIRECTIVES]
 })
 class E2EApp {
-  defaultSearch: string;
+  defaultSearch: string = 'filter';
   customPlaceholder: string;
   defaultCancel: string;
   customCancel: string;
@@ -25,11 +25,11 @@ class E2EApp {
     this.clickedCustomAction = true;
   }
 
-  triggerInput() {
+  triggerInput(ev) {
     // The defaultSearch doesn't get updated before this function is called
     // so we have to wrap it in a timeout
     setTimeout(() => {
-      console.log(this.defaultSearch);
+      console.log("Triggered input", this.defaultSearch);
     });
   }
 }
diff --git a/ionic/components/searchbar/test/floating/main.html b/ionic/components/searchbar/test/floating/main.html
index bee7f6722b..54a5199fef 100644
--- a/ionic/components/searchbar/test/floating/main.html
+++ b/ionic/components/searchbar/test/floating/main.html
@@ -1,18 +1,22 @@
 <ion-content>
   <h5 padding-left padding-top> Search - Default </h5>
-  <ion-searchbar [(ngModel)]="defaultSearch" (input)="triggerInput()" class="e2eDefaultFloatingSearchbar"></ion-searchbar>
+  <ion-searchbar [(ngModel)]="defaultSearch" (input)="triggerInput($event)" class="e2eDefaultFloatingSearchbar"></ion-searchbar>
+
+  <p padding-left>
+      Default Search: <b>{{ defaultSearch }}</b>
+  </p>
 
   <h5 padding-left> Search - Custom Placeholder </h5>
   <ion-searchbar [(ngModel)]="customPlaceholder" placeholder="Filter Schedules" class="e2eCustomPlaceholderFloatingSearchbar"></ion-searchbar>
 
-  <h5 padding-left> Search - Default Cancel Button </h5>
-  <ion-searchbar [(ngModel)]="defaultCancel" showCancel="true" class="e2eDefaultCancelButtonFloatingSearchbar"></ion-searchbar>
+  <h5 padding-left> Search - Hide Cancel Button </h5>
+  <ion-searchbar [(ngModel)]="defaultCancel" hideCancelButton class="e2eDefaultCancelButtonFloatingSearchbar"></ion-searchbar>
 
   <h5 padding-left> Search - Custom Cancel Button Danger </h5>
-  <ion-searchbar [(ngModel)]="customCancel" showCancel="true" cancelText="Really Long Cancel" class="e2eCustomCancelButtonFloatingSearchbar" danger></ion-searchbar>
+  <ion-searchbar [(ngModel)]="customCancel" cancelButtonText="Really Long Cancel" class="e2eCustomCancelButtonFloatingSearchbar" danger></ion-searchbar>
 
   <h5 padding-left> Search - Custom Cancel Action</h5>
-  <ion-searchbar [(ngModel)]="customCancelAction" showCancel="true" cancelText="Done" [cancelAction]="myCancelAction" class="e2eCustomCancelActionFloatingSearchbar"></ion-searchbar>
+  <ion-searchbar [(ngModel)]="customCancelAction" cancelButtonText="Done" [cancelAction]="myCancelAction" class="e2eCustomCancelActionFloatingSearchbar"></ion-searchbar>
 
   <div *ngIf="clickedCustomAction">
     Clicked custom action with input = {{customCancelAction}}
diff --git a/ionic/components/searchbar/test/toolbar/main.html b/ionic/components/searchbar/test/toolbar/main.html
index fd431d1e16..30683770b0 100644
--- a/ionic/components/searchbar/test/toolbar/main.html
+++ b/ionic/components/searchbar/test/toolbar/main.html
@@ -5,22 +5,22 @@
 <ion-content>
   <h5 padding-left padding-top> Search - Default Toolbar </h5>
   <ion-toolbar>
-    <ion-searchbar [(ngModel)]="defaultToolbarSearch" showCancel="true" class="e2eDefaultToolbarSearchbar"></ion-searchbar>
+    <ion-searchbar [(ngModel)]="defaultToolbarSearch" class="e2eDefaultToolbarSearchbar"></ion-searchbar>
   </ion-toolbar>
 
   <h5 padding-left padding-top> Search - Primary Toolbar </h5>
   <ion-toolbar primary>
-    <ion-searchbar [(ngModel)]="primaryToolbarSearch" showCancel="true" class="e2ePrimaryToolbarSearchbar"></ion-searchbar>
+    <ion-searchbar [(ngModel)]="primaryToolbarSearch" class="e2ePrimaryToolbarSearchbar"></ion-searchbar>
   </ion-toolbar>
 
   <h5 padding-left padding-top> Search - Danger Toolbar </h5>
   <ion-toolbar danger>
-    <ion-searchbar [(ngModel)]="dangerToolbarSearch" showCancel="true" class="e2eDangerToolbarSearchbar"></ion-searchbar>
+    <ion-searchbar [(ngModel)]="dangerToolbarSearch" class="e2eDangerToolbarSearchbar"></ion-searchbar>
   </ion-toolbar>
 
   <h5 padding-left padding-top> Search - Light Toolbar </h5>
   <ion-toolbar light>
-    <ion-searchbar [(ngModel)]="lightToolbarSearch" showCancel="true" class="e2eLightToolbarSearchbar"></ion-searchbar>
+    <ion-searchbar [(ngModel)]="lightToolbarSearch" class="e2eLightToolbarSearchbar"></ion-searchbar>
   </ion-toolbar>
 
 </ion-content>
diff --git a/ionic/config/directives.ts b/ionic/config/directives.ts
index 6b80006652..8339173b11 100644
--- a/ionic/config/directives.ts
+++ b/ionic/config/directives.ts
@@ -24,7 +24,7 @@ import {TextInput, TextInputElement} from '../components/text-input/text-input';
 import {Label} from '../components/text-input/label';
 import {Segment, SegmentButton} from '../components/segment/segment';
 import {RadioGroup, RadioButton} from '../components/radio/radio';
-import {Searchbar} from '../components/searchbar/searchbar';
+import {Searchbar, SearchbarInput} from '../components/searchbar/searchbar';
 import {Nav} from '../components/nav/nav';
 import {NavPush, NavPop} from '../components/nav/nav-push';
 import {NavRouter} from '../components/nav/nav-router';
@@ -144,6 +144,7 @@ export const IONIC_DIRECTIVES = [
 
   // Forms
   Searchbar,
+  SearchbarInput,
   Segment,
   SegmentButton,
   Checkbox,