Step 10.6: Update usage

Author: dotansimha

src/pages/chats/new-chat.html

@@ -1,13 +1,24 @@
 <ion-header>
-  <ion-toolbar color="whatsapp">
+  <ion-toolbar *ngIf="searching" color="whatsapp">
+    <ion-searchbar
+      autofocus
+      class="seach-bar"
+      color="whatsapp"
+      [showCancelButton]="true"
+      (ionInput)="updateSubscription($event.target.value); searching = true;"
+      (ionClear)="updateSubscription(undefined); searching = false;">
+      </ion-searchbar>
+  </ion-toolbar>
+
+  <ion-toolbar *ngIf="!searching" color="whatsapp">
     <ion-title>New Chat</ion-title>
 
     <ion-buttons left>
       <button ion-button class="dismiss-button" (click)="viewCtrl.dismiss()"><ion-icon name="close"></ion-icon></button>
     </ion-buttons>
 
     <ion-buttons end>
-      <button ion-button class="search-button"><ion-icon name="search"></ion-icon></button>
+      <button ion-button class="search-button" (click)="searching = true"><ion-icon name="search"></ion-icon></button>
     </ion-buttons>
   </ion-toolbar>
 </ion-header>