From 0f3a8f369af447e52c686fe09435c8ca14e8e19c Mon Sep 17 00:00:00 2001
From: Jeremy Elbourn <jelbourn@google.com>
Date: Fri, 22 May 2015 13:01:23 -0700
Subject: [PATCH] chore(material): migrate most components to TypeScript.

---
 modules/angular2_material/.clang-format       |  12 +
 .../button/{button.js => button.ts}           |  11 +-
 .../checkbox/{checkbox.js => checkbox.ts}     |  22 +-
 .../src/components/dialog/dialog.js           |   2 +-
 .../grid_list/{grid_list.js => grid_list.ts}  |  33 +-
 .../components/input/{input.js => input.ts}   | 149 +++++----
 .../progress-circular/progress_circular.js    |  13 -
 .../progress-circular/progress_circular.ts    |   7 +
 ...{progress_linear.js => progress_linear.ts} |  12 +-
 .../{radio_button.js => radio_button.ts}      | 296 ++++++++----------
 ...adio_dispatcher.js => radio_dispatcher.ts} |   0
 .../switcher/{switch.js => switch.ts}         |  30 +-
 .../src/core/{constants.js => constants.ts}   |   0
 .../src/core/{theme.js => theme.ts}           |   4 +-
 modules/examples/src/material/.clang-format   |  12 +
 .../material/button/{index.js => index.ts}    |  24 +-
 .../examples/src/material/checkbox/index.js   |  36 ---
 .../examples/src/material/checkbox/index.ts   |  24 ++
 modules/examples/src/material/demo_common.js  |  78 -----
 modules/examples/src/material/demo_common.ts  |  87 +++++
 .../examples/src/material/grid_list/index.js  |  34 --
 .../examples/src/material/grid_list/index.ts  |  22 ++
 .../examples/src/material/input/demo_app.html |   4 +-
 modules/examples/src/material/input/index.js  |  30 --
 modules/examples/src/material/input/index.ts  |  16 +
 .../src/material/progress-linear/index.js     |  36 ---
 .../src/material/progress-linear/index.ts     |  24 ++
 .../src/material/radio/{index.js => index.ts} |  25 +-
 .../examples/src/material/switcher/index.js   |  36 ---
 .../examples/src/material/switcher/index.ts   |  24 ++
 30 files changed, 487 insertions(+), 616 deletions(-)
 create mode 100644 modules/angular2_material/.clang-format
 rename modules/angular2_material/src/components/button/{button.js => button.ts} (75%)
 rename modules/angular2_material/src/components/checkbox/{checkbox.js => checkbox.ts} (68%)
 rename modules/angular2_material/src/components/grid_list/{grid_list.js => grid_list.ts} (94%)
 rename modules/angular2_material/src/components/input/{input.js => input.ts} (77%)
 delete mode 100644 modules/angular2_material/src/components/progress-circular/progress_circular.js
 create mode 100644 modules/angular2_material/src/components/progress-circular/progress_circular.ts
 rename modules/angular2_material/src/components/progress-linear/{progress_linear.js => progress_linear.ts} (87%)
 rename modules/angular2_material/src/components/radio/{radio_button.js => radio_button.ts} (85%)
 rename modules/angular2_material/src/components/radio/{radio_dispatcher.js => radio_dispatcher.ts} (100%)
 rename modules/angular2_material/src/components/switcher/{switch.js => switch.ts} (60%)
 rename modules/angular2_material/src/core/{constants.js => constants.ts} (100%)
 rename modules/angular2_material/src/core/{theme.js => theme.ts} (77%)
 create mode 100644 modules/examples/src/material/.clang-format
 rename modules/examples/src/material/button/{index.js => index.ts} (52%)
 delete mode 100644 modules/examples/src/material/checkbox/index.js
 create mode 100644 modules/examples/src/material/checkbox/index.ts
 delete mode 100644 modules/examples/src/material/demo_common.js
 create mode 100644 modules/examples/src/material/demo_common.ts
 delete mode 100644 modules/examples/src/material/grid_list/index.js
 create mode 100644 modules/examples/src/material/grid_list/index.ts
 delete mode 100644 modules/examples/src/material/input/index.js
 create mode 100644 modules/examples/src/material/input/index.ts
 delete mode 100644 modules/examples/src/material/progress-linear/index.js
 create mode 100644 modules/examples/src/material/progress-linear/index.ts
 rename modules/examples/src/material/radio/{index.js => index.ts} (56%)
 delete mode 100644 modules/examples/src/material/switcher/index.js
 create mode 100644 modules/examples/src/material/switcher/index.ts

diff --git a/modules/angular2_material/.clang-format b/modules/angular2_material/.clang-format
new file mode 100644
index 0000000000..e60fec7357
--- /dev/null
+++ b/modules/angular2_material/.clang-format
@@ -0,0 +1,12 @@
+Language:        JavaScript
+BasedOnStyle:    Google
+ColumnLimit:     100
+
+TabWidth:                2
+ContinuationIndentWidth: 4
+MaxEmptyLinesToKeep    : 2
+
+AllowShortBlocksOnASingleLine:              false
+AllowShortIfStatementsOnASingleLine:        false
+AllowShortLoopsOnASingleLine:               false
+AllowShortFunctionsOnASingleLine:           Empty
diff --git a/modules/angular2_material/src/components/button/button.js b/modules/angular2_material/src/components/button/button.ts
similarity index 75%
rename from modules/angular2_material/src/components/button/button.js
rename to modules/angular2_material/src/components/button/button.ts
index 75ace5f6af..be01e2e910 100644
--- a/modules/angular2_material/src/components/button/button.js
+++ b/modules/angular2_material/src/components/button/button.ts
@@ -1,5 +1,4 @@
-import {Component, onChange} from 'angular2/src/core/annotations_impl/annotations';
-import {View} from 'angular2/src/core/annotations_impl/view';
+import {Component, View, onChange} from 'angular2/angular2';
 import {isPresent} from 'angular2/src/facade/lang';
 
 
