update to alpha.28)

domElement renamed to nativeElement

ionic/components/alert/alert.js

@@ -1,5 +1,3 @@
-// import {NgElement, Component, View, Parent} from 'angular2/angular2'
-
 
 /*
 @Component({
@@ -22,16 +20,5 @@
       </div>
     </div>`
 })
-export class Alert {
-  constructor(
-    @NgElement() ngElement:NgElement
-  ) {
-    this.domElement = ngElement.domElement
-    this.config = Alert.config.invoke(this)
-  }
-
-  static open(opts) {
-    let alert = new Alert();
-  }
-}
+export class Alert {}
 */

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

@@ -75,7 +75,7 @@ export class ParallaxEffect {
   constructor(
     elementRef: ElementRef
   ) {
-    this.domElement = elementRef.domElement;
+    this.ele = elementRef.nativeElement;
 
     setTimeout(() => {
       Object.observe(this, (changes) => {
@@ -88,7 +88,7 @@ export class ParallaxEffect {
     });
   }
   parallaxItems() {
-    let list = this.domElement;
+    let list = this.ele;
     console.log('Moving items', this.parallax);
     var x = Math.max(0, (1 - this.parallax) * 20);
     var y = 0;//Math.max(0, (1 - this.parallax) * 10);

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

@@ -37,8 +37,8 @@ export class ParallaxEffect {
     content: Content,
     elementRef: ElementRef
   ) {
-    this.domElement = elementRef.domElement;
-    this.scroller = this.domElement.querySelector('.scroll-content');
+    this.ele = elementRef.nativeElement;
+    this.scroller = this.ele.querySelector('.scroll-content');
     this.scroller.addEventListener('scroll', (e) => {
       //this.counter.innerHTML = e.target.scrollTop;
       dom.raf(() => {

ionic/components/aside/aside.js

@@ -46,19 +46,19 @@ export class Aside {
   }
 
   constructor(elementRef: ElementRef) {
-    this.domElement = elementRef.domElement
+    this.ele = elementRef.nativeElement
 
     this.opening = new EventEmitter('opening');
 
     // TODO: Use Animation Class
-    this.domElement.addEventListener('transitionend', ev => {
+    this.ele.addEventListener('transitionend', ev => {
       this.setChanging(false)
     })
   }
 
   onInit() {
     console.log('Aside content', this.content);
-    this.contentElement = (this.content instanceof Node) ? this.content : this.content.domElement;
+    this.contentElement = (this.content instanceof Node) ? this.content : this.content.ele;
 
     Aside.applyConfig(this);
     this.gestureDelegate = Aside.getDelegate(this, 'gesture');
@@ -86,7 +86,7 @@ export class Aside {
   setChanging(isChanging) {
     if (isChanging !== this.isChanging) {
       this.isChanging = isChanging
-      this.domElement.classList[isChanging ? 'add' : 'remove']('changing');
+      this.ele.classList[isChanging ? 'add' : 'remove']('changing');
     }
   }
 

ionic/components/aside/extensions/gestures.js

@@ -47,7 +47,7 @@ class AsideGesture extends SlideEdgeGesture {
   getSlideBoundaries() {
     return {
       min: 0,
-      max: this.aside.domElement.offsetWidth
+      max: this.aside.ele.offsetWidth
     };
   }
 }
@@ -60,7 +60,7 @@ export class RightAsideGesture extends LeftAsideGesture {
   }
   getSlideBoundaries() {
     return {
-      min: -this.aside.domElement.offsetWidth,
+      min: -this.aside.ele.offsetWidth,
       max: 0
     };
   }
@@ -74,7 +74,7 @@ export class TopAsideGesture extends AsideGesture {
   getSlideBoundaries() {
     return {
       min: 0,
-      max: this.aside.domElement.offsetHeight
+      max: this.aside.ele.offsetHeight
     };
   }
 }
@@ -85,7 +85,7 @@ export class BottomAsideGesture extends TopAsideGesture {
   }
   getSlideBoundaries() {
     return {
-      min: -this.aside.domElement.offsetHeight,
+      min: -this.aside.ele.offsetHeight,
       max: 0
     };
   }

ionic/components/aside/extensions/types.js

@@ -4,13 +4,13 @@ import {CSS} from 'ionic/util/dom'
 // TODO use setters instead of direct dom manipulation
 const asideManipulator = {
   setSliding(sliding) {
-    this.aside.domElement.classList[sliding ? 'add' : 'remove']('no-transition');
+    this.aside.ele.classList[sliding ? 'add' : 'remove']('no-transition');
   },
   setOpen(open) {
-    this.aside.domElement.classList[open ? 'add' : 'remove']('open');
+    this.aside.ele.classList[open ? 'add' : 'remove']('open');
   },
   setTransform(t) {
-    this.aside.domElement.style[CSS.transform] = t;
+    this.aside.ele.style[CSS.transform] = t;
   }
 }
 const contentManipulator = {

ionic/components/content/content.js

@@ -11,13 +11,13 @@ import {View} from 'angular2/src/core/annotations_impl/view';
 })
 export class Content {
   constructor(elementRef: ElementRef) {
-    // TODO(maxlynch): we need this domElement for things like aside, etc.
+    // TODO(maxlynch): we need this nativeElement for things like aside, etc.
     // but we should be able to stamp out this behavior with a base IonicComponent
-    // or something, so all elements have a domElement reference or a getElement() method
-    this.domElement = elementRef.domElement;
+    // or something, so all elements have a nativeElement reference or a getElement() method
+    this.ele = elementRef.nativeElement;
 
     setTimeout(() => {
-      this.scrollElement = this.domElement.children[0];
+      this.scrollElement = this.ele.children[0];
     });
   }
 

ionic/components/icon/icon.js

@@ -15,11 +15,11 @@ import {ElementRef} from 'angular2/src/core/compiler/element_ref';
 })
 export class Icon {
   constructor(elementRef: ElementRef) {
-    this.domElement = elementRef.domElement;
+    this.ele = elementRef.nativeElement;
   }
   onInit() {
     if (this.name) {
-      this.domElement.classList.add(this.name);
+      this.ele.classList.add(this.name);
       this.label = this.name;
     }
   }

ionic/components/item/item-swipe-buttons.js

@@ -12,7 +12,7 @@ export class ItemPrimarySwipeButtons {
     @Parent() item: Item
   ) {
     item.primarySwipeButtons = this
-    this.domElement = elementRef.domElement
+    this.ele = elementRef.nativeElement
     this.parentItem = item
     this.gesture = new ItemSlideGesture(this)
     this.gesture.listen()
@@ -22,7 +22,7 @@ export class ItemPrimarySwipeButtons {
     if (isOpen !== this.isOpen) {
       this.isOpen = isOpen
       requestAnimationFrame(() => {
-        this.domElement.classList[isOpen?'add':'remove'](isOpen)
+        this.ele.classList[isOpen?'add':'remove'](isOpen)
       })
     }
   }
@@ -36,13 +36,13 @@ export class ItemSecondarySwipeButtons {
 
 class ItemSlideGesture extends SlideGesture {
   constructor(buttons) {
-    super(buttons.parentItem.domElement)
+    super(buttons.parentItem.ele)
     this.buttons = buttons
   }
 
   getSlideBoundaries() {
     return {
-      min: -this.buttons.domElement.offsetWidth,
+      min: -this.buttons.ele.offsetWidth,
       max: 0,
     };
   }
@@ -52,18 +52,18 @@ class ItemSlideGesture extends SlideGesture {
   }
 
   onSlideBeforeStart() {
-    this.buttons.domElement.classList.add('changing')
-    this.buttons.domElement.classList.add('no-transition')
+    this.buttons.ele.classList.add('changing')
+    this.buttons.ele.classList.add('no-transition')
     return new Promise(resolve => {
       requestAnimationFrame(resolve)
     })
   }
   onSlide(slide, ev) {
-    this.buttons.domElement.style.transform = 'translate3d(' + slide.distance + 'px,0,0)';
+    this.buttons.ele.style.transform = 'translate3d(' + slide.distance + 'px,0,0)';
   }
   onSlideEnd(slide, ev) {
-    this.buttons.domElement.style.transform = ''
-    this.buttons.domElement.classList.remove('no-transition')
+    this.buttons.ele.style.transform = ''
+    this.buttons.ele.classList.remove('no-transition')
     if (Math.abs(ev.velocityX) > 0.2 || Math.abs(slide.delta) > Math.abs(slide.max) * 0.5) {
       this.buttons.setOpen(!this.buttons.isOpen);
     }

ionic/components/item/item.js

@@ -58,7 +58,7 @@ export class Item {
     this._isTransitioning = false;
     this._transform = '';
 
-    this.domElement = elementRef.domElement;
+    this.ele = elementRef.nativeElement;
     this.swipeButtons = {};
     this.optionButtons = {};
   }

ionic/components/layout/layout.js

@@ -1,4 +1,4 @@
-import {NgElement, Component, View, Parent} from 'angular2/angular2'
+import {ElementRef, Component, View, Parent} from 'angular2/angular2'
 
 
 @Component({
@@ -12,10 +12,10 @@ import {NgElement, Component, View, Parent} from 'angular2/angular2'
 })
 export class Layout {
   constructor(
-    @NgElement() ngElement:NgElement
+    @ElementRef() elementRef:ElementRef
   ) {
-    this.domElement = ngElement.domElement
-    this.eqEle = this.domElement.lastElementChild
+    this.ele = ngElement.nativeElement
+    this.eqEle = this.ele.lastElementChild
 
     window.requestAnimationFrame(() => {
       this.initLayout()
@@ -26,8 +26,8 @@ export class Layout {
     this.mqs = {}
 
 
-    for (let x = 0; x < this.domElement.attributes.length; x++) {
-      let attr = this.domElement.attributes[x]
+    for (let x = 0; x < this.ele.attributes.length; x++) {
+      let attr = this.ele.attributes[x]
       let val = attr.nodeValue
       let mqClassname = attr.nodeName
 
@@ -38,7 +38,7 @@ export class Layout {
           this.mqs[mql.media] = (mql) => {
             console.log(mql.media, mql.matches, mqClassname)
             window.requestAnimationFrame(() => {
-              this.domElement.classList[mql.matches ? 'add' : 'remove'](mqClassname)
+              this.ele.classList[mql.matches ? 'add' : 'remove'](mqClassname)
             })
           }
 

ionic/components/list/list.js

@@ -22,7 +22,7 @@ export class List {
   }
 
   constructor(elementRef: ElementRef) {
-    this.domElement = elementRef.domElement;
+    this.ele = elementRef.nativeElement;
   }
 
   onInit() {

ionic/components/list/virtual.js

@@ -5,7 +5,7 @@ export class ListVirtualScroll {
     this.list = list;
     this.content = this.list.content;
 
-    this.viewportHeight = this.content.domElement.offsetHeight;
+    this.viewportHeight = this.content.ele.offsetHeight;
 
     this.viewContainer = this.list.itemTemplate.viewContainer;
 
@@ -31,7 +31,7 @@ export class ListVirtualScroll {
   }
 
   resize() {
-    this.viewportHeight = this.content.domElement.offsetHeight;
+    this.viewportHeight = this.content.ele.offsetHeight;
     this.viewportScrollHeight = this.content.scrollElement.scrollHeight;
 
     this.virtualHeight = this.list.items.length * this.itemHeight;
@@ -100,7 +100,7 @@ export class ListVirtualScroll {
     }
 
     console.log('VIRTUAL SCROLL: scroll(scrollTop:', st, 'topIndex:', topIndex, 'bottomIndex:', bottomIndex, ')');
-    console.log('Container has', this.list.domElement.children.length, 'children');
+    console.log('Container has', this.list.ele.children.length, 'children');
   }
 
   cellAtIndex(index) {

ionic/components/nav-bar/nav-bar.js

@@ -39,8 +39,8 @@ import * as dom from '../../util/dom';
 })
 export class Navbar {
   constructor(item: ViewItem, elementRef: ElementRef) {
-    this._ele = elementRef.domElement;
-    this._itmEles = [];
+    this.ele = elementRef.nativeElement;
+    this.itemEles = [];
     item.navbarView(this);
 
     this.bbDefault = 'Back';
@@ -48,40 +48,40 @@ export class Navbar {
   }
 
   element() {
-    return this._ele;
+    return this.ele;
   }
 
-  backButtonElement() {
+  backButtonElement(ele) {
     if (arguments.length) {
-      this._bbEle = arguments[0];
+      this._bbEle = ele;
     }
     return this._bbEle;
   }
 
-  backButtonTextElement() {
+  backButtonTextElement(ele) {
     if (arguments.length) {
-      this._bbTxEle = arguments[0];
+      this._bbTxEle = ele;
     }
     return this._bbTxEle;
   }
 
-  titleElement() {
+  titleElement(ele) {
     if (arguments.length) {
-      this._nbTlEle = arguments[0];
+      this._nbTlEle = ele;
     }
     return this._nbTlEle;
   }
 
-  itemElements() {
+  itemElements(ele) {
     if (arguments.length) {
-      this._itmEles.push(arguments[0]);
+      this.itemEles.push(ele);
     }
-    return this._itmEles;
+    return this.itemEles;
   }
 
-  titleText() {
+  titleText(ele) {
     if (arguments.length) {
-      this._ttTxt.push(arguments[0]);
+      this._ttTxt.push(ele);
     }
     return this._ttTxt;
   }
@@ -89,7 +89,7 @@ export class Navbar {
   alignTitle() {
     // called after the navbar/title has had a moment to
     // finish rendering in their correct locations
-    const navbarEle = this._ele;
+    const navbarEle = this.ele;
     const titleEle = this._ttEle || (this._ttEle = navbarEle.querySelector('ion-title'));
 
     // don't bother if there's no title element
@@ -125,7 +125,7 @@ export class Navbar {
 
   didEnter() {
     setTimeout(() => {
-      const titleEle = this._ttEle || (this._ttEle = this._ele.querySelector('ion-title'));
+      const titleEle = this._ttEle || (this._ttEle = this.ele.querySelector('ion-title'));
       //this.titleText((titleEle && titleEle.textContent) || '');
     }, 32);
   }
@@ -140,7 +140,7 @@ export class Navbar {
 class BackButton {
   constructor(@Parent() navbar: Navbar, item: ViewItem, elementRef: ElementRef) {
     this.item = item;
-    navbar.backButtonElement(elementRef.domElement);
+    navbar.backButtonElement(elementRef.nativeElement);
   }
 
   goBack(ev) {
@@ -155,7 +155,7 @@ class BackButton {
 })
 class BackButtonText {
   constructor(@Parent() navbar: Navbar, elementRef: ElementRef) {
-    navbar.backButtonTextElement(elementRef.domElement);
+    navbar.backButtonTextElement(elementRef.nativeElement);
   }
 }
 
@@ -164,7 +164,7 @@ class BackButtonText {
 })
 class Title {
   constructor(@Parent() navbar: Navbar, elementRef: ElementRef) {
-    navbar.titleElement(elementRef.domElement);
+    navbar.titleElement(elementRef.nativeElement);
   }
 }
 
@@ -173,7 +173,7 @@ class Title {
 })
 class NavbarItem {
   constructor(@Parent() navbar: Navbar, elementRef: ElementRef) {
-    navbar.itemElements(elementRef.domElement);
+    navbar.itemElements(elementRef.nativeElement);
   }
 }
 

ionic/components/nav/pane.js

@@ -39,7 +39,10 @@ export class PaneController {
 
       // add a Pane element
       // when the Pane is added, it'll also add its reference to the panes object
-      viewCtrl.loader.loadNextToExistingLocation(Pane, viewCtrl.anchorElementRef(), injector).then(() => {
+      // viewCtrl.compiler.compileInHost(this.ComponentType).then(componentProtoViewRef => {
+
+      // });
+      viewCtrl.loader.loadNextToLocation(Pane, viewCtrl.anchorElementRef(), injector).then(() => {
 
         // get the pane reference by name
         pane = this.panes[key];
@@ -62,7 +65,7 @@ export class PaneController {
           // as each section is compiled and added to the Pane
           // the section will add a reference to itself in the Pane's sections object
           promises.push(
-            viewCtrl.loader.loadNextToExistingLocation(SectionClass, sectionAnchorElementRef)
+            viewCtrl.loader.loadNextToLocation(SectionClass, sectionAnchorElementRef)
           );
         });
 
@@ -108,16 +111,16 @@ export class Pane {
   }
 
   constructor(viewCtrl: ViewController, elementRef: ElementRef) {
-    this.domElement = elementRef.domElement;
+    this.ele = elementRef.nativeElement;
     viewCtrl.panes.add(this);
   }
 
   width() {
-    return this.domElement.offsetWidth;
+    return this.ele.offsetWidth;
   }
 
   showPane(val) {
-    this.domElement.classList[val ? 'add' : 'remove']('show-pane');
+    this.ele.classList[val ? 'add' : 'remove']('show-pane');
   }
 }
 

ionic/components/nav/swipe-handle.js

@@ -11,7 +11,7 @@ import {Gesture} from 'ionic/gestures/gesture';
 @Directive({
   selector: '.swipe-handle',
   host: {
-    '[class.show-handle]': 'showHandle()'
+    '[class.show-handle]': 'showHandle'
   }
 })
 export class SwipeHandle {
@@ -27,7 +27,7 @@ export class SwipeHandle {
     self.pane = pane;
     self.viewCtrl = viewCtrl;
 
-    let gesture = self.gesture = new Gesture(elementRef.domElement);
+    let gesture = self.gesture = new Gesture(elementRef.nativeElement);
     gesture.listen();
 
     function dragHorizontal(ev) {
@@ -92,7 +92,7 @@ export class SwipeHandle {
     this.viewCtrl.swipeBackProgress( (ev.gesture.center.x - this.startX) / this.width );
   }
 
-  showHandle() {
+  get showHandle() {
     return (this.viewCtrl ? this.viewCtrl.swipeBackEnabled() : false);
   }
 

ionic/components/overlay/overlay.js

@@ -24,7 +24,7 @@ export class Overlay {
         overlay.setApp(app);
         overlay._type = overlayType;
         overlay._handle = opts && opts.handle;
-        overlay._domElement = ref.elementRef.domElement;
+        overlay._ele = ref.elementRef.nativeElement;
         overlay.extendOptions(opts);
 
         overlay.zIndex = ROOT_Z_INDEX;
@@ -49,7 +49,7 @@ export class Overlay {
 
   _open(opts) {
     let animationName = (opts && opts.animation) || this.options.enterAnimation;
-    let enterAnimation = Animation.create(this._domElement, animationName);
+    let enterAnimation = Animation.create(this._ele, animationName);
     enterAnimation.before.addClass('ion-app');
     enterAnimation.before.addClass('show-overlay');
     ClickBlock(true, enterAnimation.duration() + 200);
@@ -66,7 +66,7 @@ export class Overlay {
   close(opts) {
     return new Promise(resolve => {
       let animationName = (opts && opts.animation) || this.options.leaveAnimation;
-      let leavingAnimation = Animation.create(this._domElement, animationName);
+      let leavingAnimation = Animation.create(this._ele, animationName);
       leavingAnimation.after.removeClass('show-overlay');
       ClickBlock(true, leavingAnimation.duration() + 200);
 

ionic/components/radio/radio.js

@@ -20,12 +20,12 @@ export class RadioGroup {
     elementRef: ElementRef//,
     //cd:ControlDirective
   ) {
-    this.domElement = elementRef.domElement
+    this.ele = elementRef.nativeElement
     // this.config = RadioGroup.config.invoke(this)
     // this.controlDirective = cd;
     // cd.valueAccessor = this; //ControlDirective should inject CheckboxControlDirective
 
-    this.domElement.classList.add('list');
+    this.ele.classList.add('list');
 
     this.buttons = [];
   }
@@ -122,10 +122,10 @@ export class RadioButton {
     @Ancestor() group: RadioGroup,
     elementRef: ElementRef
   ) {
-    this.domElement = elementRef.domElement;
+    this.ele = elementRef.ele;
 
-    this.domElement.classList.add('item')
-    this.domElement.setAttribute('aria-checked', true)
+    this.ele.classList.add('item')
+    this.ele.setAttribute('aria-checked', true)
 
     this.group = group;
 
@@ -133,13 +133,13 @@ export class RadioButton {
   }
 
   setActive(isActive) {
-    // TODO: No domElement
+    // TODO: No ele
     if(isActive) {
-      this.domElement.classList.add('active');
-      this.domElement.setAttribute('aria-checked', true)
+      this.ele.classList.add('active');
+      this.ele.setAttribute('aria-checked', true)
     } else {
-      this.domElement.classList.remove('active');
-      this.domElement.setAttribute('aria-checked', false)
+      this.ele.classList.remove('active');
+      this.ele.setAttribute('aria-checked', false)
     }
   }
 

ionic/components/scroll/pull-to-refresh.js

@@ -17,8 +17,8 @@ export class Refresher {
     @Parent() content: Content,
     element: ElementRef
   ) {
-    this.domElement = element.domElement;
-    this.domElement.classList.add('content');
+    this.ele = element.nativeElement;
+    this.ele.classList.add('content');
 
     this.refresh = new EventEmitter('refresh');
 

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

@@ -37,7 +37,7 @@ export class SearchBar {
     elementRef: ElementRef//,
     //cd:ControlDirective
   ) {
-    this.domElement = elementRef.domElement;
+    this.ele = elementRef.nativeElement;
     // this.controlDirective = cd;
     // cd.valueAccessor = this; //ControlDirective should inject CheckboxControlDirective
 

ionic/components/segment/segment.js

@@ -89,7 +89,7 @@ export class Segment {
     elementRef: ElementRef,
     renderer: Renderer
   ) {
-    this.domElement = elementRef.domElement
+    this.ele = elementRef.nativeElement
     this.elementRef = elementRef;
     this.renderer = renderer;
 
@@ -177,7 +177,7 @@ export class SegmentButton {
     @Ancestor() segment: Segment,
     elementRef: ElementRef
   ) {
-    this.domElement = elementRef.domElement
+    this.ele = elementRef.ele
     this.segment = segment;
   }
 

ionic/components/slides/slides.js

@@ -49,7 +49,7 @@ export class Slides {
 
   constructor(elementRef: ElementRef) {
     // Grab the main container, and the slides-view wrapper
-    this.domElement = elementRef.domElement;
+    this.ele = elementRef.nativeElement;
 
     this.slides = [];
     this.currentIndex = 0;
@@ -72,7 +72,7 @@ export class Slides {
     this.continuous = util.isDefined(this.loop) && (this.slides.length > 1 ? true : false);
 
     // Grab the wrapper element that contains the slides
-    this.wrapperElement = this.domElement.children[0];
+    this.wrapperElement = this.ele.children[0];
 
     this.resize();
 
@@ -115,7 +115,7 @@ export class Slides {
   resize() {
     // Get the width of the container, which is the viewport
     // that the user will actually see.
-    this.containerWidth = this.domElement.offsetWidth || this.domElement.getBoundingClientRect().width;
+    this.containerWidth = this.ele.offsetWidth || this.ele.getBoundingClientRect().width;
 
     // Set the wrapper element to the total width of the child elements
     this.wrapperElement.style.width = ((this.containerWidth * this.slides.length)) + 'px';
@@ -467,7 +467,7 @@ export class Slide {
     @Ancestor() slides: Slides,
     elementRef: ElementRef
   ) {
-    this.domElement = elementRef.domElement;
+    this.ele = elementRef.nativeElement;
 
     slides.add(this);
   }
@@ -484,8 +484,8 @@ export class Slide {
 
     duration = duration || 0;
 
-    this.domElement.style[dom.CSS.transition + 'Duration'] = duration + 'ms';
-    this.domElement.style[dom.CSS.transform] = 'translate3d(' + x + 'px, 0, 0)';
+    this.ele.style[dom.CSS.transition + 'Duration'] = duration + 'ms';
+    this.ele.style[dom.CSS.transform] = 'translate3d(' + x + 'px, 0, 0)';
   }
 
   get translateX() {
@@ -494,7 +494,7 @@ export class Slide {
 
   set left(x) {
     this._left = x;
-    this.domElement.style.left = x + 'px';
+    this.ele.style.left = x + 'px';
   }
   get left() {
     return this._left;
@@ -502,7 +502,7 @@ export class Slide {
 
   set width(width) {
     this._width = width;
-    this.domElement.style.width = width + 'px';
+    this.ele.style.width = width + 'px';
   }
 
   get width() {
@@ -524,7 +524,7 @@ export class SlidePager {
     @Ancestor() slides: Slides,
     elementRef: ElementRef
   ) {
-    this.domElement = elementRef.domElement;
+    this.ele = elementRef.nativeElement;
 
     this.slides = slides;
 
@@ -545,7 +545,7 @@ export class SlidePager {
 
 export class SlidesGesture extends DragGesture {
   constructor(slides) {
-    super(slides.domElement);
+    super(slides.ele);
     this.slides = slides;
   }
   onDrag(event) {

ionic/components/split-view/split-view.js

@@ -1,4 +1,4 @@
-import {Component, Parent, Decorator, View, NgElement} from 'angular2/angular2'
+import {Component, Parent, Decorator, View, ElementRef} from 'angular2/angular2'
 import {Nav} from 'ionic/components/nav/nav'
 import * as util from 'ionic/util'
 
@@ -59,10 +59,10 @@ ion-split-view > [split-viewport] {
 })
 export class SplitView {
   constructor(
-    element: NgElement,
+    elementRef: ElementRef,
     @Parent() navPane: NavPane
   ) {
-    this.domElement = element.domElement
+    this.ele = elementRef.nativeElement
     this.navPane = navPane
 
     // TODO mq.addEventListener() doesn't work with zone.js

ionic/components/switch/switch.js

@@ -36,21 +36,21 @@ export class Switch {
     elementRef: ElementRef,
     cd: ControlDirective
   ) {
-    this.domElement = elementRef.domElement
+    this.ele = elementRef.nativeElement
     this.config = Switch.config.invoke(this)
     this.controlDirective = cd;
     cd.valueAccessor = this;
 
     // TODO: These are temporary until we figure out what to do
     // with @PropertSetter
-    let setAriaRole = (v) => this.domElement.setAttribute('aria-role', v)
-    let setAriaChecked = (v) => this.domElement.setAttribute('aria-checked', v)
-    let setAriaInvalid = (v) => this.domElement.setAttribute('aria-invalid', v)
-    let setAriaDisabled = (v) => this.domElement.setAttribute('aria-disabled', v)
+    let setAriaRole = (v) => this.ele.setAttribute('aria-role', v)
+    let setAriaChecked = (v) => this.ele.setAttribute('aria-checked', v)
+    let setAriaInvalid = (v) => this.ele.setAttribute('aria-invalid', v)
+    let setAriaDisabled = (v) => this.ele.setAttribute('aria-disabled', v)
 
-    //let setChecked = (v) => this.domElement.setAttribute('checked', v);
+    //let setChecked = (v) => this.ele.setAttribute('checked', v);
 
-    this.domElement.classList.add('item')
+    this.ele.classList.add('item')
 
     // TODO: These rely on the commented-out PropertySetter's above
     //setAriaRole('checkbox')

ionic/components/tabs/tab.js

@@ -23,7 +23,7 @@ import {Content} from '../content/content';
   host: {
     '[attr.id]': 'panelId',
     '[attr.aria-labelledby]': 'labeledBy',
-    '[attr.aria-hidden]': '!isSelected',
+    '[attr.aria-hidden]': 'isNotSelected',
     '[class.tab-selected]': 'isSelected',
     'role': 'tabpanel'
   }
@@ -51,7 +51,7 @@ export class Tab extends ViewController {
 
     let item = this.item = new ViewItem(tabs.parent);
     item.setInstance(this);
-    item.viewElement(elementRef.domElement);
+    item.viewElement(elementRef.nativeElement);
     tabs.addTab(this);
 
     this.navbarView = item.navbarView = () => {
@@ -97,6 +97,10 @@ export class Tab extends ViewController {
     return this.tabs.isActive(this.item);
   }
 
+  get isNotSelected() {
+    return !this.tabs.isActive(this.item);
+  }
+
 }
 
 

ionic/components/toolbar/toolbar.js

@@ -20,7 +20,7 @@ import * as dom from '../../util/dom';
 })
 export class Toolbar {
   constructor(elementRef:ElementRef, ngZone:NgZone) {
-    this.domElement = elementRef.domElement;
+    this.ele = elementRef.nativeElement;
     Toolbar.config.invoke(this);
 
     /*
@@ -34,7 +34,7 @@ export class Toolbar {
   }
 
   alignTitle() {
-    const toolbarEle = this.domElement;
+    const toolbarEle = this.ele;
     const innerTitleEle = this._innerTitleEle || (this._innerTitleEle = toolbarEle.querySelector('.toolbar-inner-title'));
     const titleEle = this._titleEle || (this._titleEle = innerTitleEle.querySelector('ion-title'));
     const style = this._style || (this._style = window.getComputedStyle(titleEle));

ionic/components/view/view-controller.js

@@ -28,7 +28,7 @@ export class ViewController {
     this.injector = injector;
 
     // TODO: Make this generic?
-    this.domElement = elementRef.domElement;
+    this.ele = elementRef.nativeElement;
 
     this.items = [];
     this.navCtrl = new NavController(this);

ionic/components/view/view.js

@@ -10,7 +10,6 @@ import {ViewItem} from './view-item';
 })
 export class IonView {
   constructor(@Optional() item: ViewItem, elementRef: ElementRef) {
-    console.log('View constructor', item)
-    this.domElement = elementRef.domElement;
+    this.ele = elementRef.nativeElement;
   }
 }

ionic/transitions/transition.js

@@ -67,7 +67,7 @@ export class Transition extends Animation {
       this.leavingTitle = new Animation(leavingItem.titleElement());
       leavingNavbar.add(this.leavingTitle);
 
-      this.leavingNavbarItems = new Animation(leavingItem.navbarItemElements())
+      this.leavingNavbarItems = new Animation(leavingItem.navbarItemElements());
       this.leavingNavbarItems.fadeOut();
       leavingNavbar.add(this.leavingNavbarItems);