chore(angular): upgrade to angular 2.0.0-beta.1

Biggest change was that renderer takes  and not just .

gulpfile.js

@@ -159,6 +159,8 @@ gulp.task('transpile.no-typecheck', function(){
     .pipe(gulp.dest('dist'));
 });
 
+gulp.task('typecheck', ['transpile.typecheck']);
+
 gulp.task('transpile.typecheck', function(){
   var merge = require('merge2');
   var stripDebug = require('gulp-strip-debug');

ionic/components/action-sheet/action-sheet.ts

@@ -175,7 +175,7 @@ class ActionSheetCmp {
     this.d = params.data;
 
     if (this.d.cssClass) {
-      renderer.setElementClass(elementRef, this.d.cssClass, true);
+      renderer.setElementClass(elementRef.nativeElement, this.d.cssClass, true);
     }
   }
 

ionic/components/alert/alert.ts

@@ -279,14 +279,12 @@ export class Alert extends ViewController {
   host: {
     'role': 'dialog',
     '[attr.aria-labelledby]': 'hdrId',
-    '[attr.aria-describedby]': 'descId',
-    '[class]': 'cssClass'
+    '[attr.aria-describedby]': 'descId'
   },
   directives: [NgClass, NgSwitch, NgIf, NgFor]
 })
 class AlertCmp {
   activeId: string;
-  cssClass: string;
   descId: string;
   d: any;
   hdrId: string;
@@ -304,7 +302,10 @@ class AlertCmp {
     renderer: Renderer
   ) {
     this.d = params.data;
-    this.cssClass = this.d.cssClass || '';
+
+    if (this.d.cssClass) {
+      renderer.setElementClass(elementRef.nativeElement, this.d.cssClass, true);
+    }
 
     this.id = (++alertIds);
     this.descId = '';

ionic/components/app/id.ts

@@ -41,7 +41,7 @@ import {IonicApp} from './app';
 })
 export class IdRef {
   private _component: any;
-  
+
   @Input() id: string;
 
   constructor(private _app: IonicApp, elementRef: ElementRef, appViewManager: AppViewManager) {
@@ -88,6 +88,6 @@ export class Attr {
  * @private
  */
   ngOnInit() {
-    this._renderer.setElementAttribute(this._elementRef, this.attr, '');
+    this._renderer.setElementAttribute(this._elementRef.nativeElement, this.attr, '');
   }
 }

ionic/components/button/button.ts

@@ -57,7 +57,7 @@ export class Button {
     let element = _elementRef.nativeElement;
 
     if (config.get('hoverCSS') === false) {
-      _renderer.setElementClass(_elementRef, 'disable-hover', true);
+      _renderer.setElementClass(_elementRef.nativeElement, 'disable-hover', true);
     }
 
     if (element.hasAttribute('ion-item')) {
@@ -100,18 +100,21 @@ export class Button {
   /**
    * @private
    */
-  addClass(className) {
-    this._renderer.setElementClass(this._elementRef, className, true);
+  addClass(className: string) {
+    this._renderer.setElementClass(this._elementRef.nativeElement, className, true);
   }
 
   /**
    * @private
    */
-  setRole(val) {
+  setRole(val: string) {
     this._role = val;
   }
 
-  _readIcon(element) {
+  /**
+   * @private
+   */
+  private _readIcon(element: HTMLElement) {
     // figure out if and where the icon lives in the button
     let childNodes = element.childNodes;
     let childNode;
@@ -149,7 +152,10 @@ export class Button {
     }
   }
 
-  _readAttrs(element) {
+  /**
+   * @private
+   */
+  private _readAttrs(element: HTMLElement) {
     let elementAttrs = element.attributes;
     let attrName;
     for (let i = 0, l = elementAttrs.length; i < l; i++) {
@@ -175,10 +181,13 @@ export class Button {
     }
   }
 
-  _assignCss(assignCssClass) {
+  /**
+   * @private
+   */
+  private _assignCss(assignCssClass: boolean) {
     let role = this._role;
     if (role) {
-      this._renderer.setElementClass(this._elementRef, role, assignCssClass); // button
+      this._renderer.setElementClass(this._elementRef.nativeElement, role, assignCssClass); // button
 
       this._setClass(this._style, assignCssClass); // button-clear
       this._setClass(this._shape, assignCssClass); // button-round
@@ -193,16 +202,19 @@ export class Button {
     }
   }
 
-  _setClass(type, assignCssClass) {
+  /**
+   * @private
+   */
+  private _setClass(type: string, assignCssClass: boolean) {
     if (type) {
-      this._renderer.setElementClass(this._elementRef, this._role + '-' + type, assignCssClass);
+      this._renderer.setElementClass(this._elementRef.nativeElement, this._role + '-' + type, assignCssClass);
     }
   }
 
 /**
  * @private
  */
-  static setRoles(contentButtonChildren, role) {
+  static setRoles(contentButtonChildren, role: string) {
     let buttons = contentButtonChildren.toArray();
     buttons.forEach(button => {
       button.setRole(role);

ionic/components/checkbox/checkbox.ts

@@ -35,14 +35,15 @@ import {Form} from '../../util/form';
       '<div class="checkbox-media" disable-activated>' +
         '<div class="checkbox-icon"></div>' +
       '</div>' +
-      '<ion-item-content id="{{labelId}}">' +
+      '<ion-item-content id="{{_labelId}}">' +
         '<ng-content></ng-content>' +
       '</ion-item-content>' +
     '</div>'
 })
 export class Checkbox {
   private _checked: boolean;
-  private labelId: string;
+  private _labelId: string;
+
   @Input() value: string = '';
   @Input() disabled: boolean = false;
   @Input() id: string;
@@ -66,11 +67,11 @@ export class Checkbox {
   ngOnInit() {
     if (!this.id) {
       this.id = 'chk-' + this._form.nextId();
-      this._renderer.setElementAttribute(this._elementRef, 'id', this.id);
+      this._renderer.setElementAttribute(this._elementRef.nativeElement, 'id', this.id);
     }
 
-    this.labelId = 'lbl-' + this.id;
-    this._renderer.setElementAttribute(this._elementRef, 'aria-labelledby', this.labelId);
+    this._labelId = 'lbl-' + this.id;
+    this._renderer.setElementAttribute(this._elementRef.nativeElement, 'aria-labelledby', this._labelId);
   }
 
   /**
@@ -81,14 +82,14 @@ export class Checkbox {
     this.checked = !this.checked;
   }
 
-  @Input() 
-  get checked() {
+  @Input()
+  get checked(): boolean {
     return !!this._checked;
   }
 
   set checked(val) {
     this._checked = !!val;
-    this._renderer.setElementAttribute(this._elementRef, 'aria-checked', this._checked.toString());
+    this._renderer.setElementAttribute(this._elementRef.nativeElement, 'aria-checked', this._checked.toString());
     this.onChange(this._checked);
   }
 

ionic/components/icon/icon.ts

@@ -75,7 +75,7 @@ export class Icon {
    */
   ngOnDestroy() {
     if (this._css) {
-      this._renderer.setElementClass(this._elementRef, this._css, false);
+      this._renderer.setElementClass(this._elementRef.nativeElement, this._css, false);
     }
   }
 
@@ -146,12 +146,12 @@ export class Icon {
 
     if (this._css !== css) {
       if (this._css) {
-        this._renderer.setElementClass(this._elementRef, this._css, false);
+        this._renderer.setElementClass(this._elementRef.nativeElement, this._css, false);
       }
       this._css = css;
-      this._renderer.setElementClass(this._elementRef, css, true);
+      this._renderer.setElementClass(this._elementRef.nativeElement, css, true);
 
-      this._renderer.setElementAttribute(this._elementRef, 'aria-label',
+      this._renderer.setElementAttribute(this._elementRef.nativeElement, 'aria-label',
           css.replace('ion-', '').replace('ios-', '').replace('md-', '').replace('-', ' '));
     }
   }
@@ -161,7 +161,7 @@ export class Icon {
    * @param {string} add class name
    */
   addClass(className: string) {
-    this._renderer.setElementClass(this._elementRef, className, true);
+    this._renderer.setElementClass(this._elementRef.nativeElement, className, true);
   }
 
 }

ionic/components/input/input.ts

@@ -357,7 +357,7 @@ export class ItemInput {
    * @private
    */
   focusChange(inputHasFocus) {
-    this._renderer.setElementClass(this._elementRef, 'input-focused', inputHasFocus);
+    this._renderer.setElementClass(this._elementRef.nativeElement, 'input-focused', inputHasFocus);
     if (!inputHasFocus) {
       this.deregMove();
     }
@@ -375,7 +375,7 @@ export class ItemInput {
    */
   hasValue(inputValue) {
     let inputHasValue = !!(inputValue && inputValue !== '');
-    this._renderer.setElementClass(this._elementRef, 'input-has-value', inputHasValue);
+    this._renderer.setElementClass(this._elementRef.nativeElement, 'input-has-value', inputHasValue);
   }
 
   /**

ionic/components/label/label.ts

@@ -54,7 +54,7 @@ export class Label {
    * @param {string} add class name
    */
   addClass(className: string) {
-    this._renderer.setElementClass(this._elementRef, className, true);
+    this._renderer.setElementClass(this._elementRef.nativeElement, className, true);
   }
 
 }

ionic/components/list/list.ts

@@ -153,7 +153,7 @@ export class ListHeader {
 
   public set id(val: string) {
     this._id = val;
-    this._renderer.setElementAttribute(this._elementRef, 'id', val);
+    this._renderer.setElementAttribute(this._elementRef.nativeElement, 'id', val);
   }
 
 }

ionic/components/menu/menu.ts

@@ -151,7 +151,7 @@ export class Menu extends Ion {
     if (self.side !== 'left' && self.side !== 'right') {
       self.side = 'left';
     }
-    self._renderer.setElementAttribute(self._elementRef, 'side', self.side);
+    self._renderer.setElementAttribute(self._elementRef.nativeElement, 'side', self.side);
 
     if (self.swipeEnabled === 'false') {
       self.isSwipeEnabled = false;
@@ -209,7 +209,7 @@ export class Menu extends Ion {
       type = this._config.get('menuType');
     }
     this.type = type;
-    this._renderer.setElementAttribute(this._elementRef, 'menuType', type);
+    this._renderer.setElementAttribute(this._elementRef.nativeElement, 'menuType', type);
   }
 
   /**

ionic/components/nav/nav-controller.ts

@@ -1102,7 +1102,7 @@ export class NavController extends Ion {
       // class to the nav when it's finished its first transition
       if (!this._init) {
         this._init = true;
-        this._renderer.setElementClass(this.elementRef, 'has-views', true);
+        this._renderer.setElementClass(this.elementRef.nativeElement, 'has-views', true);
       }
 
       // allow clicks and enable the app again
@@ -1178,12 +1178,12 @@ export class NavController extends Ion {
 
       // auto-add page css className created from component JS class name
       let cssClassName = pascalCaseToDashCase(view.componentType['name']);
-      this._renderer.setElementClass(pageElementRef, cssClassName, true);
+      this._renderer.setElementClass(pageElementRef.nativeElement, cssClassName, true);
 
       view.addDestroy(() => {
         // ensure the element is cleaned up for when the view pool reuses this element
-        this._renderer.setElementAttribute(pageElementRef, 'class', null);
-        this._renderer.setElementAttribute(pageElementRef, 'style', null);
+        this._renderer.setElementAttribute(pageElementRef.nativeElement, 'class', null);
+        this._renderer.setElementAttribute(pageElementRef.nativeElement, 'style', null);
 
         // remove the page from its container
         let index = viewContainer.indexOf(hostViewRef);

ionic/components/nav/nav.ts

@@ -101,7 +101,7 @@ import {ViewController} from './view-controller';
  */
 @Component({
   selector: 'ion-nav',
-  template: '<template #contents></template>'
+  template: '<div #contents></div>'
 })
 export class Nav extends NavController {
   @Input() root: Type;

ionic/components/nav/view-controller.ts

@@ -165,11 +165,11 @@ export class ViewController {
 
       this._hdAttr = (shouldShow ? null : '');
 
-      renderer.setElementAttribute(this._pgRef, 'hidden', this._hdAttr);
+      renderer.setElementAttribute(this._pgRef.nativeElement, 'hidden', this._hdAttr);
 
       let navbarRef = this.navbarRef();
       if (navbarRef) {
-        renderer.setElementAttribute(navbarRef, 'hidden', this._hdAttr);
+        renderer.setElementAttribute(navbarRef.nativeElement, 'hidden', this._hdAttr);
       }
     }
   }
@@ -177,7 +177,7 @@ export class ViewController {
   setZIndex(zIndex: number, renderer: Renderer) {
     if (this._pgRef && zIndex !== this.zIndex) {
       this.zIndex = zIndex;
-      renderer.setElementStyle(this._pgRef, 'z-index', zIndex.toString());
+      renderer.setElementStyle(this._pgRef.nativeElement, 'z-index', zIndex.toString());
     }
   }
 

ionic/components/radio/radio.ts

@@ -44,12 +44,12 @@ import {isDefined} from '../../util/util';
 })
 export class RadioButton {
   labelId: any;
-  
+
   @Input() checked: any = false;
   @Input() disabled: boolean = false;
   @Input() id: string;
   @Input() value: string = '';
-  
+
   @Output() select: EventEmitter<RadioButton> = new EventEmitter();
 
   constructor(
@@ -66,17 +66,17 @@ export class RadioButton {
   ngOnInit() {
     if (!this.id) {
       this.id = 'rb-' + this._form.nextId();
-      this._renderer.setElementAttribute(this._elementRef, 'id', this.id);
+      this._renderer.setElementAttribute(this._elementRef.nativeElement, 'id', this.id);
     }
     this.labelId = 'lbl-' + this.id;
-    this._renderer.setElementAttribute(this._elementRef, 'aria-labelledby', this.labelId);
+    this._renderer.setElementAttribute(this._elementRef.nativeElement, 'aria-labelledby', this.labelId);
 
     let checked = this.checked;
     if (typeof checked === 'string') {
       this.checked = (checked === '' || checked === 'true');
     }
     this.isChecked = this.checked;
-    this._renderer.setElementAttribute(this._elementRef, 'checked', null);
+    this._renderer.setElementAttribute(this._elementRef.nativeElement, 'checked', null);
   }
 
   /**
@@ -89,7 +89,7 @@ export class RadioButton {
   }
 
   public set isChecked(isChecked) {
-    this._renderer.setElementAttribute(this._elementRef, 'aria-checked', isChecked);
+    this._renderer.setElementAttribute(this._elementRef.nativeElement, 'aria-checked', isChecked);
   }
 
   /**
@@ -155,13 +155,13 @@ export class RadioButton {
   }
 })
 export class RadioGroup {
+  id;
+  value;
+
   @Output() change: EventEmitter<RadioGroup> = new EventEmitter();
   @ContentChildren(RadioButton) private _buttons;
   @ContentChild(ListHeader) private _header;
 
-  id: any;
-  value: any;
-
   constructor(
     @Optional() ngControl: NgControl,
     private _renderer: Renderer,
@@ -180,7 +180,7 @@ export class RadioGroup {
    * the checked value.
    * https://github.com/angular/angular/blob/master/modules/angular2/src/forms/directives/shared.ts#L34
    */
-  public writeValue(value) {
+  writeValue(value) {
     this.value = isDefined(value) ? value : '';
     if (this._buttons) {
       let buttons = this._buttons.toArray();
@@ -188,7 +188,7 @@ export class RadioGroup {
         let isChecked = (button.value === this.value);
         button.isChecked = isChecked;
         if (isChecked) {
-          this._renderer.setElementAttribute(this._elementRef, 'aria-activedescendant', button.id);
+          this._renderer.setElementAttribute(this._elementRef.nativeElement, 'aria-activedescendant', button.id);
         }
       }
     }
@@ -215,7 +215,7 @@ export class RadioGroup {
    * https://github.com/angular/angular/blob/master/modules/angular2/src/forms/directives/shared.ts#L27
    * @param {Function} fn  the onChange event handler.
    */
-  public registerOnChange(fn) { this.onChange = fn; }
+  registerOnChange(fn) { this.onChange = fn; }
 
   /**
    * @private
@@ -223,7 +223,7 @@ export class RadioGroup {
    * the onTouched event handler that marks the model (Control) as touched.
    * @param {Function} fn  onTouched event handler.
    */
-  public registerOnTouched(fn) { this.onTouched = fn; }
+  registerOnTouched(fn) { this.onTouched = fn; }
 
   /**
    * @private
@@ -234,7 +234,7 @@ export class RadioGroup {
       if (!header.id) {
         header.id = 'rg-hdr-' + this.id;
       }
-      this._renderer.setElementAttribute(this._elementRef, 'aria-describedby', header.id);
+      this._renderer.setElementAttribute(this._elementRef.nativeElement, 'aria-describedby', header.id);
     }
 
     this._buttons.toArray().forEach(button => {
@@ -250,7 +250,7 @@ export class RadioGroup {
         if (isChecked) {
           this.writeValue(button.value);
           //this.onChange(button.value);
-          this._renderer.setElementAttribute(this._elementRef, 'aria-activedescendant', button.id);
+          this._renderer.setElementAttribute(this._elementRef.nativeElement, 'aria-activedescendant', button.id);
         }
       }
     });

ionic/components/segment/segment.ts

@@ -69,15 +69,21 @@ export class SegmentButton {
     this.select.emit(this);
   }
 
+  /**
+   * @private
+   */
   ngOnInit() {
     if (!isDefined(this.value)) {
       console.warn('<ion-segment-button> requires a "value" attribute');
     }
   }
 
-  public set isActive(isActive) {
-    this._renderer.setElementClass(this._elementRef, 'segment-activated', isActive);
-    this._renderer.setElementAttribute(this._elementRef, 'aria-pressed', isActive);
+  /**
+   * @private
+   */
+  set isActive(isActive) {
+    this._renderer.setElementClass(this._elementRef.nativeElement, 'segment-activated', isActive);
+    this._renderer.setElementAttribute(this._elementRef.nativeElement, 'aria-pressed', isActive);
   }
 
 }

ionic/components/select/select.ts

@@ -147,11 +147,11 @@ export class Select {
   ngOnInit() {
     if (!this.id) {
       this.id = 'sel-' + this.form.nextId();
-      this.renderer.setElementAttribute(this.elementRef, 'id', this.id);
+      this.renderer.setElementAttribute(this.elementRef.nativeElement, 'id', this.id);
     }
 
     this.labelId = 'lbl-' + this.id;
-    this.renderer.setElementAttribute(this.elementRef, 'aria-labelledby', this.labelId);
+    this.renderer.setElementAttribute(this.elementRef.nativeElement, 'aria-labelledby', this.labelId);
   }
 
   /**

ionic/components/tabs/tab.ts

@@ -90,7 +90,7 @@ import {TabButton} from './tab-button';
     '[attr.aria-labelledby]': '_btnId',
     'role': 'tabpanel'
   },
-  template: '<template #contents></template>'
+  template: '<div #contents></div>'
 })
 export class Tab extends NavController {
   public isSelected: boolean;

ionic/components/tabs/tabs.ts

@@ -69,16 +69,16 @@ export class Tabs extends Ion {
   private _tabs: Array<Tab> = [];
   private _onReady = null;
   private _useHighlight: boolean;
-  
+
   id: number;
   navbarContainerRef: ViewContainerRef;
   subPages: boolean;
-  
+
   @Input() preloadTabs: any;
   @Input() tabbarIcons: string;
   @Input() tabbarPlacement: string;
   @Output() change: EventEmitter<Tab> = new EventEmitter();
-  
+
   @ViewChild(TabHighlight) private _highlight: TabHighlight;
   @ViewChildren(TabButton) private _btns;
 
@@ -92,7 +92,7 @@ export class Tabs extends Ion {
     private _renderer: Renderer
   ) {
     super(_elementRef);
-    
+
     this.id = ++tabIds;
     this.subPages = _config.getBoolean('tabSubPages');
     this._useHighlight = _config.getBoolean('tabbarHighlight');
@@ -125,7 +125,7 @@ export class Tabs extends Ion {
         this._highlight.select(this.getSelected());
       });
     }
-    
+
     this._btns.toArray().forEach((tabButton: TabButton) => {
       tabButton.select.subscribe((tab: Tab) => {
         this.select(tab);
@@ -133,12 +133,15 @@ export class Tabs extends Ion {
     });
   }
 
-  _setConfig(attrKey, fallback) {
+  /**
+   * @private
+   */
+  private _setConfig(attrKey, fallback) {
     var val = this[attrKey];
     if (isUndefined(val)) {
       val = this._config.get(attrKey);
     }
-    this._renderer.setElementAttribute(this._elementRef, attrKey, val);
+    this._renderer.setElementAttribute(this._elementRef.nativeElement, attrKey, val);
   }
 
   /**
@@ -248,7 +251,7 @@ export class Tabs extends Ion {
    * "Touch" the active tab, going back to the root view of the tab
    * or optionally letting the tab handle the event
    */
-  _touchActive(tab) {
+  private _touchActive(tab) {
     let active = tab.getActive();
 
     if (!active) {

ionic/components/text-input/text-input.ts

@@ -13,13 +13,15 @@ import {CSS, hasFocus}  from '../../util/dom';
   }
 })
 export class TextInput {
-  @Input() value: string;
-  @Input() ngModel: any;
-  @Output() valueChange: EventEmitter<string> = new EventEmitter();
-  @Output() focusChange: EventEmitter<boolean> = new EventEmitter();
-  public type: string;
   private _relocated: boolean;
 
+  type: string;
+
+  @Input() ngModel;
+  @Input() value: string;
+  @Output() focusChange: EventEmitter<boolean> = new EventEmitter();
+  @Output() valueChange: EventEmitter<string> = new EventEmitter();
+
   constructor(
     @Attribute('type') type: string,
     private _elementRef: ElementRef,
@@ -28,6 +30,9 @@ export class TextInput {
     this.type = type || 'text';
   }
 
+  /**
+   * @private
+   */
   ngOnInit() {
     if (this.ngModel) {
       this.value = this.ngModel;
@@ -36,30 +41,45 @@ export class TextInput {
     }
   }
 
+  /**
+   * @private
+   */
   @HostListener('keyup', ['$event'])
-  _keyup(ev) {
+  private _keyup(ev) {
     this.valueChange.emit(ev.target.value);
   }
 
+  /**
+   * @private
+   */
   @HostListener('focus')
-  _focus() {
+  private _focus() {
     this.focusChange.emit(true);
   }
 
+  /**
+   * @private
+   */
   @HostListener('blur')
-  _blur() {
+  private _blur() {
     this.focusChange.emit(false);
     this.hideFocus(false);
   }
 
-  labelledBy(val) {
-    this._renderer.setElementAttribute(this._elementRef, 'aria-labelledby', val);
+  labelledBy(val: string) {
+    this._renderer.setElementAttribute(this._elementRef.nativeElement, 'aria-labelledby', val);
   }
 
+  /**
+   * @private
+   */
   setFocus() {
     this.element().focus();
   }
 
+  /**
+   * @private
+   */
   relocate(shouldRelocate: boolean, inputRelativeY?) {
     if (this._relocated !== shouldRelocate) {
 
@@ -76,7 +96,7 @@ export class TextInput {
       } else {
         focusedInputEle.classList.remove('hide-focused-input');
         focusedInputEle.style[CSS.transform] = '';
-        let clonedInputEle = focusedInputEle.parentNode.querySelector('.cloned-input');
+        let clonedInputEle = focusedInputEle.parentElement.querySelector('.cloned-input');
         if (clonedInputEle) {
           clonedInputEle.parentNode.removeChild(clonedInputEle);
         }
@@ -86,7 +106,10 @@ export class TextInput {
     }
   }
 
-  hideFocus(shouldHideFocus) {
+  /**
+   * @private
+   */
+  hideFocus(shouldHideFocus: boolean) {
     let focusedInputEle = this.element();
 
     if (shouldHideFocus) {
@@ -99,32 +122,38 @@ export class TextInput {
     } else {
       focusedInputEle.classList.remove('hide-focused-input');
       focusedInputEle.style[CSS.transform] = '';
-      let clonedInputEle = focusedInputEle.parentNode.querySelector('.cloned-hidden');
+      let clonedInputEle = focusedInputEle.parentElement.querySelector('.cloned-hidden');
       if (clonedInputEle) {
         clonedInputEle.parentNode.removeChild(clonedInputEle);
       }
     }
   }
 
-  hasFocus() {
+  hasFocus(): boolean {
     return hasFocus(this.element());
   }
 
-  addClass(className) {
-    this._renderer.setElementClass(this._elementRef, className, true);
+  /**
+   * @private
+   */
+  addClass(className: string) {
+    this._renderer.setElementClass(this._elementRef.nativeElement, className, true);
   }
 
-  hasClass(className) {
-    this._elementRef.nativeElement.classList.contains(className);
+  hasClass(className): boolean {
+    return this._elementRef.nativeElement.classList.contains(className);
   }
 
-  element() {
+  /**
+   * @private
+   */
+  element(): HTMLElement {
     return this._elementRef.nativeElement;
   }
 
 }
 
-function cloneInput(srcInput, addCssClass) {
+function cloneInput(srcInput, addCssClass: string) {
   let clonedInputEle = srcInput.cloneNode(true);
   clonedInputEle.classList.add(addCssClass);
   clonedInputEle.classList.remove('hide-focused-input');

ionic/components/toggle/toggle.ts

@@ -69,17 +69,19 @@ import {pointerCoord} from '../../util/dom';
     `</div>`
 })
 export class Toggle {
+  private _checked: boolean;
+  private _mode: string;
+  private _startX;
+  private _touched: number = 0;
+  private addMoveListener;
+  private removeMoveListener;
+
+  public isActivated: boolean;
+  public labelId: string;
+
   @Input() value: string = '';
   @Input() disabled: boolean = false;
   @Input() id: string;
-  private _checked: boolean;
-  private _touched: number = 0;
-  private _mode: string;
-  private _startX: any;
-  private addMoveListener: any;
-  private removeMoveListener: any;
-  public labelId: string;
-  public isActivated: boolean;
 
   constructor(
     private _form: Form,
@@ -143,11 +145,11 @@ export class Toggle {
   ngOnInit() {
     if (!this.id) {
       this.id = 'tgl-' + this._form.nextId();
-      this._renderer.setElementAttribute(this._elementRef, 'id', this.id);
+      this._renderer.setElementAttribute(this._elementRef.nativeElement, 'id', this.id);
     }
 
     this.labelId = 'lbl-' + this.id;
-    this._renderer.setElementAttribute(this._elementRef, 'aria-labelledby', this.labelId);
+    this._renderer.setElementAttribute(this._elementRef.nativeElement, 'aria-labelledby', this.labelId);
   }
 
   /**
@@ -164,14 +166,14 @@ export class Toggle {
 
   set checked(val: boolean) {
     this._checked = !!val;
-    this._renderer.setElementAttribute(this._elementRef, 'aria-checked', this._checked.toString());
+    this._renderer.setElementAttribute(this._elementRef.nativeElement, 'aria-checked', this._checked.toString());
     this.onChange(this._checked);
   }
 
   /**
    * @private
    */
-  pointerDown(ev) {
+  private pointerDown(ev) {
     if (/touch/.test(ev.type)) {
       this._touched = Date.now();
     }
@@ -189,7 +191,7 @@ export class Toggle {
   /**
    * @private
    */
-  pointerUp(ev) {
+  private pointerUp(ev) {
     if (this.isDisabled(ev)) return;
 
     let endX = pointerCoord(ev).x;