Fixed up search bar

ionic/components.js

@@ -20,7 +20,7 @@ export * from 'ionic/components/nav/nav-item'
 export * from 'ionic/components/nav-bar/nav-bar'
 export * from 'ionic/components/slides/slides'
 export * from 'ionic/components/radio/radio'
-// export * from 'ionic/components/search-bar/search-bar'
+export * from 'ionic/components/search-bar/search-bar'
 // export * from 'ionic/components/split-view/split-view'
 export * from 'ionic/components/segment/segment'
 export * from 'ionic/components/switch/switch'

ionic/components/app/test/sink/index.js

@@ -14,7 +14,7 @@ import {ListPage} from './pages/list'
 import {CardPage} from './pages/card'
 import {FormPage} from './pages/form'
 import {SegmentPage} from './pages/segment'
-import {SearchBar} from './pages/search-bar'
+import {SearchBarPage} from './pages/search-bar'
 import {IconsPage} from './pages/ionicons'
 import {TabsPage} from './pages/tabs'
 import {AsidePage} from './pages/aside'
@@ -40,7 +40,7 @@ export class IonicApp {
       { title: 'Cards', component: CardPage },
       { title: 'Forms', component: FormPage },
       { title: 'Segments', component: SegmentPage },
-      { title: 'Search Bar', component: SearchBar},
+      { title: 'Search Bar', component: SearchBarPage },
       { title: 'Icons', component: IconsPage },
       { title: 'Tabs', component: TabsPage },
       { title: 'Aside', component: AsidePage },

ionic/components/app/test/sink/pages/search-bar.js

@@ -2,17 +2,19 @@ import {NgFor, DynamicComponentLoader, Injector, DomRenderer, ElementRef} from '
 import {Ancestor} from 'angular2/src/core/annotations_impl/visibility';
 import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
 import {View} from 'angular2/src/core/annotations_impl/view';
-import {FormBuilder, Validators, FormDirectives, ControlGroup} from 'angular2/forms';
+import {FormBuilder, Validators, formDirectives, ControlGroup} from 'angular2/forms';
 
-import {Segment, SegmentButton, List, Item, ActionMenu, Modal, ModalRef,
+import {Segment, SegmentButton, SearchBar, List, Item, ActionMenu, Modal, ModalRef,
   NavbarTemplate, Navbar, NavController, Button, Content} from 'ionic/ionic';
 
+  console.log(NavbarTemplate, Navbar, Content, formDirectives);
+
 @Component({
   selector: 'ion-view'
 })
 @View({
   template: `
-  <ion-navbar *navbar><ion-title>Cards</ion-title></ion-navbar>
+  <ion-navbar *navbar><ion-title>Search Bar</ion-title></ion-navbar>
 
   <ion-content class="padding">
     <h2>Search Bar</h2>
@@ -25,17 +27,20 @@ import {Segment, SegmentButton, List, Item, ActionMenu, Modal, ModalRef,
     </p>
 
     <form (^submit)="doSubmit($event)" [control-group]="form">
+      <ion-search-bar control="searchQuery"></ion-search-bar>
+      <div>
+        Query: <b>{{form.controls.searchQuery.value}}</b>
+      </div>
     </form>
   </ion-content>
   `,
-  directives: [NavbarTemplate, Navbar, Content, List, Item, Segment, SegmentButton]
+  directives: [formDirectives, NavbarTemplate, Navbar, Content, SearchBar]
 })
-export class SegmentPage {
+export class SearchBarPage {
   constructor() {
     var fb = new FormBuilder();
     this.form = fb.group({
-      mapStyle: ['hybrid', Validators.required]
+      searchQuery: ['', Validators.required]
     });
-
   }
 }

ionic/components/search-bar/search-bar.js

@@ -32,8 +32,8 @@ export class SearchBar {
     cd.valueAccessor = this; //ControlDirective should inject CheckboxControlDirective
 
     setTimeout(() => {
-      console.log('Search bar for list', this.list);
-      this.query = 'Cats';
+      //console.log('Search bar for list', this.list);
+      this.query = '';
     })
   }