@@ -12,16 +11,12 @@ export class MdButton {
 
 @Component({
   selector: '[md-button][href]',
-  properties: {
-    'disabled': 'disabled'
-  },
+  properties: {'disabled': 'disabled'},
   hostListeners: {'click': 'onClick($event)'},
   hostProperties: {'tabIndex': 'tabIndex'},
   lifecycle: [onChange]
 })
-@View({
-  templateUrl: 'angular2_material/src/components/button/button.html'
-})
+@View({templateUrl: 'angular2_material/src/components/button/button.html'})
 export class MdAnchor {
   tabIndex: number;
 
diff --git a/modules/angular2_material/src/components/checkbox/checkbox.js b/modules/angular2_material/src/components/checkbox/checkbox.ts
similarity index 68%
rename from modules/angular2_material/src/components/checkbox/checkbox.js
rename to modules/angular2_material/src/components/checkbox/checkbox.ts
index 5d5d50bc79..98adabd271 100644
--- a/modules/angular2_material/src/components/checkbox/checkbox.js
+++ b/modules/angular2_material/src/components/checkbox/checkbox.ts
@@ -1,20 +1,13 @@
-import {Component} from 'angular2/src/core/annotations_impl/annotations';
-import {View} from 'angular2/src/core/annotations_impl/view';
-import {Attribute} from 'angular2/src/core/annotations_impl/di';
+import {Component, View, Attribute} from 'angular2/angular2';
 import {isPresent} from 'angular2/src/facade/lang';
-import {KEY_SPACE} from 'angular2_material/src/core/constants'
+import {KEY_SPACE} from 'angular2_material/src/core/constants';
 import {KeyboardEvent} from 'angular2/src/facade/browser';
 import {NumberWrapper} from 'angular2/src/facade/lang';
 
 @Component({
   selector: 'md-checkbox',
-  properties: {
-    'checked': 'checked',
-    'disabled': 'disabled'
-  },
-  hostListeners: {
-    'keydown': 'onKeydown($event)'
-  },
+  properties: {'checked': 'checked', 'disabled': 'disabled'},
+  hostListeners: {'keydown': 'onKeydown($event)'},
   hostProperties: {
     'tabindex': 'tabindex',
     'role': 'attr.role',
@@ -22,10 +15,7 @@ import {NumberWrapper} from 'angular2/src/facade/lang';
     'disabled': 'attr.aria-disabled'
   }
 })
-@View({
-  templateUrl: 'angular2_material/src/components/checkbox/checkbox.html',
-  directives: []
-})
+@View({templateUrl: 'angular2_material/src/components/checkbox/checkbox.html', directives: []})
 export class MdCheckbox {
   /** Whether this checkbox is checked. */
   checked: boolean;
@@ -39,7 +29,7 @@ export class MdCheckbox {
   /** Setter for tabindex */
   tabindex: number;
 
-  constructor(@Attribute('tabindex') tabindex: String) {
+  constructor(@Attribute('tabindex') tabindex: string) {
     this.role = 'checkbox';
     this.checked = false;
     this.tabindex = isPresent(tabindex) ? NumberWrapper.parseInt(tabindex, 10) : 0;
diff --git a/modules/angular2_material/src/components/dialog/dialog.js b/modules/angular2_material/src/components/dialog/dialog.js
index 3e23f16227..6e510da1ce 100644
--- a/modules/angular2_material/src/components/dialog/dialog.js
+++ b/modules/angular2_material/src/components/dialog/dialog.js
@@ -4,7 +4,7 @@ import {ObservableWrapper, Promise, PromiseWrapper} from 'angular2/src/facade/as
 import {isPresent, Type} from 'angular2/src/facade/lang';
 import {DOM} from 'angular2/src/dom/dom_adapter';
 import {MouseEvent, KeyboardEvent} from 'angular2/src/facade/browser';
-import {KEY_ESC} from 'angular2_material/src/core/constants'
+import {KEY_ESC} from 'angular2_material/src/core/constants';
 
 // TODO(radokirov): Once the application is transpiled by TS instead of Traceur,
 // add those imports back into 'angular2/angular2';
diff --git a/modules/angular2_material/src/components/grid_list/grid_list.js b/modules/angular2_material/src/components/grid_list/grid_list.ts
similarity index 94%
rename from modules/angular2_material/src/components/grid_list/grid_list.js
rename to modules/angular2_material/src/components/grid_list/grid_list.ts
index eb1440eb83..9d9fdd4224 100644
--- a/modules/angular2_material/src/components/grid_list/grid_list.js
+++ b/modules/angular2_material/src/components/grid_list/grid_list.ts
@@ -1,8 +1,13 @@
-import {Component, onDestroy, onChange, onAllChangesDone} from 'angular2/src/core/annotations_impl/annotations';
-import {View} from 'angular2/src/core/annotations_impl/view';
-import {Parent} from 'angular2/src/core/annotations_impl/visibility';
+import {Component, View, Parent, onDestroy, onChange, onAllChangesDone} from 'angular2/angular2';
+
 import {ListWrapper} from 'angular2/src/facade/collection';
-import {StringWrapper, isPresent, isString, NumberWrapper, RegExpWrapper} from 'angular2/src/facade/lang';
+import {
+  StringWrapper,
+  isPresent,
+  isString,
+  NumberWrapper,
+  RegExpWrapper
+} from 'angular2/src/facade/lang';
 import {Math} from 'angular2/src/facade/math';
 
 // TODO(jelbourn): Set appropriate aria attributes for grid list elements.
@@ -14,16 +19,10 @@ import {Math} from 'angular2/src/facade/math';
 
 @Component({
   selector: 'md-grid-list',
-  properties: {
-    'cols': 'cols',
-    'rowHeight': 'row-height',
-    'gutterSize': 'gutter-size'
-  },
+  properties: {'cols': 'cols', 'rowHeight': 'row-height', 'gutterSize': 'gutter-size'},
   lifecycle: [onAllChangesDone]
 })
-@View({
-  templateUrl: 'angular2_material/src/components/grid_list/grid_list.html'
-})
+@View({templateUrl: 'angular2_material/src/components/grid_list/grid_list.html'})
 export class MdGridList {
   /** List of tiles that are being rendered. */
   tiles: List<MdGridTile>;
@@ -218,10 +217,7 @@ export class MdGridList {
 
 @Component({
   selector: 'md-grid-tile',
-  properties: {
-    'rowspan': 'rowspan',
-    'colspan': 'colspan'
-  },
+  properties: {'rowspan': 'rowspan', 'colspan': 'colspan'},
   hostProperties: {
     'styleHeight': 'style.height',
     'styleWidth': 'style.width',
@@ -233,9 +229,7 @@ export class MdGridList {
   },
   lifecycle: [onDestroy, onChange]
 })
-@View({
-  templateUrl: 'angular2_material/src/components/grid_list/grid_tile.html'
-})
+@View({templateUrl: 'angular2_material/src/components/grid_list/grid_tile.html'})
 export class MdGridTile {
   gridList: MdGridList;
   _rowspan: number;
@@ -282,7 +276,6 @@ export class MdGridTile {
    * Notifies grid-list that a re-layout is required.
    */
   onChange(_) {
-    //console.log(`grid-tile on-change ${this.gridList.tiles.indexOf(this)}`);
     if (!this.isRegisteredWithGridList) {
       this.gridList.addTile(this);
       this.isRegisteredWithGridList = true;
diff --git a/modules/angular2_material/src/components/input/input.js b/modules/angular2_material/src/components/input/input.ts
similarity index 77%
rename from modules/angular2_material/src/components/input/input.js
rename to modules/angular2_material/src/components/input/input.ts
index ce0c534ad4..b9e157fab2 100644
--- a/modules/angular2_material/src/components/input/input.js
+++ b/modules/angular2_material/src/components/input/input.ts
@@ -1,6 +1,4 @@
-import {Directive, onAllChangesDone} from 'angular2/src/core/annotations_impl/annotations';
-import {Attribute} from 'angular2/src/core/annotations_impl/di';
-import {Parent} from 'angular2/src/core/annotations_impl/visibility';
+import {Directive, onAllChangesDone, Attribute, Parent} from 'angular2/angular2';
 
 import {ObservableWrapper, EventEmitter} from 'angular2/src/facade/async';
 
@@ -9,77 +7,11 @@ import {ObservableWrapper, EventEmitter} from 'angular2/src/facade/async';
 // TODO(jelbourn): max-length counter
 // TODO(jelbourn): placeholder property
 
-@Directive({
-  selector: 'md-input-container input',
-  events: ['mdChange', 'mdFocusChange'],
-  hostProperties: {
-    'yes': 'class.md-input'
-  },
-  hostListeners: {
-    'input': 'updateValue($event)',
-    'focus': 'setHasFocus(true)',
-    'blur': 'setHasFocus(false)'
-  }
-})
-export class MdInput {
-  value: string;
-  yes: boolean;
-
-  // Events emitted by this directive. We use these special 'md-' events to communicate
-  // to the parent MdInputContainer.
-  mdChange: EventEmitter;
-  mdFocusChange: EventEmitter;
-
-  constructor(
-      @Attribute('value') value: String,
-      @Parent() container: MdInputContainer) {
-    // TODO(jelbourn): Remove this when #1402 is done.
-    this.yes = true;
-
-    this.value = value == null ? '' : value;
-    this.mdChange = new EventEmitter();
-    this.mdFocusChange = new EventEmitter();
-
-    container.registerInput(this);
-  }
-
-  updateValue(event) {
-    this.value = event.target.value;
-    ObservableWrapper.callNext(this.mdChange, this.value);
-  }
-
-  setHasFocus(hasFocus: boolean) {
-    ObservableWrapper.callNext(this.mdFocusChange, hasFocus);
-  }
-}
-
-@Directive({
-  selector: 'md-input-container textarea',
-  events: ['mdChange', 'mdFocusChange'],
-  hostProperties: {
-    'yes': 'class.md-input'
-  },
-  hostListeners: {
-    'input': 'updateValue($event)',
-    'focus': 'setHasFocus(true)',
-    'blur': 'setHasFocus(false)'
-  }
-})
-export class MdTextarea extends MdInput {
-  constructor(
-      @Attribute('value') value: String,
-      @Parent() container: MdInputContainer) {
-    super(value, container);
-  }
-}
-
 @Directive({
   selector: 'md-input-container',
   lifecycle: [onAllChangesDone],
-  hostProperties: {
-    'inputHasValue': 'class.md-input-has-value',
-    'inputHasFocus': 'class.md-input-focused'
-  }
+  hostProperties:
+      {'inputHasValue': 'class.md-input-has-value', 'inputHasFocus': 'class.md-input-focused'}
 })
 export class MdInputContainer {
   // The MdInput or MdTextarea inside of this container.
@@ -91,7 +23,7 @@ export class MdInputContainer {
   // Whether the input inside of this container has focus.
   inputHasFocus: boolean;
 
-  constructor() {
+  constructor(@Attribute('id') id: string) {
     this._input = null;
     this.inputHasValue = false;
     this.inputHasFocus = false;
@@ -115,12 +47,73 @@ export class MdInputContainer {
 
     // Listen to input changes and focus events so that we can apply the appropriate CSS
     // classes based on the input state.
-    ObservableWrapper.subscribe(input.mdChange, value => {
-      this.inputHasValue = value != '';
-    });
+    ObservableWrapper.subscribe(input.mdChange, value => { this.inputHasValue = value != ''; });
 
-    ObservableWrapper.subscribe(input.mdFocusChange, hasFocus => {
-      this.inputHasFocus = hasFocus
-    });
+    ObservableWrapper.subscribe(input.mdFocusChange, hasFocus => {this.inputHasFocus = hasFocus});
   }
 }
+
+
+@Directive({
+  selector: 'md-input-container input',
+  events: ['mdChange', 'mdFocusChange'],
+  hostProperties: {'yes': 'class.md-input'},
+  hostListeners: {
+    'input': 'updateValue($event)',
+    'focus': 'setHasFocus(true)',
+    'blur': 'setHasFocus(false)'
+  }
+})
+export class MdInput {
+  value: string;
+  yes: boolean;
+
+  // Events emitted by this directive. We use these special 'md-' events to communicate
+  // to the parent MdInputContainer.
+  mdChange: EventEmitter;
+  mdFocusChange: EventEmitter;
+
+  constructor(@Attribute('value') value: string, @Parent() container: MdInputContainer,
+              @Attribute('id') id: string) {
+    // TODO(jelbourn): Remove this when #1402 is done.
+    this.yes = true;
+
+    this.value = value == null ? '' : value;
+    this.mdChange = new EventEmitter();
+    this.mdFocusChange = new EventEmitter();
+
+    container.registerInput(this);
+  }
+
+  updateValue(event) {
+    this.value = event.target.value;
+    ObservableWrapper.callNext(this.mdChange, this.value);
+  }
+
+  setHasFocus(hasFocus: boolean) {
+    ObservableWrapper.callNext(this.mdFocusChange, hasFocus);
+  }
+}
+
+/*
+@Directive({
+  selector: 'md-input-container textarea',
+  events: ['mdChange', 'mdFocusChange'],
+  hostProperties: {
+    'yes': 'class.md-input'
+  },
+  hostListeners: {
+    'input': 'updateValue($event)',
+    'focus': 'setHasFocus(true)',
+    'blur': 'setHasFocus(false)'
+  }
+})
+export class MdTextarea extends MdInput {
+  constructor(
+      @Attribute('value') value: string,
+      @Parent() container: MdInputContainer,
+      @Attribute('id') id: string) {
+    super(value, container, id);
+  }
+}
+*/
diff --git a/modules/angular2_material/src/components/progress-circular/progress_circular.js b/modules/angular2_material/src/components/progress-circular/progress_circular.js
deleted file mode 100644
index 2859dd311f..0000000000
--- a/modules/angular2_material/src/components/progress-circular/progress_circular.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import {Component} from 'angular2/src/core/annotations_impl/annotations';
-import {View} from 'angular2/src/core/annotations_impl/view';
-
-@Component({
-  selector: 'md-progress-circular'
-})
-@View({
-  templateUrl: 'angular2_material/src/components/progress-circular/progress_circular.html'
-})
-export class MdProgressCircular {
-  constructor() {
-  }
-}
diff --git a/modules/angular2_material/src/components/progress-circular/progress_circular.ts b/modules/angular2_material/src/components/progress-circular/progress_circular.ts
new file mode 100644
index 0000000000..8a5177fcf7
--- /dev/null
+++ b/modules/angular2_material/src/components/progress-circular/progress_circular.ts
@@ -0,0 +1,7 @@
+import {Component, View} from 'angular2/angular2';
+
+@Component({selector: 'md-progress-circular'})
+@View({templateUrl: 'angular2_material/src/components/progress-circular/progress_circular.html'})
+export class MdProgressCircular {
+  constructor() {}
+}
diff --git a/modules/angular2_material/src/components/progress-linear/progress_linear.js b/modules/angular2_material/src/components/progress-linear/progress_linear.ts
similarity index 87%
rename from modules/angular2_material/src/components/progress-linear/progress_linear.js
rename to modules/angular2_material/src/components/progress-linear/progress_linear.ts
index 4601e0c170..c83d386a14 100644
--- a/modules/angular2_material/src/components/progress-linear/progress_linear.js
+++ b/modules/angular2_material/src/components/progress-linear/progress_linear.ts
@@ -1,16 +1,12 @@
-import {Component, onChange} from 'angular2/src/core/annotations_impl/annotations';
-import {View} from 'angular2/src/core/annotations_impl/view';
-import {Attribute} from 'angular2/src/core/annotations_impl/di';
+import {Component, onChange, View, Attribute} from 'angular2/angular2';
+
 import {isPresent, isBlank} from 'angular2/src/facade/lang';
 import {Math} from 'angular2/src/facade/math';
 
 @Component({
   selector: 'md-progress-linear',
   lifecycle: [onChange],
-  properties: {
-    'value': 'value',
-    'bufferValue': 'buffer-value'
-  },
+  properties: {'value': 'value', 'bufferValue': 'buffer-value'},
   hostProperties: {
     'role': 'attr.role',
     'ariaValuemin': 'attr.aria-valuemin',
@@ -42,7 +38,7 @@ export class MdProgressLinear {
   ariaValuemin: string;
   ariaValuemax: string;
 
-  constructor(@Attribute('md-mode') mode: String) {
+  constructor(@Attribute('md-mode') mode: string) {
     this.primaryBarTransform = '';
     this.secondaryBarTransform = '';
 
diff --git a/modules/angular2_material/src/components/radio/radio_button.js b/modules/angular2_material/src/components/radio/radio_button.ts
similarity index 85%
rename from modules/angular2_material/src/components/radio/radio_button.js
rename to modules/angular2_material/src/components/radio/radio_button.ts
index da177df257..e95959f08a 100644
--- a/modules/angular2_material/src/components/radio/radio_button.js
+++ b/modules/angular2_material/src/components/radio/radio_button.ts
@@ -1,15 +1,13 @@
-import {Component, onChange} from 'angular2/src/core/annotations_impl/annotations';
-import {View} from 'angular2/src/core/annotations_impl/view';
-import {Parent, Ancestor} from 'angular2/src/core/annotations_impl/visibility';
-import {Attribute} from 'angular2/src/core/annotations_impl/di';
-import {Optional} from 'angular2/src/di/annotations_impl';
-import {MdRadioDispatcher} from 'angular2_material/src/components/radio/radio_dispatcher'
+import {Component, View, onChange, Parent, Ancestor, Attribute, Optional} from 'angular2/angular2';
+
 import {isPresent, StringWrapper, NumberWrapper} from 'angular2/src/facade/lang';
 import {ObservableWrapper, EventEmitter} from 'angular2/src/facade/async';
 import {ListWrapper} from 'angular2/src/facade/collection';
-import {KEY_UP, KEY_DOWN, KEY_SPACE} from 'angular2_material/src/core/constants'
 import {Event, KeyboardEvent} from 'angular2/src/facade/browser';
 
+import {MdRadioDispatcher} from 'angular2_material/src/components/radio/radio_dispatcher';
+import {KEY_UP, KEY_DOWN, KEY_SPACE} from 'angular2_material/src/core/constants';
+
 // TODO(jelbourn): Behaviors to test
 // Disabled radio don't select
 // Disabled radios don't propagate click event
@@ -22,156 +20,13 @@ import {Event, KeyboardEvent} from 'angular2/src/facade/browser';
 // Radio group changes on arrow keys
 // Radio group skips disabled radios on arrow keys
 
-var _uniqueIdCounter:number = 0;
-
-@Component({
-  selector: 'md-radio-button',
-  lifecycle: [onChange],
-  properties: {
-    'id': 'id',
-    'name': 'name',
-    'value': 'value',
-    'checked': 'checked',
-    'disabled': 'disabled'
-  },
-  hostListeners: {
-    'keydown': 'onKeydown($event)'
-  },
-  hostProperties: {
-    'id': 'id',
-    'tabindex': 'tabindex',
-    'role': 'attr.role',
-    'checked': 'attr.aria-checked',
-    'disabled': 'attr.aria-disabled'
-  }
-})
-@View({
-  templateUrl: 'angular2_material/src/components/radio/radio_button.html',
-  directives: []
-})
-export class MdRadioButton {
-  /** Whether this radio is checked. */
-  checked: boolean;
-
-  /** Whether the radio is disabled. */
-  disabled_: boolean;
-
-  /** The unique ID for the radio button. */
-  id: string;
-
-  /** Analog to HTML 'name' attribute used to group radios for unique selection. */
-  name: string;
-
-  /** Value assigned to this radio. Used to assign the value to the parent MdRadioGroup. */
-  value: any;
-
-  /** The parent radio group. May or may not be present. */
-  radioGroup: MdRadioGroup;
-
-  /** Dispatcher for coordinating radio unique-selection by name. */
-  radioDispatcher: MdRadioDispatcher;
-
-  tabindex: number;
-
-  role: string;
-
-  constructor(
-      @Optional() @Parent() radioGroup: MdRadioGroup,
-      @Attribute('id') id: String,
-      @Attribute('tabindex') tabindex: String,
-      radioDispatcher: MdRadioDispatcher) {
-    // Assertions. Ideally these should be stripped out by the compiler.
-    // TODO(jelbourn): Assert that there's no name binding AND a parent radio group.
-
-    this.radioGroup = radioGroup;
-    this.radioDispatcher = radioDispatcher;
-    this.value = null;
-
-    this.role = 'radio';
-    this.checked = false;
-
-    this.id = isPresent(id) ? id : `md-radio-${_uniqueIdCounter++}`;;
-
-    // Whenever a radio button with the same name is checked, uncheck this radio button.
-    radioDispatcher.listen((name) => {
-      if (name == this.name) {
-        this.checked = false;
-      }
-    });
-
-    // When this radio-button is inside of a radio-group, the group determines the name.
-    if (isPresent(radioGroup)) {
-      this.name = radioGroup.getName();
-      this.radioGroup.register(this);
-    }
-
-    // If the user has not set a tabindex, default to zero (in the normal document flow).
-    if (!isPresent(radioGroup)) {
-      this.tabindex = isPresent(tabindex) ? NumberWrapper.parseInt(tabindex, 10) : 0;
-    } else {
-      this.tabindex = -1;
-    }
-  }
-
-  /** Change handler invoked when bindings are resolved or when bindings have changed. */
-  onChange(_) {
-    if (isPresent(this.radioGroup)) {
-      this.name = this.radioGroup.getName();
-    }
-  }
-
-  /** Whether this radio button is disabled, taking the parent group into account. */
-  isDisabled(): boolean {
-    // Here, this.disabled may be true/false as the result of a binding, may be the empty string
-    // if the user just adds a `disabled` attribute with no value, or may be absent completely.
-    // TODO(jelbourn): If someone sets `disabled="disabled"`, will this work in dart?
-    return this.disabled ||
-        (isPresent(this.disabled) && StringWrapper.equals(this.disabled, '')) ||
-        (isPresent(this.radioGroup) && this.radioGroup.disabled);
-  }
-
-  get disabled() {
-    return this.disabled_;
-  }
-
-  set disabled(value) {
-    this.disabled_ = isPresent(value) && value !== false;
-  }
-
-  /** Select this radio button. */
-  select(event: Event) {
-    if (this.isDisabled()) {
-      event.stopPropagation();
-      return;
-    }
-
-    // Notifiy all radio buttons with the same name to un-check.
-    this.radioDispatcher.notify(this.name);
-
-    this.checked = true;
-
-    if (isPresent(this.radioGroup)) {
-      this.radioGroup.updateValue(this.value, this.id);
-    }
-  }
-
-  /** Handles pressing the space key to select this focused radio button. */
-  onKeydown(event: KeyboardEvent) {
-    if (event.keyCode == KEY_SPACE) {
-      event.preventDefault();
-      this.select(event);
-    }
-  }
-}
+var _uniqueIdCounter: number = 0;
 
 @Component({
   selector: 'md-radio-group',
   lifecycle: [onChange],
   events: ['change'],
-  properties: {
-    'disabled': 'disabled',
-    'value': 'value'
-  },
+  properties: {'disabled': 'disabled', 'value': 'value'},
   hostListeners: {
     // TODO(jelbourn): Remove ^ when event retargeting is fixed.
     '^keydown': 'onKeydown($event)'
@@ -183,9 +38,7 @@ export class MdRadioButton {
     'activedescendant': 'attr.aria-activedescendant'
   }
 })
-@View({
-  templateUrl: 'angular2_material/src/components/radio/radio_group.html'
-})
+@View({templateUrl: 'angular2_material/src/components/radio/radio_group.html'})
 export class MdRadioGroup {
   /** The selected value for the radio group. The value comes from the options. */
   value: any;
@@ -212,10 +65,8 @@ export class MdRadioGroup {
 
   role: string;
 
-  constructor(
-      @Attribute('tabindex') tabindex: String,
-      @Attribute('disabled') disabled: String,
-      radioDispatcher: MdRadioDispatcher) {
+  constructor(@Attribute('tabindex') tabindex: string, @Attribute('disabled') disabled: string,
+              radioDispatcher: MdRadioDispatcher) {
     this.name_ = `md-radio-group-${_uniqueIdCounter++}`;
     this.radios_ = [];
     this.change = new EventEmitter();
@@ -330,3 +181,130 @@ export class MdRadioGroup {
     this.activedescendant = radio.id;
   }
 }
+
+
+@Component({
+  selector: 'md-radio-button',
+  lifecycle: [onChange],
+  properties:
+      {'id': 'id', 'name': 'name', 'value': 'value', 'checked': 'checked', 'disabled': 'disabled'},
+  hostListeners: {'keydown': 'onKeydown($event)'},
+  hostProperties: {
+    'id': 'id',
+    'tabindex': 'tabindex',
+    'role': 'attr.role',
+    'checked': 'attr.aria-checked',
+    'disabled': 'attr.aria-disabled'
+  }
+})
+@View({templateUrl: 'angular2_material/src/components/radio/radio_button.html', directives: []})
+export class MdRadioButton {
+  /** Whether this radio is checked. */
+  checked: boolean;
+
+  /** Whether the radio is disabled. */
+  disabled_: boolean;
+
+  /** The unique ID for the radio button. */
+  id: string;
+
+  /** Analog to HTML 'name' attribute used to group radios for unique selection. */
+  name: string;
+
+  /** Value assigned to this radio. Used to assign the value to the parent MdRadioGroup. */
+  value: any;
+
+  /** The parent radio group. May or may not be present. */
+  radioGroup: MdRadioGroup;
+
+  /** Dispatcher for coordinating radio unique-selection by name. */
+  radioDispatcher: MdRadioDispatcher;
+
+  tabindex: number;
+
+  role: string;
+
+  constructor(@Optional() @Parent() radioGroup: MdRadioGroup, @Attribute('id') id: string,
+              @Attribute('tabindex') tabindex: string, radioDispatcher: MdRadioDispatcher) {
+    // Assertions. Ideally these should be stripped out by the compiler.
+    // TODO(jelbourn): Assert that there's no name binding AND a parent radio group.
+
+    this.radioGroup = radioGroup;
+    this.radioDispatcher = radioDispatcher;
+    this.value = null;
+
+    this.role = 'radio';
+    this.checked = false;
+
+    this.id = isPresent(id) ? id : `md-radio-${_uniqueIdCounter++}`;
+
+    // Whenever a radio button with the same name is checked, uncheck this radio button.
+    radioDispatcher.listen((name) => {
+      if (name == this.name) {
+        this.checked = false;
+      }
+    });
+
+    // When this radio-button is inside of a radio-group, the group determines the name.
+    if (isPresent(radioGroup)) {
+      this.name = radioGroup.getName();
+      this.radioGroup.register(this);
+    }
+
+    // If the user has not set a tabindex, default to zero (in the normal document flow).
+    if (!isPresent(radioGroup)) {
+      this.tabindex = isPresent(tabindex) ? NumberWrapper.parseInt(tabindex, 10) : 0;
+    } else {
+      this.tabindex = -1;
+    }
+  }
+
+  /** Change handler invoked when bindings are resolved or when bindings have changed. */
+  onChange(_) {
+    if (isPresent(this.radioGroup)) {
+      this.name = this.radioGroup.getName();
+    }
+  }
+
+  /** Whether this radio button is disabled, taking the parent group into account. */
+  isDisabled(): boolean {
+    // Here, this.disabled may be true/false as the result of a binding, may be the empty string
+    // if the user just adds a `disabled` attribute with no value, or may be absent completely.
+    // TODO(jelbourn): If someone sets `disabled="disabled"`, will this work in dart?
+    return this.disabled || (isPresent(this.disabled) && StringWrapper.equals(this.disabled, '')) ||
+           (isPresent(this.radioGroup) && this.radioGroup.disabled);
+  }
+
+  get disabled(): any {
+    return this.disabled_;
+  }
+
+  set disabled(value: any) {
+    this.disabled_ = isPresent(value) && value !== false;
+  }
+
+  /** Select this radio button. */
+  select(event: Event) {
+    if (this.isDisabled()) {
+      event.stopPropagation();
+      return;
+    }
+
+    // Notifiy all radio buttons with the same name to un-check.
+    this.radioDispatcher.notify(this.name);
+
+    this.checked = true;
+
+    if (isPresent(this.radioGroup)) {
+      this.radioGroup.updateValue(this.value, this.id);
+    }
+  }
+
+  /** Handles pressing the space key to select this focused radio button. */
+  onKeydown(event: KeyboardEvent) {
+    if (event.keyCode == KEY_SPACE) {
+      event.preventDefault();
+      this.select(event);
+    }
+  }
+}
diff --git a/modules/angular2_material/src/components/radio/radio_dispatcher.js b/modules/angular2_material/src/components/radio/radio_dispatcher.ts
similarity index 100%
rename from modules/angular2_material/src/components/radio/radio_dispatcher.js
rename to modules/angular2_material/src/components/radio/radio_dispatcher.ts
diff --git a/modules/angular2_material/src/components/switcher/switch.js b/modules/angular2_material/src/components/switcher/switch.ts
similarity index 60%
rename from modules/angular2_material/src/components/switcher/switch.js
rename to modules/angular2_material/src/components/switcher/switch.ts
index 6898fb0f1b..e3b107d34a 100644
--- a/modules/angular2_material/src/components/switcher/switch.js
+++ b/modules/angular2_material/src/components/switcher/switch.ts
@@ -1,8 +1,6 @@
-import {Component} from 'angular2/src/core/annotations_impl/annotations';
-import {View} from 'angular2/src/core/annotations_impl/view';
-import {Attribute} from 'angular2/src/core/annotations_impl/di';
+import {Component, View, Attribute} from 'angular2/angular2';
 import {isPresent} from 'angular2/src/facade/lang';
-import {KEY_SPACE} from 'angular2_material/src/core/constants'
+import {KEY_SPACE} from 'angular2_material/src/core/constants';
 import {KeyboardEvent} from 'angular2/src/facade/browser';
 import {NumberWrapper} from 'angular2/src/facade/lang';
 
@@ -10,23 +8,12 @@ import {NumberWrapper} from 'angular2/src/facade/lang';
 
 @Component({
   selector: 'md-switch',
-  properties: {
-    'checked': 'checked',
-    'disabled': 'disabled'
-  },
-  hostListeners: {
-    'keydown': 'onKeydown($event)'
-  },
-  hostProperties: {
-    'checked': 'attr.aria-checked',
-    'disabled_': 'attr.aria-disabled',
-    'role': 'attr.role'
-  }
-})
-@View({
-  templateUrl: 'angular2_material/src/components/switcher/switch.html',
-  directives: []
+  properties: {'checked': 'checked', 'disabled': 'disabled'},
+  hostListeners: {'keydown': 'onKeydown($event)'},
+  hostProperties:
+      {'checked': 'attr.aria-checked', 'disabled_': 'attr.aria-disabled', 'role': 'attr.role'}
 })
+@View({templateUrl: 'angular2_material/src/components/switcher/switch.html', directives: []})
 export class MdSwitch {
   /** Whether this switch is checked. */
   checked: boolean;
@@ -37,7 +24,7 @@ export class MdSwitch {
   tabindex: number;
   role: string;
 
-  constructor(@Attribute('tabindex') tabindex: String) {
+  constructor(@Attribute('tabindex') tabindex: string) {
     this.role = 'checkbox';
     this.checked = false;
     this.tabindex = isPresent(tabindex) ? NumberWrapper.parseInt(tabindex, 10) : 0;
@@ -67,4 +54,3 @@ export class MdSwitch {
     this.checked = !this.checked;
   }
 }
-
diff --git a/modules/angular2_material/src/core/constants.js b/modules/angular2_material/src/core/constants.ts
similarity index 100%
rename from modules/angular2_material/src/core/constants.js
rename to modules/angular2_material/src/core/constants.ts
diff --git a/modules/angular2_material/src/core/theme.js b/modules/angular2_material/src/core/theme.ts
similarity index 77%
rename from modules/angular2_material/src/core/theme.js
rename to modules/angular2_material/src/core/theme.ts
index f938319114..384df91d2e 100644
--- a/modules/angular2_material/src/core/theme.js
+++ b/modules/angular2_material/src/core/theme.ts
@@ -1,8 +1,6 @@
 import {Directive} from 'angular2/angular2';
 
-@Directive({
-  selector: '[md-theme]'
-})
+@Directive({selector: '[md-theme]'})
 export class MdTheme {
   color: string;
 
diff --git a/modules/examples/src/material/.clang-format b/modules/examples/src/material/.clang-format
new file mode 100644
index 0000000000..e60fec7357
--- /dev/null
+++ b/modules/examples/src/material/.clang-format
@@ -0,0 +1,12 @@
+Language:        JavaScript
+BasedOnStyle:    Google
+ColumnLimit:     100
+
+TabWidth:                2
+ContinuationIndentWidth: 4
+MaxEmptyLinesToKeep    : 2
+
+AllowShortBlocksOnASingleLine:              false
+AllowShortIfStatementsOnASingleLine:        false
+AllowShortLoopsOnASingleLine:               false
+AllowShortFunctionsOnASingleLine:           Empty
diff --git a/modules/examples/src/material/button/index.js b/modules/examples/src/material/button/index.ts
similarity index 52%
rename from modules/examples/src/material/button/index.js
rename to modules/examples/src/material/button/index.ts
index 257db62e7c..fb51584bd0 100644
--- a/modules/examples/src/material/button/index.js
+++ b/modules/examples/src/material/button/index.ts
@@ -1,21 +1,13 @@
-import {bootstrap, MapWrapper, ListWrapper, NgFor} from 'angular2/angular2';
-import {MdButton, MdAnchor} from 'angular2_material/src/components/button/button'
+import {bootstrap, Component, View, NgFor} from 'angular2/angular2';
+import {MdButton, MdAnchor} from 'angular2_material/src/components/button/button';
 import {UrlResolver} from 'angular2/src/services/url_resolver';
 import {commonDemoSetup, DemoUrlResolver} from '../demo_common';
 import {bind} from 'angular2/di';
 
-// TODO(radokirov): Once the application is transpiled by TS instead of Traceur,
-// add those imports back into 'angular2/angular2';
-import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
-import {View} from 'angular2/src/core/annotations_impl/view';
+import {ListWrapper, MapWrapper} from 'angular2/src/facade/collection';
 
-@Component({
-  selector: 'demo-app'
-})
-@View({
-  templateUrl: './demo_app.html',
-  directives: [MdButton, MdAnchor, NgFor]
-})
+@Component({selector: 'demo-app'})
+@View({templateUrl: './demo_app.html', directives: [MdButton, MdAnchor, NgFor]})
 class DemoApp {
   previousClick: string;
   action: string;
@@ -26,7 +18,7 @@ class DemoApp {
     this.previousClick = 'Nothing';
     this.action = "ACTIVATE";
     this.clickCount = 0;
-    this.items = [1,2,3,4,5,6,7,8,9,0];
+    this.items = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];
   }
 
   click(msg: string) {
@@ -45,7 +37,5 @@ class DemoApp {
 
 export function main() {
   commonDemoSetup();
-  bootstrap(DemoApp, [
-    bind(UrlResolver).toValue(new DemoUrlResolver())
-  ]);
+  bootstrap(DemoApp, [bind(UrlResolver).toValue(new DemoUrlResolver())]);
 }
diff --git a/modules/examples/src/material/checkbox/index.js b/modules/examples/src/material/checkbox/index.js
deleted file mode 100644
index 529dcca63c..0000000000
--- a/modules/examples/src/material/checkbox/index.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import {bootstrap} from 'angular2/angular2';
-import {MdCheckbox} from 'angular2_material/src/components/checkbox/checkbox'
-import {UrlResolver} from 'angular2/src/services/url_resolver';
-import {commonDemoSetup, DemoUrlResolver} from '../demo_common';
-import {bind} from 'angular2/di';
-
-// TODO(radokirov): Once the application is transpiled by TS instead of Traceur,
-// add those imports back into 'angular2/angular2';
-import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
-import {View} from 'angular2/src/core/annotations_impl/view';
-
-@Component({
-  selector: 'demo-app'
-})
-@View({
-  templateUrl: './demo_app.html',
-  directives: [MdCheckbox]
-})
-class DemoApp {
-  toggleCount: number;
-
-  constructor() {
-    this.toggleCount = 0;
-  }
-
-  increment() {
-    this.toggleCount++;
-  }
-}
-
-export function main() {
-  commonDemoSetup();
-  bootstrap(DemoApp, [
-    bind(UrlResolver).toValue(new DemoUrlResolver())
-  ]);
-}
diff --git a/modules/examples/src/material/checkbox/index.ts b/modules/examples/src/material/checkbox/index.ts
new file mode 100644
index 0000000000..1be5a93266
--- /dev/null
+++ b/modules/examples/src/material/checkbox/index.ts
@@ -0,0 +1,24 @@
+import {bootstrap, Component, Directive, View} from 'angular2/angular2';
+import {MdCheckbox} from 'angular2_material/src/components/checkbox/checkbox';
+import {UrlResolver} from 'angular2/src/services/url_resolver';
+import {commonDemoSetup, DemoUrlResolver} from '../demo_common';
+import {bind} from 'angular2/di';
+
+@Component({selector: 'demo-app'})
+@View({templateUrl: './demo_app.html', directives: [MdCheckbox]})
+class DemoApp {
+  toggleCount: number;
+
+  constructor() {
+    this.toggleCount = 0;
+  }
+
+  increment() {
+    this.toggleCount++;
+  }
+}
+
+export function main() {
+  commonDemoSetup();
+  bootstrap(DemoApp, [bind(UrlResolver).toValue(new DemoUrlResolver())]);
+}
diff --git a/modules/examples/src/material/demo_common.js b/modules/examples/src/material/demo_common.js
deleted file mode 100644
index 7f6de453b5..0000000000
--- a/modules/examples/src/material/demo_common.js
+++ /dev/null
@@ -1,78 +0,0 @@
-import {IMPLEMENTS, print} from 'angular2/src/facade/lang';
-import {UrlResolver} from 'angular2/src/services/url_resolver';
-import {isPresent, isBlank, RegExpWrapper, StringWrapper, BaseException} from 'angular2/src/facade/lang';
-import {DOM} from 'angular2/src/dom/dom_adapter';
-import {Injectable} from 'angular2/src/di/annotations_impl';
-import {ReflectionCapabilities} from 'angular2/src/reflection/reflection_capabilities';
-import {reflector} from 'angular2/src/reflection/reflection';
-import {BrowserDomAdapter} from 'angular2/src/dom/browser_adapter';
-
-export function commonDemoSetup(): void {
-  BrowserDomAdapter.makeCurrent();
-  reflector.reflectionCapabilities = new ReflectionCapabilities();
-}
-
-@Injectable()
-export class DemoUrlResolver extends UrlResolver {
-    static a;
-
-    isInPubServe:boolean;
-
-    constructor() {
-        super();
-        if (isBlank(UrlResolver.a)) {
-            UrlResolver.a = DOM.createElement('a');
-        }
-        this.isInPubServe = _isInPubServe();
-    }
-
-    resolve(baseUrl: string, url: string): string {
-        if (isBlank(baseUrl)) {
-            DOM.resolveAndSetHref(UrlResolver.a, url, null);
-            return DOM.getHref(UrlResolver.a);
-        }
-
-        if (isBlank(url) || url == '') return baseUrl;
-
-        if (url[0] == '/') {
-            throw new BaseException(`Could not resolve the url ${url} from ${baseUrl}`);
-        }
-
-        var m = RegExpWrapper.firstMatch(_schemeRe, url);
-
-        if (isPresent(m[1])) {
-            return url;
-        }
-
-        if (StringWrapper.startsWith(url, './')) {
-            return `${baseUrl}/${url}`;
-        }
-
-        // Whether the `examples/` dir is being directly served (as the server root).
-        // For cases when this is not true AND we're in pub-serve, `examples/` needs to be
-        // prepended to the URL.
-        var isDirectlyServingExamplesDir = !StringWrapper.contains(baseUrl, 'examples/');
-
-        if (this.isInPubServe && isDirectlyServingExamplesDir) {
-          return `/packages/${url}`;
-        } else if (this.isInPubServe) {
-          return `/examples/packages/${url}`;
-        } else {
-          return `/${url}`;
-        }
-    }
-}
-
-var _schemeRe = RegExpWrapper.create('^([^:/?#]+:)?');
-
-// TODO: remove this hack when http://dartbug.com/23128 is fixed
-function _isInPubServe():boolean {
-  try {
-      int.parse('123');
-      print('>> Running in Dart');
-      return true;
-  } catch(_) {
-      print('>> Running in JS');
-      return false;
-  }
-}
diff --git a/modules/examples/src/material/demo_common.ts b/modules/examples/src/material/demo_common.ts
new file mode 100644
index 0000000000..03e1220e77
--- /dev/null
+++ b/modules/examples/src/material/demo_common.ts
@@ -0,0 +1,87 @@
+import {IMPLEMENTS, print} from 'angular2/src/facade/lang';
+import {UrlResolver} from 'angular2/src/services/url_resolver';
+import {
+  isPresent,
+  isBlank,
+  RegExpWrapper,
+  StringWrapper,
+  BaseException
+} from 'angular2/src/facade/lang';
+import {DOM} from 'angular2/src/dom/dom_adapter';
+import {Injectable} from 'angular2/di';
+import {ReflectionCapabilities} from 'angular2/src/reflection/reflection_capabilities';
+import {reflector} from 'angular2/src/reflection/reflection';
+import {BrowserDomAdapter} from 'angular2/src/dom/browser_adapter';
+
+
+export function commonDemoSetup(): void {
+  BrowserDomAdapter.makeCurrent();
+  reflector.reflectionCapabilities = new ReflectionCapabilities();
+}
+
+@Injectable()
+export class DemoUrlResolver extends UrlResolver {
+  static a;
+
+  isInPubServe: boolean;
+
+  constructor() {
+    super();
+    if (isBlank(UrlResolver.a)) {
+      UrlResolver.a = DOM.createElement('a');
+    }
+    this.isInPubServe = _isInPubServe();
+  }
+
+  resolve(baseUrl: string, url: string): string {
+    if (isBlank(baseUrl)) {
+      DOM.resolveAndSetHref(UrlResolver.a, url, null);
+      return DOM.getHref(UrlResolver.a);
+    }
+
+    if (isBlank(url) || url == '') {
+      return baseUrl;
+    }
+
+    if (url[0] == '/') {
+      throw new BaseException(`Could not resolve the url ${url} from ${baseUrl}`);
+    }
+
+    var m = RegExpWrapper.firstMatch(_schemeRe, url);
+
+    if (isPresent(m[1])) {
+      return url;
+    }
+
+    if (StringWrapper.startsWith(url, './')) {
+      return `${baseUrl}/${url}`;
+    }
+
+    // Whether the `examples/` dir is being directly served (as the server root).
+    // For cases when this is not true AND we're in pub-serve, `examples/` needs to be
+    // prepended to the URL.
+    var isDirectlyServingExamplesDir = !StringWrapper.contains(baseUrl, 'examples/');
+
+    if (this.isInPubServe && isDirectlyServingExamplesDir) {
+      return `/packages/${url}`;
+    } else if (this.isInPubServe) {
+      return `/examples/packages/${url}`;
+    } else {
+      return `/${url}`;
+    }
+  }
+}
+
+var _schemeRe = RegExpWrapper.create('^([^:/?#]+:)?');
+
+// TODO: remove this hack when http://dartbug.com/23128 is fixed
+function _isInPubServe(): boolean {
+  try {
+    int.parse('123');
+    print('>> Running in Dart');
+    return true;
+  } catch (_) {
+    print('>> Running in JS');
+    return false;
+  }
+}
diff --git a/modules/examples/src/material/grid_list/index.js b/modules/examples/src/material/grid_list/index.js
deleted file mode 100644
index 09f931e35e..0000000000
--- a/modules/examples/src/material/grid_list/index.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import {bootstrap} from 'angular2/angular2';
-import {MdGridList, MdGridTile} from 'angular2_material/src/components/grid_list/grid_list'
-import {UrlResolver} from 'angular2/src/services/url_resolver';
-import {commonDemoSetup, DemoUrlResolver} from '../demo_common';
-import {bind} from 'angular2/di';
-
-// TODO(radokirov): Once the application is transpiled by TS instead of Traceur,
-// add those imports back into 'angular2/angular2';
-import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
-import {View} from 'angular2/src/core/annotations_impl/view';
-
-@Component({
-  selector: 'demo-app'
-})
-@View({
-  templateUrl: './demo_app.html',
-  directives: [MdGridList, MdGridTile]
-})
-class DemoApp {
-  tile3RowSpan: number;
-  tile3ColSpan: number;
-
-  constructor() {
-    this.tile3RowSpan = 3;
-    this.tile3ColSpan = 3;
-  }
-}
-
-export function main() {
-  commonDemoSetup();
-  bootstrap(DemoApp, [
-    bind(UrlResolver).toValue(new DemoUrlResolver())
-  ]);
-}
diff --git a/modules/examples/src/material/grid_list/index.ts b/modules/examples/src/material/grid_list/index.ts
new file mode 100644
index 0000000000..ae7bd807d3
--- /dev/null
+++ b/modules/examples/src/material/grid_list/index.ts
@@ -0,0 +1,22 @@
+import {bootstrap, Component, View} from 'angular2/angular2';
+import {MdGridList, MdGridTile} from 'angular2_material/src/components/grid_list/grid_list';
+import {UrlResolver} from 'angular2/src/services/url_resolver';
+import {commonDemoSetup, DemoUrlResolver} from '../demo_common';
+import {bind} from 'angular2/di';
+
+@Component({selector: 'demo-app'})
+@View({templateUrl: './demo_app.html', directives: [MdGridList, MdGridTile]})
+class DemoApp {
+  tile3RowSpan: number;
+  tile3ColSpan: number;
+
+  constructor() {
+    this.tile3RowSpan = 3;
+    this.tile3ColSpan = 3;
+  }
+}
+
+export function main() {
+  commonDemoSetup();
+  bootstrap(DemoApp, [bind(UrlResolver).toValue(new DemoUrlResolver())]);
+}
diff --git a/modules/examples/src/material/input/demo_app.html b/modules/examples/src/material/input/demo_app.html
index c5f355323c..2265147161 100644
--- a/modules/examples/src/material/input/demo_app.html
+++ b/modules/examples/src/material/input/demo_app.html
@@ -34,10 +34,10 @@
     <input disabled value="Firefly">
   </md-input-container>
 
-  <h3>textarea</h3>
+  <!--<h3>textarea</h3>
   <md-input-container>
     <label>What I did on my summer vaccation</label>
     <textarea></textarea>
-  </md-input-container>
+  </md-input-container>-->
 
 </div>
diff --git a/modules/examples/src/material/input/index.js b/modules/examples/src/material/input/index.js
deleted file mode 100644
index e97973b370..0000000000
--- a/modules/examples/src/material/input/index.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import {bootstrap} from 'angular2/angular2';
-import {MdInputContainer, MdInput, MdTextarea} from 'angular2_material/src/components/input/input'
-import {UrlResolver} from 'angular2/src/services/url_resolver';
-import {commonDemoSetup, DemoUrlResolver} from '../demo_common';
-import {bind} from 'angular2/di';
-
-// TODO(radokirov): Once the application is transpiled by TS instead of Traceur,
-// add those imports back into 'angular2/angular2';
-import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
-import {View} from 'angular2/src/core/annotations_impl/view';
-
-@Component({
-  selector: 'demo-app'
-})
-@View({
-  templateUrl: './demo_app.html',
-  directives: [MdInputContainer, MdInput, MdTextarea]
-})
-class DemoApp {
-  constructor() {
-
-  }
-}
-
-export function main() {
-  commonDemoSetup();
-  bootstrap(DemoApp, [
-    bind(UrlResolver).toValue(new DemoUrlResolver())
-  ]);
-}
diff --git a/modules/examples/src/material/input/index.ts b/modules/examples/src/material/input/index.ts
new file mode 100644
index 0000000000..9fdc1fd917
--- /dev/null
+++ b/modules/examples/src/material/input/index.ts
@@ -0,0 +1,16 @@
+import {bootstrap, Component, View} from 'angular2/angular2';
+import {MdInputContainer, MdInput} from 'angular2_material/src/components/input/input';
+import {UrlResolver} from 'angular2/src/services/url_resolver';
+import {commonDemoSetup, DemoUrlResolver} from '../demo_common';
+import {bind} from 'angular2/di';
+
+@Component({selector: 'demo-app'})
+@View({templateUrl: './demo_app.html', directives: [MdInputContainer, MdInput]})
+class DemoApp {
+  constructor() {}
+}
+
+export function main() {
+  commonDemoSetup();
+  bootstrap(DemoApp, [bind(UrlResolver).toValue(new DemoUrlResolver())]);
+}
diff --git a/modules/examples/src/material/progress-linear/index.js b/modules/examples/src/material/progress-linear/index.js
deleted file mode 100644
index d72ff6105d..0000000000
--- a/modules/examples/src/material/progress-linear/index.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import {bootstrap} from 'angular2/angular2';
-import {MdProgressLinear} from 'angular2_material/src/components/progress-linear/progress_linear'
-import {UrlResolver} from 'angular2/src/services/url_resolver';
-import {commonDemoSetup, DemoUrlResolver} from '../demo_common';
-import {bind} from 'angular2/di';
-
-// TODO(radokirov): Once the application is transpiled by TS instead of Traceur,
-// add those imports back into 'angular2/angular2';
-import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
-import {View} from 'angular2/src/core/annotations_impl/view';
-
-@Component({
-  selector: 'demo-app'
-})
-@View({
-  templateUrl: './demo_app.html',
-  directives: [MdProgressLinear]
-})
-class DemoApp {
-  progress: number;
-
-  constructor() {
-    this.progress = 40;
-  }
-
-  step(s: number) {
-    this.progress += s;
-  }
-}
-
-export function main() {
-  commonDemoSetup();
-  bootstrap(DemoApp, [
-    bind(UrlResolver).toValue(new DemoUrlResolver())
-  ]);
-}
diff --git a/modules/examples/src/material/progress-linear/index.ts b/modules/examples/src/material/progress-linear/index.ts
new file mode 100644
index 0000000000..e6a94a4d41
--- /dev/null
+++ b/modules/examples/src/material/progress-linear/index.ts
@@ -0,0 +1,24 @@
+import {bootstrap, Component, View} from 'angular2/angular2';
+import {MdProgressLinear} from 'angular2_material/src/components/progress-linear/progress_linear';
+import {UrlResolver} from 'angular2/src/services/url_resolver';
+import {commonDemoSetup, DemoUrlResolver} from '../demo_common';
+import {bind} from 'angular2/di';
+
+@Component({selector: 'demo-app'})
+@View({templateUrl: './demo_app.html', directives: [MdProgressLinear]})
+class DemoApp {
+  progress: number;
+
+  constructor() {
+    this.progress = 40;
+  }
+
+  step(s: number) {
+    this.progress += s;
+  }
+}
+
+export function main() {
+  commonDemoSetup();
+  bootstrap(DemoApp, [bind(UrlResolver).toValue(new DemoUrlResolver())]);
+}
diff --git a/modules/examples/src/material/radio/index.js b/modules/examples/src/material/radio/index.ts
similarity index 56%
rename from modules/examples/src/material/radio/index.js
rename to modules/examples/src/material/radio/index.ts
index 6fff5168eb..662f59c499 100644
--- a/modules/examples/src/material/radio/index.js
+++ b/modules/examples/src/material/radio/index.ts
@@ -1,23 +1,12 @@
-import {bootstrap} from 'angular2/angular2';
-import {MdRadioButton, MdRadioGroup} from 'angular2_material/src/components/radio/radio_button'
-import {MdRadioDispatcher} from 'angular2_material/src/components/radio/radio_dispatcher'
+import {bootstrap, Component, View} from 'angular2/angular2';
+import {MdRadioButton, MdRadioGroup} from 'angular2_material/src/components/radio/radio_button';
+import {MdRadioDispatcher} from 'angular2_material/src/components/radio/radio_dispatcher';
 import {UrlResolver} from 'angular2/src/services/url_resolver';
 import {commonDemoSetup, DemoUrlResolver} from '../demo_common';
 import {bind} from 'angular2/di';
 
-// TODO(radokirov): Once the application is transpiled by TS instead of Traceur,
-// add those imports back into 'angular2/angular2';
-import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
-import {View} from 'angular2/src/core/annotations_impl/view';
-
-@Component({
-  selector: 'demo-app',
-  appInjector: [MdRadioDispatcher]
-})
-@View({
-  templateUrl: './demo_app.html',
-  directives: [MdRadioGroup, MdRadioButton]
-})
+@Component({selector: 'demo-app', appInjector: [MdRadioDispatcher]})
+@View({templateUrl: './demo_app.html', directives: [MdRadioGroup, MdRadioButton]})
 class DemoApp {
   thirdValue;
   groupValueChangeCount;
@@ -48,7 +37,5 @@ class DemoApp {
 
 export function main() {
   commonDemoSetup();
-  bootstrap(DemoApp, [
-    bind(UrlResolver).toValue(new DemoUrlResolver())
-  ]);
+  bootstrap(DemoApp, [bind(UrlResolver).toValue(new DemoUrlResolver())]);
 }
diff --git a/modules/examples/src/material/switcher/index.js b/modules/examples/src/material/switcher/index.js
deleted file mode 100644
index 91e8b9dfd0..0000000000
--- a/modules/examples/src/material/switcher/index.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import {bootstrap} from 'angular2/angular2';
-import {MdSwitch} from 'angular2_material/src/components/switcher/switch'
-import {UrlResolver} from 'angular2/src/services/url_resolver';
-import {commonDemoSetup, DemoUrlResolver} from '../demo_common';
-import {bind} from 'angular2/di';
-
-// TODO(radokirov): Once the application is transpiled by TS instead of Traceur,
-// add those imports back into 'angular2/angular2';
-import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
-import {View} from 'angular2/src/core/annotations_impl/view';
-
-@Component({
-  selector: 'demo-app'
-})
-@View({
-  templateUrl: './demo_app.html',
-  directives: [MdSwitch]
-})
-class DemoApp {
-  toggleCount: number;
-
-  constructor() {
-    this.toggleCount = 0;
-  }
-
-  increment() {
-    this.toggleCount++;
-  }
-}
-
-export function main() {
-  commonDemoSetup();
-  bootstrap(DemoApp, [
-    bind(UrlResolver).toValue(new DemoUrlResolver())
-  ]);
-}
diff --git a/modules/examples/src/material/switcher/index.ts b/modules/examples/src/material/switcher/index.ts
new file mode 100644
index 0000000000..88a8ed6e29
--- /dev/null
+++ b/modules/examples/src/material/switcher/index.ts
@@ -0,0 +1,24 @@
+import {bootstrap, Component, View} from 'angular2/angular2';
+import {MdSwitch} from 'angular2_material/src/components/switcher/switch';
+import {UrlResolver} from 'angular2/src/services/url_resolver';
+import {commonDemoSetup, DemoUrlResolver} from '../demo_common';
+import {bind} from 'angular2/di';
+
+@Component({selector: 'demo-app'})
+@View({templateUrl: './demo_app.html', directives: [MdSwitch]})
+class DemoApp {
+  toggleCount: number;
+
+  constructor() {
+    this.toggleCount = 0;
+  }
+
+  increment() {
+    this.toggleCount++;
+  }
+}
+
+export function main() {
+  commonDemoSetup();
+  bootstrap(DemoApp, [bind(UrlResolver).toValue(new DemoUrlResolver())]);
+}