do not use @Query within toolbars

ionic/components/nav-bar/nav-bar.ts

@@ -1,23 +1,12 @@
-import {Component, Directive, View, Host, Optional, ElementRef, TemplateRef, Query, QueryList, ViewQuery} from 'angular2/angular2';
+import {Component, Directive, View, Optional, ElementRef, TemplateRef, forwardRef, Inject} from 'angular2/angular2';
 
 import {Ion} from '../ion';
-import {ToolbarBase, ToolbarTitle, ToolbarItem} from '../toolbar/toolbar';
+import {ToolbarBase} from '../toolbar/toolbar';
 import {IonicConfig} from '../../config/config';
 import {IonicView} from '../../config/annotations';
 import {IonicApp} from '../app/app';
 import {ViewItem} from '../view/view-item';
 import {ViewController} from '../view/view-controller';
-import {MenuToggle} from '../menu/menu-toggle'
-
-
-@Directive({
-  selector: '.back-button-text'
-})
-class BackButtonText extends Ion {
-  constructor(elementRef: ElementRef) {
-    super(elementRef, null);
-  }
-}
 
 
 @Directive({
@@ -30,11 +19,11 @@ class BackButton extends Ion {
   constructor(
     @Optional() viewCtrl: ViewController,
     elementRef: ElementRef,
-    @Query(BackButtonText) bbtQry: QueryList<BackButtonText>
+    @Optional() @Inject(forwardRef(() => Navbar)) navbar: Navbar
   ) {
     super(elementRef, null);
     this.viewCtrl = viewCtrl;
-    this.bbtQry = bbtQry;
+    navbar && navbar.setBackButtonRef(elementRef);
   }
 
   goBack(ev) {
@@ -42,13 +31,22 @@ class BackButton extends Ion {
     ev.preventDefault();
     this.viewCtrl && this.viewCtrl.pop();
   }
-
-  getTextRef() {
-    return this.bbtQry.first.elementRef;
-  }
 }
 
 
+@Directive({
+  selector: '.back-button-text'
+})
+class BackButtonText extends Ion {
+  constructor(
+    elementRef: ElementRef,
+    @Optional() @Inject(forwardRef(() => Navbar)) navbar: Navbar
+  ) {
+    super(elementRef, null);
+    navbar && navbar.setBackButtonTextRef(elementRef);
+  }
+}
+
 
 @Component({
   selector: 'ion-navbar',
@@ -77,27 +75,31 @@ export class Navbar extends ToolbarBase {
     app: IonicApp,
     @Optional() item: ViewItem,
     elementRef: ElementRef,
-    config: IonicConfig,
-    @Query(ToolbarTitle) titleQry: QueryList<ToolbarTitle>,
-    @Query(ToolbarItem) itemQry: QueryList<ToolbarItem>,
-    @ViewQuery(BackButton) bbQry: QueryList<BackButton>
+    config: IonicConfig
   ) {
-    super(elementRef, config, titleQry, itemQry);
+    super(elementRef, config);
 
     this.app = app;
     item && item.navbarView(this);
-    this.bbQry = bbQry;
 
     this.bbIcon = config.setting('backButtonIcon');
     this.bbDefault = config.setting('backButtonText');
   }
 
   getBackButtonRef() {
-    return this.bbQry.first.getElementRef();
+    return this.bbRef;
+  }
+
+  setBackButtonRef(backButtonElementRef) {
+    this.bbtRef = backButtonElementRef;
   }
 
   getBackButtonTextRef() {
-    return this.bbQry.first.getTextRef();
+    return this.bbRef;
+  }
+
+  setBackButtonTextRef(backButtonTextElementRef) {
+    this.bbtRef = backButtonTextElementRef;
   }
 
   didEnter() {

ionic/components/toolbar/toolbar.ts

@@ -1,35 +1,10 @@
-import {Component, Directive, View, Host, ElementRef, forwardRef, Query, QueryList} from 'angular2/angular2';
+import {Component, Directive, View, Host, ElementRef, Optional, forwardRef, Inject} from 'angular2/angular2';
 
 import {Ion} from '../ion';
 import {IonicConfig} from '../../config/config';
 import {IonicView} from '../../config/annotations';
 import {MenuToggle} from '../menu/menu-toggle';
-
-
-@Component({
-  selector: 'ion-title'
-})
-@View({
-  template:
-    '<div class="toolbar-title">' +
-      '<ng-content></ng-content>' +
-    '</div>'
-})
-export class ToolbarTitle extends Ion {
-  constructor(elementRef: ElementRef) {
-    super(elementRef, null);
-  }
-}
-
-
-@Directive({
-  selector: 'ion-nav-items,[menu-toggle]'
-})
-export class ToolbarItem extends Ion {
-  constructor(elementRef: ElementRef) {
-    super(elementRef, null);
-  }
-}
+import {Navbar} from '../nav-bar/nav-bar';
 
 
 /**
@@ -39,21 +14,11 @@ export class ToolbarBase extends Ion  {
 
   constructor(
     elementRef: ElementRef,
-    config: IonicConfig,
-    titleQry: QueryList<ToolbarTitle>,
-    itemQry: QueryList<ToolbarItem>
+    config: IonicConfig
   ) {
     super(elementRef, config);
-    this.titleQry = titleQry;
-    this.itemQry = itemQry;
-  }
-
-  /**
-   * TODO
-   * @returns {TODO} TODO
-   */
-  getTitle() {
-    return this.titleQry.first;
+    this.itemRefs = [];
+    this.titleRef = null;
   }
 
   /**
@@ -61,7 +26,11 @@ export class ToolbarBase extends Ion  {
    * @returns {TODO} TODO
    */
   getTitleRef() {
-    return this.titleQry.first && this.titleQry.first.elementRef;
+    return this.titleRef;
+  }
+
+  setTitleRef(titleElementRef) {
+    this.titleRef = titleElementRef;
   }
 
   /**
@@ -70,15 +39,16 @@ export class ToolbarBase extends Ion  {
    * @returns {TODO} Array of this toolbar's item ElementRefs.
    */
   getItemRefs() {
-    let refs = [];
-    this.itemQry.map(function(itm) {
-      refs.push(itm.getElementRef());
-    });
-    return refs;
+    return this.itemRefs;
+  }
+
+  addItemRef(itemElementRef) {
+    this.itemRefs.push(itemElementRef);
   }
 
 }
 
+
 /**
  * TODO
  */
@@ -98,14 +68,49 @@ export class ToolbarBase extends Ion  {
     '</div>'
 })
 export class Toolbar extends ToolbarBase {
-
   constructor(
-    elementRef: ElementRef ,
-    config: IonicConfig,
-    @Query(ToolbarTitle) titleQry: QueryList<ToolbarTitle>,
-    @Query(ToolbarItem) itemQry: QueryList<ToolbarItem>
+    elementRef: ElementRef,
+    config: IonicConfig
   ) {
-    super(elementRef, config, titleQry, itemQry);
+    super(elementRef, config);
   }
 
 }
+
+
+@Component({
+  selector: 'ion-title'
+})
+@View({
+  template:
+    '<div class="toolbar-title">' +
+      '<ng-content></ng-content>' +
+    '</div>'
+})
+export class ToolbarTitle extends Ion {
+  constructor(
+    elementRef: ElementRef,
+    @Optional() toolbar: Toolbar,
+    @Optional() @Inject(forwardRef(() => Navbar)) navbar: Navbar
+  ) {
+    super(elementRef, null);
+    toolbar && toolbar.setTitleRef(elementRef);
+    navbar && navbar.setTitleRef(elementRef);
+  }
+}
+
+
+@Directive({
+  selector: 'ion-nav-items,[menu-toggle]'
+})
+export class ToolbarItem extends Ion {
+  constructor(
+    elementRef: ElementRef,
+    @Optional() toolbar: Toolbar,
+    @Optional() @Inject(forwardRef(() => Navbar)) navbar: Navbar
+  ) {
+    super(elementRef, null);
+    toolbar && toolbar.addItemRef(elementRef);
+    navbar && navbar.addItemRef(elementRef);
+  }
+}

ionic/components/view/view-controller.ts

@@ -10,6 +10,7 @@ import {NavController} from '../nav/nav-controller';
 import {PaneController} from '../nav/pane';
 import {Transition} from '../../transitions/transition';
 import {ClickBlock} from '../../util/click-block';
+import {SlideEdgeGesture} from 'ionic/gestures/slide-edge-gesture';
 import * as util from 'ionic/util';
 
 /**
@@ -449,6 +450,10 @@ export class ViewController extends Ion {
     return false;
   }
 
+  runSwipeBack() {
+    if (!this.canSwipeBack()) return;
+  }
+
   /**
    * TODO
    */
@@ -478,6 +483,8 @@ export class ViewController extends Ion {
     if (this.items.length === 1) {
       this.elementRef.nativeElement.classList.add('has-views');
     }
+
+    this.runSwipeBack();
   }
 
   /**