From 65aa538ee189cfbed12e1fecee2674c4f6fc875a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gr=C3=A9gory=20Copin?= <gregcop1@gmail.com>
Date: Sun, 7 Aug 2016 20:19:12 +0200
Subject: [PATCH] feat: update to angular2 rc4

* changes to rc4

* fix: MdDataTable checkbox click

* fix: radio button example

* fix: router upgrade

* fix beforeEachProviders() and provide() deprecations

* remove MockAppliacationHref deprecated API

* wip update specs.

* fix: tests

* fix: MdDataTable rangeFormat issue

* fix examples with new angular forms, disabled deprecated forms.

* doc: update package.json about contributors

Fix #268
Fix #248

* fix: webpack module package version

* chore: fix issue where documentation was not highlighted on route change

 - rather than binding innerHTML, bind to content property and use setter to highlight whenever the value changes.
 - cleanup route param subscription when components route is destroyed

* fix: tests

* chore: drop IE9 and IE10 from testing and add Microsoft Edge

 BREAKING CHANGE: The automated builds will no longer execute tests against IE9 and IE10 browsers. IE11 and Microsoft Edge (currently 13.10586) will be tested.

* chore: Edge just cannot catch a break

 - travis is flaky on it, even though it runs reliably from my terminal

* chore(travis): remove unused firefox v30 reference
---
 .travis.yml                                   |   8 +-
 Gruntfile.js                                  |   2 +-
 config.karma.js                               |   3 +-
 karma.conf.js                                 |  32 ++-
 karma.sauce.conf.js                           |   4 +-
 modules/site/angular-cli-build.js             |   2 +-
 modules/site/package.json                     |  32 +--
 .../app/+components/components.component.html |   2 +-
 .../+components/components.component.spec.ts  |   9 +-
 .../app/+components/components.component.ts   |  42 +--
 .../src/app/+index/index.component.spec.ts    |   9 +-
 .../button-basic-usage.component.spec.ts      |  17 +-
 .../card-action-buttons.component.spec.ts     |  16 +-
 .../card/card-basic-usage.component.spec.ts   |  16 +-
 .../card-inline-actions.component.spec.ts     |  16 +-
 .../checkbox-basic-usage.component.html       |  12 +-
 .../checkbox-basic-usage.component.spec.ts    |  16 +-
 .../data-table-basic-usage.component.spec.ts  |  16 +-
 ...ta-table-selectable-rows.component.spec.ts |  16 +-
 .../dialog-basic-usage.component.spec.ts      |  16 +-
 .../elevation-basic-usage.component.spec.ts   |  16 +-
 .../input/input-basic-usage.component.spec.ts |  16 +-
 .../input/input-basic-usage.component.ts      |   2 +-
 .../list/list-basic-usage.component.spec.ts   |  16 +-
 .../pagination-basic-usage.component.html     |   5 +-
 .../pagination-basic-usage.component.spec.ts  |  16 +-
 .../pagination-split-usage.component.html     |   2 +-
 .../pagination-split-usage.component.spec.ts  |  16 +-
 ...progress-bar-basic-usage.component.spec.ts |  16 +-
 ...gress-circle-basic-usage.component.spec.ts |  16 +-
 .../radio/radio-basic-usage.component.html    |  10 +-
 .../radio/radio-basic-usage.component.spec.ts |  16 +-
 .../radio/radio-basic-usage.component.ts      |   9 +-
 .../sidenav-basic-usage.component.spec.ts     |  16 +-
 .../switch-basic-usage.component.spec.ts      |  16 +-
 .../tabs-dynamic-height.component.spec.ts     |  16 +-
 .../tabs/tabs-dynamic-tabs.component.spec.ts  |  16 +-
 .../toolbar-basic-usage.component.spec.ts     |  16 +-
 modules/site/src/app/index.ts                 |   2 +-
 .../shared/example/example.component.spec.ts  |  16 +-
 .../shared/footer/footer.component.spec.ts    |  16 +-
 .../highlight-container.component.spec.ts     |  16 +-
 .../highlight-container.component.ts          |  19 +-
 .../highlight/highlight.component.spec.ts     |  43 +--
 modules/site/src/app/site.component.spec.ts   |   8 +-
 modules/site/src/app/site.component.ts        |  48 ++--
 modules/site/src/main.ts                      |  22 +-
 modules/site/src/system-config.ts             |   2 +-
 modules/webpack/package.json                  |  22 +-
 package.json                                  |  26 +-
 src/components/backdrop/backdrop_spec.ts      |  91 ++++---
 src/components/button/button_spec.ts          |  45 ++--
 .../data-table/data_table_selectable_tr.ts    |  20 +-
 src/components/data-table/data_table_spec.ts  |  36 +--
 src/components/dialog/dialog.ts               |   4 +-
 src/components/form/messages_spec.ts          |  24 +-
 src/components/form/validators_spec.ts        |   1 -
 src/components/ink/ink_spec.ts                |  16 +-
 src/components/pagination/pagination.ts       |  38 ++-
 .../pagination/pagination_service.ts          |   2 +-
 src/components/pagination/pagination_spec.ts  | 255 +++++++++---------
 src/components/peekaboo/peekaboo_spec.ts      |  49 ++--
 src/components/switch/switch_spec.ts          |  44 ++-
 src/core/util/ink_spec.ts                     |  24 +-
 src/core/util/media_spec.ts                   |   2 +-
 src/index.ts                                  |  22 +-
 src/platform/testing/bootstrap.ts             |  20 +-
 src/platform/testing/util.ts                  |   2 +-
 68 files changed, 741 insertions(+), 716 deletions(-)

diff --git a/.travis.yml b/.travis.yml
index 3945df3f..921ae646 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -1,7 +1,7 @@
 language: node_js
 sudo: false
 node_js:
-- '4.2.6'
+- '5.6.0'
 before_install:
 - npm install -g karma-cli typings
 - export CHROME_BIN=chromium-browser
@@ -17,9 +17,9 @@ install:
 - ./node_modules/.bin/grunt build
 
 script:
-#- karma start karma.sauce.conf.js --browsers MICROSOFTEDGE_V20.10240
-- karma start karma.sauce.conf.js --browsers IE_V9,IE_V10,IE_V11
-- karma start karma.sauce.conf.js --browsers FIREFOX_V40,FIREFOX_V30,FIREFOX_V35
+# TODO: When it can be run reliably from travis, add MICROSOFTEDGE_V13.10586
+- karma start karma.sauce.conf.js --browsers IE_V11
+- karma start karma.sauce.conf.js --browsers FIREFOX_V40,FIREFOX_V35
 - karma start karma.sauce.conf.js --browsers CHROME_VBETA,CHROME_VDEV,CHROME_V39,CHROME_V26
 - karma start karma.sauce.conf.js --browsers ANDROID_V5.1,ANDROID_V4.4
 after_script:
diff --git a/Gruntfile.js b/Gruntfile.js
index 5bbce9aa..256fade8 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -213,7 +213,7 @@ module.exports = function (grunt) {
   grunt.loadNpmTasks('grunt-contrib-clean');
   grunt.loadNpmTasks('grunt-contrib-connect');
   grunt.loadNpmTasks('grunt-contrib-watch');
-  grunt.loadNpmTasks('grunt-contrib-sass');
+  grunt.loadNpmTasks('grunt-sass');
   grunt.loadNpmTasks('grunt-postcss');
   grunt.loadNpmTasks('grunt-notify');
   grunt.loadNpmTasks('grunt-karma');
diff --git a/config.karma.js b/config.karma.js
index a826dea8..8844ea94 100644
--- a/config.karma.js
+++ b/config.karma.js
@@ -33,7 +33,8 @@ var packageNames = [
   '@angular/platform-browser',
   '@angular/platform-browser-dynamic',
   '@angular/router',
-  '@angular/router-deprecated',
+  '@angular/forms',
+  '@angular/router',
   '@angular/testing',
   '@angular/upgrade'
 ];
diff --git a/karma.conf.js b/karma.conf.js
index 068388cd..f1214ac0 100644
--- a/karma.conf.js
+++ b/karma.conf.js
@@ -17,20 +17,36 @@ module.exports = function (config) {
     frameworks: ['jasmine'],
 
     files: [
-      { pattern: 'node_modules/es6-shim/es6-shim.js', included: true, watched: false },
-      { pattern: 'node_modules/zone.js/dist/zone.js', included: true, watched: false },
-      { pattern: 'node_modules/reflect-metadata/Reflect.js', included: true, watched: false },
-      { pattern: 'node_modules/systemjs/dist/system-polyfills.js', included: true, watched: false },
-      { pattern: 'node_modules/systemjs/dist/system.src.js', included: true, watched: false },
-      { pattern: 'node_modules/zone.js/dist/async-test.js', included: true, watched: false },
+      // Polyfills.
+      'node_modules/core-js/client/shim.min.js',
+
+      // System.js for module loading
+      // Polyfills.
+      'node_modules/core-js/client/shim.min.js',
+
+      // System.js for module loading
+      'node_modules/systemjs/dist/system.src.js',
+
+      // Zone.js dependencies
+      'node_modules/zone.js/dist/zone.js',
+      'node_modules/zone.js/dist/jasmine-patch.js',
+      'node_modules/zone.js/dist/async-test.js',
+      'node_modules/zone.js/dist/fake-async-test.js',
+
+      // RxJs.
       { pattern: 'node_modules/rxjs/**/*.js', included: false, watched: false },
-      { pattern: 'node_modules/@angular/**/*.js', included: false, watched: false },
+      { pattern: 'node_modules/rxjs/**/*.js.map', included: false, watched: false },
+
+      // paths loaded via module imports
+      // Angular itself
+      { pattern: 'node_modules/@angular/**/*.js', included: false, watched: true },
       { pattern: 'node_modules/@angular2-material/**/*.js', included: false, watched: false },
       'karma.ie.shims.js',
       "config.karma.js",
       { pattern: 'dist/*.*', included: false, watched: true },
       { pattern: 'dist/components/**/*.js', included: false, watched: true },
       { pattern: 'dist/core/**/*.js', included: false, watched: true },
+      { pattern: 'node_modules/systemjs/dist/system-polyfills.js', included: false, watched: false }, // PhantomJS2 (and possibly others) might require it
       { pattern: 'dist/platform/**/*.js', included: false, watched: true },
       "karma.main.js"
     ],
@@ -45,7 +61,7 @@ module.exports = function (config) {
     // - Chrome, ChromeCanary, Firefox, Opera, Safari (only Mac), PhantomJS, IE (only Windows)
     browsers: process.env.TRAVIS ? ['Firefox'] : ['Chrome'],
     browserNoActivityTimeout: 15000,
-    singleRun: false,
+    singleRun: true,
     reportSlowerThan: 500,
     plugins: [
       'karma-*'
diff --git a/karma.sauce.conf.js b/karma.sauce.conf.js
index f13c13e4..16d538af 100644
--- a/karma.sauce.conf.js
+++ b/karma.sauce.conf.js
@@ -16,10 +16,8 @@ module.exports = function (config) {
     ['chrome', '39'],
     ['chrome', '26'],
 
-    ['microsoftedge', '20.10240', 'Windows 10'],
+    ['microsoftedge', '13.10586', 'Windows 10'],
     ['internet explorer', '11', 'Windows 10'],
-    ['internet explorer', '10', 'Windows 8'],
-    ['internet explorer', '9', 'Windows 7'],
 
     ['android', '5.1'],
     ['android', '4.4']
diff --git a/modules/site/angular-cli-build.js b/modules/site/angular-cli-build.js
index 639f3790..04ba5e48 100644
--- a/modules/site/angular-cli-build.js
+++ b/modules/site/angular-cli-build.js
@@ -20,7 +20,7 @@ module.exports = function(defaults) {
       'rxjs/**/*.js',
       'ng2-material/**/*.*',
       '@angular2-material/**/*.*',
-      '@angular/**/*.js'
+      '@angular/**/*.*'
     ]
   });
 };
diff --git a/modules/site/package.json b/modules/site/package.json
index 36be58f2..54d6c139 100644
--- a/modules/site/package.json
+++ b/modules/site/package.json
@@ -14,22 +14,22 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/common": "2.0.0-rc.1",
-    "@angular/compiler": "2.0.0-rc.1",
-    "@angular/core": "2.0.0-rc.1",
-    "@angular/http": "2.0.0-rc.1",
-    "@angular/platform-browser": "2.0.0-rc.1",
-    "@angular/platform-browser-dynamic": "2.0.0-rc.1",
-    "@angular/router": "2.0.0-rc.1",
-    "@angular2-material/checkbox": "2.0.0-alpha.5-2",
-    "@angular2-material/core": "2.0.0-alpha.5-2",
-    "@angular2-material/input": "2.0.0-alpha.5-2",
-    "@angular2-material/progress-bar": "2.0.0-alpha.5-2",
-    "@angular2-material/progress-circle": "2.0.0-alpha.5-2",
-    "@angular2-material/radio": "2.0.0-alpha.5-2",
-    "@angular2-material/sidenav": "2.0.0-alpha.5-2",
-    "@angular2-material/tabs": "^2.0.0-alpha.5-2",
-    "@angular2-material/toolbar": "2.0.0-alpha.5-2",
+    "@angular/common": "2.0.0-rc.4",
+    "@angular/compiler": "2.0.0-rc.4",
+    "@angular/core": "2.0.0-rc.4",
+    "@angular/http": "2.0.0-rc.4",
+    "@angular/platform-browser": "2.0.0-rc.4",
+    "@angular/platform-browser-dynamic": "2.0.0-rc.4",
+    "@angular/router": "3.0.0-alpha.8",
+    "@angular2-material/checkbox": "2.0.0-alpha.6",
+    "@angular2-material/core": "2.0.0-alpha.6",
+    "@angular2-material/input": "2.0.0-alpha.6",
+    "@angular2-material/progress-bar": "2.0.0-alpha.6",
+    "@angular2-material/progress-circle": "2.0.0-alpha.6",
+    "@angular2-material/radio": "2.0.0-alpha.6",
+    "@angular2-material/sidenav": "2.0.0-alpha.6",
+    "@angular2-material/tabs": "^2.0.0-alpha.6",
+    "@angular2-material/toolbar": "2.0.0-alpha.6",
     "es6-shim": "^0.35.0",
     "highlightjs": "^8.7.0",
     "ng2-material": "file:../../dist",
diff --git a/modules/site/src/app/+components/components.component.html b/modules/site/src/app/+components/components.component.html
index c04387f5..4c3f0151 100644
--- a/modules/site/src/app/+components/components.component.html
+++ b/modules/site/src/app/+components/components.component.html
@@ -7,5 +7,5 @@ <h1 class="examples-title">Examples</h1>
 <docs-highlight-container
   class="examples-intro"
   *ngIf="value.documentation"
-  selector="pre > code" [innerHtml]="value.documentation">
+  selector="pre > code" [content]="value.documentation">
 </docs-highlight-container>
diff --git a/modules/site/src/app/+components/components.component.spec.ts b/modules/site/src/app/+components/components.component.spec.ts
index 734a07fa..0f7cd476 100644
--- a/modules/site/src/app/+components/components.component.spec.ts
+++ b/modules/site/src/app/+components/components.component.spec.ts
@@ -1,6 +1,6 @@
 import {ComponentFixture, TestComponentBuilder} from '@angular/compiler/testing';
 import {Component} from '@angular/core';
-import {beforeEach, beforeEachProviders, describe, expect, it, inject} from '@angular/core/testing';
+import {addProviders, inject} from '@angular/core/testing';
 import {By} from '@angular/platform-browser';
 
 import {ComponentsComponent} from './components.component';
@@ -8,7 +8,12 @@ import {ComponentsComponent} from './components.component';
 describe('Component: Components', () => {
   let builder: TestComponentBuilder;
 
-  beforeEachProviders(() => [ComponentsComponent]);
+  beforeEach(() => {
+    addProviders([
+      ComponentsComponent,
+    ]);
+  });
+
   beforeEach(
       inject([TestComponentBuilder], function(tcb: TestComponentBuilder) { builder = tcb; }));
 
diff --git a/modules/site/src/app/+components/components.component.ts b/modules/site/src/app/+components/components.component.ts
index 94937ef9..fea6738c 100644
--- a/modules/site/src/app/+components/components.component.ts
+++ b/modules/site/src/app/+components/components.component.ts
@@ -1,8 +1,9 @@
-import {Component} from '@angular/core';
-import {OnActivate, RouteSegment, ROUTER_DIRECTIVES} from '@angular/router';
+import {Component, OnInit, OnDestroy} from '@angular/core';
+import {ActivatedRoute, ROUTER_DIRECTIVES} from '@angular/router';
 import {MATERIAL_DIRECTIVES} from 'ng2-material';
 import {ComponentsService, IComponentMeta, NavigationService, ExampleComponent} from '../shared';
 import {HighlightComponent, HighlightContainerComponent} from '../shared/highlight/index';
+import {Subscription} from 'rxjs/Subscription';
 
 
 @Component({
@@ -15,7 +16,7 @@ import {HighlightComponent, HighlightContainerComponent} from '../shared/highlig
     HighlightContainerComponent
   ]
 })
-export class ComponentsComponent implements OnActivate {
+export class ComponentsComponent implements OnInit, OnDestroy {
   public id: string;
 
   public value: IComponentMeta = <IComponentMeta>{};
@@ -23,20 +24,31 @@ export class ComponentsComponent implements OnActivate {
   public next: IComponentMeta = null;
   public previous: IComponentMeta = null;
 
-  constructor(private _components: ComponentsService, private _navigation: NavigationService) {}
+  private subscription: Subscription;
 
-  routerOnActivate(curr: RouteSegment): void {
-    this.id = curr.getParam('id');
-    this._components.getComponent(this.id).then((c: IComponentMeta) => {
-      this.value = c;
-      document.title = 'ng2-material – ' + c.name;
-      this._navigation.currentTitle = c.name;
-      this._components.getNext(c).then((next: IComponentMeta) => {
-        this._navigation.nextLink = this._navigation.componentLink(next);
-      });
-      this._components.getPrevious(c).then((previous: IComponentMeta) => {
-        this._navigation.prevLink = this._navigation.componentLink(previous);
+  constructor(private _route: ActivatedRoute,
+              private _components: ComponentsService,
+              private _navigation: NavigationService) {}
+
+  ngOnInit(): void {
+    this.subscription = this._route.params.subscribe((params) => {
+      this.id = params['id'];
+      this._components.getComponent(this.id).then((c: IComponentMeta) => {
+        this.value = c;
+        document.title = 'ng2-material – ' + c.name;
+        this._navigation.currentTitle = c.name;
+        this._components.getNext(c).then((next: IComponentMeta) => {
+          this._navigation.nextLink = this._navigation.componentLink(next);
+        });
+        this._components.getPrevious(c).then((previous: IComponentMeta) => {
+          this._navigation.prevLink = this._navigation.componentLink(previous);
+        });
       });
     });
   }
+
+  ngOnDestroy(): any {
+    this.subscription.unsubscribe();
+  }
+
 }
diff --git a/modules/site/src/app/+index/index.component.spec.ts b/modules/site/src/app/+index/index.component.spec.ts
index a2c83c0b..640fadd7 100644
--- a/modules/site/src/app/+index/index.component.spec.ts
+++ b/modules/site/src/app/+index/index.component.spec.ts
@@ -1,6 +1,6 @@
 import {ComponentFixture, TestComponentBuilder} from '@angular/compiler/testing';
 import {Component} from '@angular/core';
-import {beforeEach, beforeEachProviders, describe, expect, it, inject} from '@angular/core/testing';
+import {addProviders, inject} from '@angular/core/testing';
 import {By} from '@angular/platform-browser';
 
 import {IndexComponent} from './index.component';
@@ -8,7 +8,12 @@ import {IndexComponent} from './index.component';
 describe('Component: Index', () => {
   let builder: TestComponentBuilder;
 
-  beforeEachProviders(() => [IndexComponent]);
+  beforeEach(() => {
+    addProviders([
+      IndexComponent,
+    ]);
+  });
+
   beforeEach(
       inject([TestComponentBuilder], function(tcb: TestComponentBuilder) { builder = tcb; }));
 
diff --git a/modules/site/src/app/examples/button/button-basic-usage.component.spec.ts b/modules/site/src/app/examples/button/button-basic-usage.component.spec.ts
index a3c5e61b..d0f87d80 100644
--- a/modules/site/src/app/examples/button/button-basic-usage.component.spec.ts
+++ b/modules/site/src/app/examples/button/button-basic-usage.component.spec.ts
@@ -1,12 +1,4 @@
-import {
-  beforeEach,
-  beforeEachProviders,
-  describe,
-  expect,
-  it,
-  inject,
-} from '@angular/core/testing';
-import {ComponentFixture, TestComponentBuilder} from '@angular/compiler/testing';
+import {addProviders, inject, ComponentFixture, TestComponentBuilder} from '@angular/core/testing';
 import {Component} from '@angular/core';
 import {By} from '@angular/platform-browser';
 import {ButtonBasicUsageComponent} from './button-basic-usage.component';
@@ -14,7 +6,12 @@ import {ButtonBasicUsageComponent} from './button-basic-usage.component';
 describe('Component: ButtonBasicUsage', () => {
   let builder: TestComponentBuilder;
 
-  beforeEachProviders(() => [ButtonBasicUsageComponent]);
+  beforeEach(() => {
+    addProviders([
+      ButtonBasicUsageComponent,
+    ]);
+  });
+
   beforeEach(
       inject([TestComponentBuilder], function(tcb: TestComponentBuilder) { builder = tcb; }));
 
diff --git a/modules/site/src/app/examples/card/card-action-buttons.component.spec.ts b/modules/site/src/app/examples/card/card-action-buttons.component.spec.ts
index 37a6d841..1f6d9c28 100644
--- a/modules/site/src/app/examples/card/card-action-buttons.component.spec.ts
+++ b/modules/site/src/app/examples/card/card-action-buttons.component.spec.ts
@@ -1,11 +1,4 @@
-import {
-  beforeEach,
-  beforeEachProviders,
-  describe,
-  expect,
-  it,
-  inject,
-} from '@angular/core/testing';
+import {addProviders, inject} from '@angular/core/testing';
 import {ComponentFixture, TestComponentBuilder} from '@angular/compiler/testing';
 import {Component} from '@angular/core';
 import {By} from '@angular/platform-browser';
@@ -14,7 +7,12 @@ import {CardActionButtonsComponent} from './card-action-buttons.component';
 describe('Component: CardActionButtons', () => {
   let builder: TestComponentBuilder;
 
-  beforeEachProviders(() => [CardActionButtonsComponent]);
+  beforeEach(() => {
+    addProviders([
+      CardActionButtonsComponent,
+    ]);
+  });
+
   beforeEach(
       inject([TestComponentBuilder], function(tcb: TestComponentBuilder) { builder = tcb; }));
 
diff --git a/modules/site/src/app/examples/card/card-basic-usage.component.spec.ts b/modules/site/src/app/examples/card/card-basic-usage.component.spec.ts
index 8ef623cd..7eaf1c69 100644
--- a/modules/site/src/app/examples/card/card-basic-usage.component.spec.ts
+++ b/modules/site/src/app/examples/card/card-basic-usage.component.spec.ts
@@ -1,11 +1,4 @@
-import {
-  beforeEach,
-  beforeEachProviders,
-  describe,
-  expect,
-  it,
-  inject,
-} from '@angular/core/testing';
+import {addProviders, inject} from '@angular/core/testing';
 import {ComponentFixture, TestComponentBuilder} from '@angular/compiler/testing';
 import {Component} from '@angular/core';
 import {By} from '@angular/platform-browser';
@@ -14,7 +7,12 @@ import {CardBasicUsageComponent} from './card-basic-usage.component';
 describe('Component: CardBasicUsage', () => {
   let builder: TestComponentBuilder;
 
-  beforeEachProviders(() => [CardBasicUsageComponent]);
+  beforeEach(() => {
+    addProviders([
+      CardBasicUsageComponent,
+    ]);
+  });
+
   beforeEach(
       inject([TestComponentBuilder], function(tcb: TestComponentBuilder) { builder = tcb; }));
 
diff --git a/modules/site/src/app/examples/card/card-inline-actions.component.spec.ts b/modules/site/src/app/examples/card/card-inline-actions.component.spec.ts
index 1760f4c9..67a208a6 100644
--- a/modules/site/src/app/examples/card/card-inline-actions.component.spec.ts
+++ b/modules/site/src/app/examples/card/card-inline-actions.component.spec.ts
@@ -1,11 +1,4 @@
-import {
-  beforeEach,
-  beforeEachProviders,
-  describe,
-  expect,
-  it,
-  inject,
-} from '@angular/core/testing';
+import {addProviders, inject} from '@angular/core/testing';
 import {ComponentFixture, TestComponentBuilder} from '@angular/compiler/testing';
 import {Component} from '@angular/core';
 import {By} from '@angular/platform-browser';
@@ -14,7 +7,12 @@ import {CardInlineActionsComponent} from './card-inline-actions.component';
 describe('Component: CardInlineActions', () => {
   let builder: TestComponentBuilder;
 
-  beforeEachProviders(() => [CardInlineActionsComponent]);
+  beforeEach(() => {
+    addProviders([
+      CardInlineActionsComponent,
+    ]);
+  });
+
   beforeEach(
       inject([TestComponentBuilder], function(tcb: TestComponentBuilder) { builder = tcb; }));
 
diff --git a/modules/site/src/app/examples/checkbox/checkbox-basic-usage.component.html b/modules/site/src/app/examples/checkbox/checkbox-basic-usage.component.html
index 19eca500..6a145e4a 100644
--- a/modules/site/src/app/examples/checkbox/checkbox-basic-usage.component.html
+++ b/modules/site/src/app/examples/checkbox/checkbox-basic-usage.component.html
@@ -1,16 +1,16 @@
 <section layout-padding>
   <fieldset class="standard">
-    <legend>Using two way bindings with <code>[(checked)]</code></legend>
+    <legend>Using two way bindings with <code>[(ngModel)]</code></legend>
     <div layout="row" layout-wrap>
       <div flex-xs="100" flex="50">
-        <md-checkbox [(checked)]="cb1" aria-label="Checkbox 1">
+        <md-checkbox [(ngModel)]="cb1" aria-label="Checkbox 1">
           Checkbox 1: {{ cb1 }}
         </md-checkbox>
       </div>
       <div flex-xs="100" flex="50">
         <div layout-xs="column" flex-xs="100">
           <md-checkbox
-            [(checked)]="cb2"
+            [(ngModel)]="cb2"
             aria-label="Checkbox 2"
             ng-true-value="'yup'"
             ng-false-value="'nope'"
@@ -27,17 +27,17 @@
         </div>
       </div>
       <div flex-xs="100" flex="50">
-        <md-checkbox disabled="true" aria-label="Disabled checkbox" [(checked)]="cb3">
+        <md-checkbox disabled="true" aria-label="Disabled checkbox" [(ngModel)]="cb3">
           Checkbox: Disabled
         </md-checkbox>
       </div>
       <div flex-xs="100" flex="50">
-        <md-checkbox disabled="true" aria-label="Disabled checked checkbox" [(checked)]="cb4">
+        <md-checkbox disabled="true" aria-label="Disabled checked checkbox" [(ngModel)]="cb4">
           Checkbox: Disabled, Checked
         </md-checkbox>
       </div>
       <div flex-xs="100" flex="50">
-        <md-checkbox md-no-ink aria-label="Checkbox No Ink" [(checked)]="cb5" class="md-primary">
+        <md-checkbox md-no-ink aria-label="Checkbox No Ink" [(ngModel)]="cb5" class="md-primary">
           Checkbox (md-primary): No Ink
         </md-checkbox>
       </div>
diff --git a/modules/site/src/app/examples/checkbox/checkbox-basic-usage.component.spec.ts b/modules/site/src/app/examples/checkbox/checkbox-basic-usage.component.spec.ts
index 49e832d0..e2c30a19 100644
--- a/modules/site/src/app/examples/checkbox/checkbox-basic-usage.component.spec.ts
+++ b/modules/site/src/app/examples/checkbox/checkbox-basic-usage.component.spec.ts
@@ -1,11 +1,4 @@
-import {
-  beforeEach,
-  beforeEachProviders,
-  describe,
-  expect,
-  it,
-  inject,
-} from '@angular/core/testing';
+import {addProviders, inject} from '@angular/core/testing';
 import {ComponentFixture, TestComponentBuilder} from '@angular/compiler/testing';
 import {Component} from '@angular/core';
 import {By} from '@angular/platform-browser';
@@ -14,7 +7,12 @@ import {CheckboxBasicUsageComponent} from './checkbox-basic-usage.component';
 describe('Component: CheckboxBasicUsage', () => {
   let builder: TestComponentBuilder;
 
-  beforeEachProviders(() => [CheckboxBasicUsageComponent]);
+  beforeEach(() => {
+    addProviders([
+      CheckboxBasicUsageComponent,
+    ]);
+  });
+
   beforeEach(
       inject([TestComponentBuilder], function(tcb: TestComponentBuilder) { builder = tcb; }));
 
diff --git a/modules/site/src/app/examples/data-table/data-table-basic-usage.component.spec.ts b/modules/site/src/app/examples/data-table/data-table-basic-usage.component.spec.ts
index cd88aa4e..b0a4a190 100644
--- a/modules/site/src/app/examples/data-table/data-table-basic-usage.component.spec.ts
+++ b/modules/site/src/app/examples/data-table/data-table-basic-usage.component.spec.ts
@@ -1,11 +1,4 @@
-import {
-  beforeEach,
-  beforeEachProviders,
-  describe,
-  expect,
-  it,
-  inject,
-} from '@angular/core/testing';
+import {addProviders, inject} from '@angular/core/testing';
 import {ComponentFixture, TestComponentBuilder} from '@angular/compiler/testing';
 import {Component} from '@angular/core';
 import {By} from '@angular/platform-browser';
@@ -14,7 +7,12 @@ import {DataTableBasicUsageComponent} from './data-table-basic-usage.component';
 describe('Component: DataTableBasicUsage', () => {
   let builder: TestComponentBuilder;
 
-  beforeEachProviders(() => [DataTableBasicUsageComponent]);
+  beforeEach(() => {
+    addProviders([
+      DataTableBasicUsageComponent,
+    ]);
+  });
+
   beforeEach(
       inject([TestComponentBuilder], function(tcb: TestComponentBuilder) { builder = tcb; }));
 
diff --git a/modules/site/src/app/examples/data-table/data-table-selectable-rows.component.spec.ts b/modules/site/src/app/examples/data-table/data-table-selectable-rows.component.spec.ts
index 122585ad..43ad5ccc 100644
--- a/modules/site/src/app/examples/data-table/data-table-selectable-rows.component.spec.ts
+++ b/modules/site/src/app/examples/data-table/data-table-selectable-rows.component.spec.ts
@@ -1,11 +1,4 @@
-import {
-  beforeEach,
-  beforeEachProviders,
-  describe,
-  expect,
-  it,
-  inject,
-} from '@angular/core/testing';
+import {addProviders, inject} from '@angular/core/testing';
 import {ComponentFixture, TestComponentBuilder} from '@angular/compiler/testing';
 import {Component} from '@angular/core';
 import {By} from '@angular/platform-browser';
@@ -14,7 +7,12 @@ import {DataTableSelectableRowsComponent} from './data-table-selectable-rows.com
 describe('Component: DataTableSelectableRows', () => {
   let builder: TestComponentBuilder;
 
-  beforeEachProviders(() => [DataTableSelectableRowsComponent]);
+  beforeEach(() => {
+    addProviders([
+      DataTableSelectableRowsComponent,
+    ]);
+  });
+
   beforeEach(
       inject([TestComponentBuilder], function(tcb: TestComponentBuilder) { builder = tcb; }));
 
diff --git a/modules/site/src/app/examples/dialog/dialog-basic-usage.component.spec.ts b/modules/site/src/app/examples/dialog/dialog-basic-usage.component.spec.ts
index cf05b95c..b6b751dd 100644
--- a/modules/site/src/app/examples/dialog/dialog-basic-usage.component.spec.ts
+++ b/modules/site/src/app/examples/dialog/dialog-basic-usage.component.spec.ts
@@ -1,11 +1,4 @@
-import {
-  beforeEach,
-  beforeEachProviders,
-  describe,
-  expect,
-  it,
-  inject,
-} from '@angular/core/testing';
+import {addProviders, inject} from '@angular/core/testing';
 import {ComponentFixture, TestComponentBuilder} from '@angular/compiler/testing';
 import {Component} from '@angular/core';
 import {By} from '@angular/platform-browser';
@@ -14,7 +7,12 @@ import {DialogBasicUsageComponent} from './dialog-basic-usage.component';
 describe('Component: DialogBasicUsage', () => {
   let builder: TestComponentBuilder;
 
-  beforeEachProviders(() => [DialogBasicUsageComponent]);
+  beforeEach(() => {
+    addProviders([
+      DialogBasicUsageComponent,
+    ]);
+  });
+
   beforeEach(
       inject([TestComponentBuilder], function(tcb: TestComponentBuilder) { builder = tcb; }));
 
diff --git a/modules/site/src/app/examples/elevation/elevation-basic-usage.component.spec.ts b/modules/site/src/app/examples/elevation/elevation-basic-usage.component.spec.ts
index 686be60f..5f48d8b8 100644
--- a/modules/site/src/app/examples/elevation/elevation-basic-usage.component.spec.ts
+++ b/modules/site/src/app/examples/elevation/elevation-basic-usage.component.spec.ts
@@ -1,11 +1,4 @@
-import {
-  beforeEach,
-  beforeEachProviders,
-  describe,
-  expect,
-  it,
-  inject,
-} from '@angular/core/testing';
+import {addProviders, inject} from '@angular/core/testing';
 import {ComponentFixture, TestComponentBuilder} from '@angular/compiler/testing';
 import {Component} from '@angular/core';
 import {By} from '@angular/platform-browser';
@@ -14,7 +7,12 @@ import {ElevationBasicUsageComponent} from './elevation-basic-usage.component';
 describe('Component: ElevationBasicUsage', () => {
   let builder: TestComponentBuilder;
 
-  beforeEachProviders(() => [ElevationBasicUsageComponent]);
+  beforeEach(() => {
+    addProviders([
+      ElevationBasicUsageComponent,
+    ]);
+  });
+
   beforeEach(
       inject([TestComponentBuilder], function(tcb: TestComponentBuilder) { builder = tcb; }));
 
diff --git a/modules/site/src/app/examples/input/input-basic-usage.component.spec.ts b/modules/site/src/app/examples/input/input-basic-usage.component.spec.ts
index 8eb6983d..d55cb396 100644
--- a/modules/site/src/app/examples/input/input-basic-usage.component.spec.ts
+++ b/modules/site/src/app/examples/input/input-basic-usage.component.spec.ts
@@ -1,11 +1,4 @@
-import {
-  beforeEach,
-  beforeEachProviders,
-  describe,
-  expect,
-  it,
-  inject,
-} from '@angular/core/testing';
+import {addProviders, inject} from '@angular/core/testing';
 import {ComponentFixture, TestComponentBuilder} from '@angular/compiler/testing';
 import {Component} from '@angular/core';
 import {By} from '@angular/platform-browser';
@@ -14,7 +7,12 @@ import {InputBasicUsageComponent} from './input-basic-usage.component';
 describe('Component: InputBasicUsage', () => {
   let builder: TestComponentBuilder;
 
-  beforeEachProviders(() => [InputBasicUsageComponent]);
+  beforeEach(() => {
+    addProviders([
+      InputBasicUsageComponent,
+    ]);
+  });
+
   beforeEach(
       inject([TestComponentBuilder], function(tcb: TestComponentBuilder) { builder = tcb; }));
 
diff --git a/modules/site/src/app/examples/input/input-basic-usage.component.ts b/modules/site/src/app/examples/input/input-basic-usage.component.ts
index e146f327..df2af2ef 100644
--- a/modules/site/src/app/examples/input/input-basic-usage.component.ts
+++ b/modules/site/src/app/examples/input/input-basic-usage.component.ts
@@ -1,4 +1,4 @@
-import {FORM_DIRECTIVES} from '@angular/common';
+import {FORM_DIRECTIVES} from '@angular/forms';
 import {Component} from '@angular/core';
 import {MD_INPUT_DIRECTIVES} from '@angular2-material/input';
 import {MdToolbar} from '@angular2-material/toolbar';
diff --git a/modules/site/src/app/examples/list/list-basic-usage.component.spec.ts b/modules/site/src/app/examples/list/list-basic-usage.component.spec.ts
index 3639b4fa..601494f8 100644
--- a/modules/site/src/app/examples/list/list-basic-usage.component.spec.ts
+++ b/modules/site/src/app/examples/list/list-basic-usage.component.spec.ts
@@ -1,11 +1,4 @@
-import {
-  beforeEach,
-  beforeEachProviders,
-  describe,
-  expect,
-  it,
-  inject,
-} from '@angular/core/testing';
+import {addProviders, inject} from '@angular/core/testing';
 import {ComponentFixture, TestComponentBuilder} from '@angular/compiler/testing';
 import {Component} from '@angular/core';
 import {By} from '@angular/platform-browser';
@@ -14,7 +7,12 @@ import {ListBasicUsageComponent} from './list-basic-usage.component';
 describe('Component: ListBasicUsage', () => {
   let builder: TestComponentBuilder;
 
-  beforeEachProviders(() => [ListBasicUsageComponent]);
+  beforeEach(() => {
+    addProviders([
+      ListBasicUsageComponent,
+    ]);
+  });
+
   beforeEach(
       inject([TestComponentBuilder], function(tcb: TestComponentBuilder) { builder = tcb; }));
 
diff --git a/modules/site/src/app/examples/pagination/pagination-basic-usage.component.html b/modules/site/src/app/examples/pagination/pagination-basic-usage.component.html
index df21e532..e2f1df11 100644
--- a/modules/site/src/app/examples/pagination/pagination-basic-usage.component.html
+++ b/modules/site/src/app/examples/pagination/pagination-basic-usage.component.html
@@ -1,4 +1,5 @@
-<md-pagination [model]="pagination" (on-pagination-change)="detectChange($event)" [items-per-page-options]="availableLength"></md-pagination>
+<md-pagination [model]="pagination" name="basic" (on-pagination-change)="detectChange($event)"
+               [items-per-page-options]="availableLength"></md-pagination>
 
 <md-data-table layout-fill>
   <thead>
@@ -15,4 +16,4 @@
   </tbody>
 </md-data-table>
 
-<md-pagination [model]="pagination" (on-pagination-change)="detectChange($event)" [items-per-page-options]="availableLength"></md-pagination>
+<md-pagination [model]="pagination" name="basic" (on-pagination-change)="detectChange($event)" [items-per-page-options]="availableLength"></md-pagination>
diff --git a/modules/site/src/app/examples/pagination/pagination-basic-usage.component.spec.ts b/modules/site/src/app/examples/pagination/pagination-basic-usage.component.spec.ts
index 96df5dc9..b1ee1c39 100644
--- a/modules/site/src/app/examples/pagination/pagination-basic-usage.component.spec.ts
+++ b/modules/site/src/app/examples/pagination/pagination-basic-usage.component.spec.ts
@@ -1,11 +1,4 @@
-import {
-  beforeEach,
-  beforeEachProviders,
-  describe,
-  expect,
-  it,
-  inject,
-} from '@angular/core/testing';
+import {addProviders, inject} from '@angular/core/testing';
 import { ComponentFixture, TestComponentBuilder } from '@angular/compiler/testing';
 import { Component } from '@angular/core';
 import { By } from '@angular/platform-browser';
@@ -14,7 +7,12 @@ import { PaginationBasicUsageComponent } from './pagination-basic-usage.componen
 describe('Component: PaginationBasicUsage', () => {
   let builder: TestComponentBuilder;
 
-  beforeEachProviders(() => [PaginationBasicUsageComponent]);
+  beforeEach(() => {
+    addProviders([
+      PaginationBasicUsageComponent,
+    ]);
+  });
+
   beforeEach(inject([TestComponentBuilder], function (tcb: TestComponentBuilder) {
     builder = tcb;
   }));
diff --git a/modules/site/src/app/examples/pagination/pagination-split-usage.component.html b/modules/site/src/app/examples/pagination/pagination-split-usage.component.html
index 6efc80cb..1f60eb15 100644
--- a/modules/site/src/app/examples/pagination/pagination-split-usage.component.html
+++ b/modules/site/src/app/examples/pagination/pagination-split-usage.component.html
@@ -19,8 +19,8 @@
     <md-pagination-range
       [model]="pagination"
       [name]="bookPagination"
-      [range-format]="rangeFormat"
       layout="row"
+      [range-format]="rangeFormat"
       layout-wrap layout-align="center start"></md-pagination-range>
   </md-pagination>
 
diff --git a/modules/site/src/app/examples/pagination/pagination-split-usage.component.spec.ts b/modules/site/src/app/examples/pagination/pagination-split-usage.component.spec.ts
index 57017f07..81e9851e 100644
--- a/modules/site/src/app/examples/pagination/pagination-split-usage.component.spec.ts
+++ b/modules/site/src/app/examples/pagination/pagination-split-usage.component.spec.ts
@@ -1,11 +1,4 @@
-import {
-  beforeEach,
-  beforeEachProviders,
-  describe,
-  expect,
-  it,
-  inject,
-} from '@angular/core/testing';
+import {addProviders, inject} from '@angular/core/testing';
 import { ComponentFixture, TestComponentBuilder } from '@angular/compiler/testing';
 import { Component } from '@angular/core';
 import { By } from '@angular/platform-browser';
@@ -14,7 +7,12 @@ import { PaginationSplitUsageComponent } from './pagination-split-usage.componen
 describe('Component: PaginationSplitUsage', () => {
   let builder: TestComponentBuilder;
 
-  beforeEachProviders(() => [PaginationSplitUsageComponent]);
+  beforeEach(() => {
+    addProviders([
+      PaginationSplitUsageComponent,
+    ]);
+  });
+
   beforeEach(inject([TestComponentBuilder], function (tcb: TestComponentBuilder) {
     builder = tcb;
   }));
diff --git a/modules/site/src/app/examples/progress-bar/progress-bar-basic-usage.component.spec.ts b/modules/site/src/app/examples/progress-bar/progress-bar-basic-usage.component.spec.ts
index 65132521..f6010f29 100644
--- a/modules/site/src/app/examples/progress-bar/progress-bar-basic-usage.component.spec.ts
+++ b/modules/site/src/app/examples/progress-bar/progress-bar-basic-usage.component.spec.ts
@@ -1,11 +1,4 @@
-import {
-  beforeEach,
-  beforeEachProviders,
-  describe,
-  expect,
-  it,
-  inject,
-} from '@angular/core/testing';
+import {addProviders, inject} from '@angular/core/testing';
 import {ComponentFixture, TestComponentBuilder} from '@angular/compiler/testing';
 import {Component} from '@angular/core';
 import {By} from '@angular/platform-browser';
@@ -14,7 +7,12 @@ import {ProgressBarBasicUsageComponent} from './progress-bar-basic-usage.compone
 describe('Component: ProgressBarBasicUsage', () => {
   let builder: TestComponentBuilder;
 
-  beforeEachProviders(() => [ProgressBarBasicUsageComponent]);
+  beforeEach(() => {
+    addProviders([
+      ProgressBarBasicUsageComponent,
+    ]);
+  });
+
   beforeEach(
       inject([TestComponentBuilder], function(tcb: TestComponentBuilder) { builder = tcb; }));
 
diff --git a/modules/site/src/app/examples/progress-circle/progress-circle-basic-usage.component.spec.ts b/modules/site/src/app/examples/progress-circle/progress-circle-basic-usage.component.spec.ts
index bad7b980..f433f523 100644
--- a/modules/site/src/app/examples/progress-circle/progress-circle-basic-usage.component.spec.ts
+++ b/modules/site/src/app/examples/progress-circle/progress-circle-basic-usage.component.spec.ts
@@ -1,11 +1,4 @@
-import {
-  beforeEach,
-  beforeEachProviders,
-  describe,
-  expect,
-  it,
-  inject,
-} from '@angular/core/testing';
+import {addProviders, inject} from '@angular/core/testing';
 import {ComponentFixture, TestComponentBuilder} from '@angular/compiler/testing';
 import {Component} from '@angular/core';
 import {By} from '@angular/platform-browser';
@@ -14,7 +7,12 @@ import {ProgressCircleBasicUsageComponent} from './progress-circle-basic-usage.c
 describe('Component: ProgressCircleBasicUsage', () => {
   let builder: TestComponentBuilder;
 
-  beforeEachProviders(() => [ProgressCircleBasicUsageComponent]);
+  beforeEach(() => {
+    addProviders([
+      ProgressCircleBasicUsageComponent,
+    ]);
+  });
+
   beforeEach(
       inject([TestComponentBuilder], function(tcb: TestComponentBuilder) { builder = tcb; }));
 
diff --git a/modules/site/src/app/examples/radio/radio-basic-usage.component.html b/modules/site/src/app/examples/radio/radio-basic-usage.component.html
index 05964f4d..8dfcb5d2 100644
--- a/modules/site/src/app/examples/radio/radio-basic-usage.component.html
+++ b/modules/site/src/app/examples/radio/radio-basic-usage.component.html
@@ -1,7 +1,7 @@
-<form ng-submit="submit()">
-  <p>Selected Value: <span class="radioValue">{{ data.group1 }}</span></p>
+<form (ngSubmit)="submit()">
+  <p>Selected Value: <span class="radioValue">{{ data.default }}</span></p>
 
-  <md-radio-group [(value)]="data.group1">
+  <md-radio-group [(ngModel)]="data.default" [ngModelOptions]="{standalone: true}">
     <md-radio-button value="Apple" class="md-primary">Apple</md-radio-button>
     <md-radio-button value="Banana" checked="true"> Banana</md-radio-button>
     <md-radio-button value="Mango" class="md-warn">Mango</md-radio-button>
@@ -11,9 +11,9 @@
 
   <p>Graphic radio buttons need to be labeled with the <code>aria-label</code> attribute.
   </p>
-  <p>Selected Avatar: <span class="radioValue">{{ data.group3 }}</span></p>
+  <p>Selected Avatar: <span class="radioValue">{{ data.avatar }}</span></p>
 
-  <md-radio-group #group [(value)]="data.group3">
+  <md-radio-group #group [(ngModel)]="data.avatar" [ngModelOptions]="{standalone: true}">
     <md-radio-button *ngFor="let it of avatarData"
                      [checked]="group.value==it.value"
                      [value]="it.value"
diff --git a/modules/site/src/app/examples/radio/radio-basic-usage.component.spec.ts b/modules/site/src/app/examples/radio/radio-basic-usage.component.spec.ts
index d50b5443..86dd42a2 100644
--- a/modules/site/src/app/examples/radio/radio-basic-usage.component.spec.ts
+++ b/modules/site/src/app/examples/radio/radio-basic-usage.component.spec.ts
@@ -1,11 +1,4 @@
-import {
-  beforeEach,
-  beforeEachProviders,
-  describe,
-  expect,
-  it,
-  inject,
-} from '@angular/core/testing';
+import {addProviders, inject} from '@angular/core/testing';
 import {ComponentFixture, TestComponentBuilder} from '@angular/compiler/testing';
 import {Component} from '@angular/core';
 import {By} from '@angular/platform-browser';
@@ -14,7 +7,12 @@ import {RadioBasicUsageComponent} from './radio-basic-usage.component';
 describe('Component: RadioBasicUsage', () => {
   let builder: TestComponentBuilder;
 
-  beforeEachProviders(() => [RadioBasicUsageComponent]);
+  beforeEach(() => {
+    addProviders([
+      RadioBasicUsageComponent,
+    ]);
+  });
+
   beforeEach(
       inject([TestComponentBuilder], function(tcb: TestComponentBuilder) { builder = tcb; }));
 
diff --git a/modules/site/src/app/examples/radio/radio-basic-usage.component.ts b/modules/site/src/app/examples/radio/radio-basic-usage.component.ts
index f4dc740b..0d26fe12 100644
--- a/modules/site/src/app/examples/radio/radio-basic-usage.component.ts
+++ b/modules/site/src/app/examples/radio/radio-basic-usage.component.ts
@@ -1,16 +1,17 @@
 import {Component} from '@angular/core';
-import {MdRadioButton, MdRadioGroup, MdRadioDispatcher} from '@angular2-material/radio';
+import {MdUniqueSelectionDispatcher} from '@angular2-material/core';
+import {MD_RADIO_DIRECTIVES} from '@angular2-material/radio';
 
 @Component({
   moduleId: module.id,
   selector: 'radio-basic-usage',
   templateUrl: 'radio-basic-usage.component.html',
   styleUrls: ['radio-basic-usage.component.css'],
-  directives: [MdRadioButton, MdRadioGroup],
-  providers: [MdRadioDispatcher]
+  directives: [MD_RADIO_DIRECTIVES],
+  providers: [MdUniqueSelectionDispatcher]
 })
 export class RadioBasicUsageComponent {
-  data: any = {group1: 'Banana', group2: '2', group3: 'avatar-1'};
+  data: any = {default: 'Banana', avatar: 'avatar-1'};
 
   avatarData: any[] = [
     {id: 'images/avatars/avatar1.svg', title: 'avatar 1', value: 'avatar-1'},
diff --git a/modules/site/src/app/examples/sidenav/sidenav-basic-usage.component.spec.ts b/modules/site/src/app/examples/sidenav/sidenav-basic-usage.component.spec.ts
index 85c0efdc..bbf7eb57 100644
--- a/modules/site/src/app/examples/sidenav/sidenav-basic-usage.component.spec.ts
+++ b/modules/site/src/app/examples/sidenav/sidenav-basic-usage.component.spec.ts
@@ -1,11 +1,4 @@
-import {
-  beforeEach,
-  beforeEachProviders,
-  describe,
-  expect,
-  it,
-  inject,
-} from '@angular/core/testing';
+import {addProviders, inject} from '@angular/core/testing';
 import {ComponentFixture, TestComponentBuilder} from '@angular/compiler/testing';
 import {Component} from '@angular/core';
 import {By} from '@angular/platform-browser';
@@ -14,7 +7,12 @@ import {SidenavBasicUsageComponent} from './sidenav-basic-usage.component';
 describe('Component: SidenavBasicUsage', () => {
   let builder: TestComponentBuilder;
 
-  beforeEachProviders(() => [SidenavBasicUsageComponent]);
+  beforeEach(() => {
+    addProviders([
+      SidenavBasicUsageComponent,
+    ]);
+  });
+
   beforeEach(
       inject([TestComponentBuilder], function(tcb: TestComponentBuilder) { builder = tcb; }));
 
diff --git a/modules/site/src/app/examples/switch/switch-basic-usage.component.spec.ts b/modules/site/src/app/examples/switch/switch-basic-usage.component.spec.ts
index ddc610c2..77c6dee0 100644
--- a/modules/site/src/app/examples/switch/switch-basic-usage.component.spec.ts
+++ b/modules/site/src/app/examples/switch/switch-basic-usage.component.spec.ts
@@ -1,11 +1,4 @@
-import {
-  beforeEach,
-  beforeEachProviders,
-  describe,
-  expect,
-  it,
-  inject,
-} from '@angular/core/testing';
+import {addProviders, inject} from '@angular/core/testing';
 import {ComponentFixture, TestComponentBuilder} from '@angular/compiler/testing';
 import {Component} from '@angular/core';
 import {By} from '@angular/platform-browser';
@@ -14,7 +7,12 @@ import {SwitchBasicUsageComponent} from './switch-basic-usage.component';
 describe('Component: SwitchBasicUsage', () => {
   let builder: TestComponentBuilder;
 
-  beforeEachProviders(() => [SwitchBasicUsageComponent]);
+  beforeEach(() => {
+    addProviders([
+      SwitchBasicUsageComponent,
+    ]);
+  });
+
   beforeEach(
       inject([TestComponentBuilder], function(tcb: TestComponentBuilder) { builder = tcb; }));
 
diff --git a/modules/site/src/app/examples/tabs/tabs-dynamic-height.component.spec.ts b/modules/site/src/app/examples/tabs/tabs-dynamic-height.component.spec.ts
index 9127c13a..a8203db9 100644
--- a/modules/site/src/app/examples/tabs/tabs-dynamic-height.component.spec.ts
+++ b/modules/site/src/app/examples/tabs/tabs-dynamic-height.component.spec.ts
@@ -1,11 +1,4 @@
-import {
-  beforeEach,
-  beforeEachProviders,
-  describe,
-  expect,
-  it,
-  inject,
-} from '@angular/core/testing';
+import {addProviders, inject} from '@angular/core/testing';
 import {ComponentFixture, TestComponentBuilder} from '@angular/compiler/testing';
 import {Component} from '@angular/core';
 import {By} from '@angular/platform-browser';
@@ -14,7 +7,12 @@ import {TabsDynamicHeightComponent} from './tabs-dynamic-height.component';
 describe('Component: TabsDynamicHeight', () => {
   let builder: TestComponentBuilder;
 
-  beforeEachProviders(() => [TabsDynamicHeightComponent]);
+  beforeEach(() => {
+    addProviders([
+      TabsDynamicHeightComponent,
+    ]);
+  });
+
   beforeEach(
       inject([TestComponentBuilder], function(tcb: TestComponentBuilder) { builder = tcb; }));
 
diff --git a/modules/site/src/app/examples/tabs/tabs-dynamic-tabs.component.spec.ts b/modules/site/src/app/examples/tabs/tabs-dynamic-tabs.component.spec.ts
index 4d68cb72..b6b68bec 100644
--- a/modules/site/src/app/examples/tabs/tabs-dynamic-tabs.component.spec.ts
+++ b/modules/site/src/app/examples/tabs/tabs-dynamic-tabs.component.spec.ts
@@ -1,11 +1,4 @@
-import {
-  beforeEach,
-  beforeEachProviders,
-  describe,
-  expect,
-  it,
-  inject,
-} from '@angular/core/testing';
+import {addProviders, inject} from '@angular/core/testing';
 import {ComponentFixture, TestComponentBuilder} from '@angular/compiler/testing';
 import {Component} from '@angular/core';
 import {By} from '@angular/platform-browser';
@@ -14,7 +7,12 @@ import {TabsDynamicTabsComponent} from './tabs-dynamic-tabs.component';
 describe('Component: TabsDynamicTabs', () => {
   let builder: TestComponentBuilder;
 
-  beforeEachProviders(() => [TabsDynamicTabsComponent]);
+  beforeEach(() => {
+    addProviders([
+      TabsDynamicTabsComponent,
+    ]);
+  });
+
   beforeEach(
       inject([TestComponentBuilder], function(tcb: TestComponentBuilder) { builder = tcb; }));
 
diff --git a/modules/site/src/app/examples/toolbar/toolbar-basic-usage.component.spec.ts b/modules/site/src/app/examples/toolbar/toolbar-basic-usage.component.spec.ts
index b65b505c..9ab03f3d 100644
--- a/modules/site/src/app/examples/toolbar/toolbar-basic-usage.component.spec.ts
+++ b/modules/site/src/app/examples/toolbar/toolbar-basic-usage.component.spec.ts
@@ -1,11 +1,4 @@
-import {
-  beforeEach,
-  beforeEachProviders,
-  describe,
-  expect,
-  it,
-  inject,
-} from '@angular/core/testing';
+import {addProviders, inject} from '@angular/core/testing';
 import {ComponentFixture, TestComponentBuilder} from '@angular/compiler/testing';
 import {Component} from '@angular/core';
 import {By} from '@angular/platform-browser';
@@ -14,7 +7,12 @@ import {ToolbarBasicUsageComponent} from './toolbar-basic-usage.component';
 describe('Component: ToolbarBasicUsage', () => {
   let builder: TestComponentBuilder;
 
-  beforeEachProviders(() => [ToolbarBasicUsageComponent]);
+  beforeEach(() => {
+    addProviders([
+      ToolbarBasicUsageComponent,
+    ]);
+  });
+
   beforeEach(
       inject([TestComponentBuilder], function(tcb: TestComponentBuilder) { builder = tcb; }));
 
diff --git a/modules/site/src/app/index.ts b/modules/site/src/app/index.ts
index c3c270b0..be5b84f7 100644
--- a/modules/site/src/app/index.ts
+++ b/modules/site/src/app/index.ts
@@ -24,7 +24,7 @@ import {ToolbarBasicUsageComponent} from './examples/toolbar/toolbar-basic-usage
 import {ComponentsService, NavigationService, VersionService} from './shared';
 
 export {environment} from './environment';
-export {SiteAppComponent} from './site.component';
+export {SiteAppComponent, AppRouterProviders} from './site.component';
 
 
 /**
diff --git a/modules/site/src/app/shared/example/example.component.spec.ts b/modules/site/src/app/shared/example/example.component.spec.ts
index 4182b5cf..ce5f4d89 100644
--- a/modules/site/src/app/shared/example/example.component.spec.ts
+++ b/modules/site/src/app/shared/example/example.component.spec.ts
@@ -1,11 +1,4 @@
-import {
-  beforeEach,
-  beforeEachProviders,
-  describe,
-  expect,
-  it,
-  inject,
-} from '@angular/core/testing';
+import {addProviders, inject} from '@angular/core/testing';
 import {ComponentFixture, TestComponentBuilder} from '@angular/compiler/testing';
 import {Component} from '@angular/core';
 import {By} from '@angular/platform-browser';
@@ -14,7 +7,12 @@ import {ExampleComponent} from './example.component';
 describe('Component: Example', () => {
   let builder: TestComponentBuilder;
 
-  beforeEachProviders(() => [ExampleComponent]);
+  beforeEach(() => {
+    addProviders([
+      ExampleComponent,
+    ]);
+  });
+
   beforeEach(
       inject([TestComponentBuilder], function(tcb: TestComponentBuilder) { builder = tcb; }));
 
diff --git a/modules/site/src/app/shared/footer/footer.component.spec.ts b/modules/site/src/app/shared/footer/footer.component.spec.ts
index e83d381c..0cb22aaf 100644
--- a/modules/site/src/app/shared/footer/footer.component.spec.ts
+++ b/modules/site/src/app/shared/footer/footer.component.spec.ts
@@ -1,11 +1,4 @@
-import {
-  beforeEach,
-  beforeEachProviders,
-  describe,
-  expect,
-  it,
-  inject,
-} from '@angular/core/testing';
+import {addProviders, inject} from '@angular/core/testing';
 import {ComponentFixture, TestComponentBuilder} from '@angular/compiler/testing';
 import {Component} from '@angular/core';
 import {By} from '@angular/platform-browser';
@@ -14,7 +7,12 @@ import {FooterComponent} from './footer.component';
 describe('Component: Footer', () => {
   let builder: TestComponentBuilder;
 
-  beforeEachProviders(() => [FooterComponent]);
+  beforeEach(() => {
+    addProviders([
+      FooterComponent,
+    ]);
+  });
+
   beforeEach(
       inject([TestComponentBuilder], function(tcb: TestComponentBuilder) { builder = tcb; }));
 
diff --git a/modules/site/src/app/shared/highlight/highlight-container.component.spec.ts b/modules/site/src/app/shared/highlight/highlight-container.component.spec.ts
index d5989aca..a6531e07 100644
--- a/modules/site/src/app/shared/highlight/highlight-container.component.spec.ts
+++ b/modules/site/src/app/shared/highlight/highlight-container.component.spec.ts
@@ -1,11 +1,4 @@
-import {
-  beforeEach,
-  beforeEachProviders,
-  describe,
-  expect,
-  it,
-  inject,
-} from '@angular/core/testing';
+import {addProviders, inject} from '@angular/core/testing';
 import {ComponentFixture, TestComponentBuilder} from '@angular/compiler/testing';
 import {Component} from '@angular/core';
 import {By} from '@angular/platform-browser';
@@ -14,7 +7,12 @@ import {HighlightContainerComponent} from './highlight-container.component.ts';
 describe('Component: HighlightContainer', () => {
   let builder: TestComponentBuilder;
 
-  beforeEachProviders(() => [HighlightContainerComponent]);
+  beforeEach(() => {
+    addProviders([
+      HighlightContainerComponent,
+    ]);
+  });
+
   beforeEach(
       inject([TestComponentBuilder], function(tcb: TestComponentBuilder) { builder = tcb; }));
 
diff --git a/modules/site/src/app/shared/highlight/highlight-container.component.ts b/modules/site/src/app/shared/highlight/highlight-container.component.ts
index 90506172..ef2af6cc 100644
--- a/modules/site/src/app/shared/highlight/highlight-container.component.ts
+++ b/modules/site/src/app/shared/highlight/highlight-container.component.ts
@@ -1,4 +1,4 @@
-import {ElementRef, Component, AfterViewInit, Input} from '@angular/core';
+import {ElementRef, Component, Input} from '@angular/core';
 import {HighlightComponent} from './highlight.component';
 
 @Component({
@@ -7,13 +7,26 @@ import {HighlightComponent} from './highlight.component';
   template: `<ng-content></ng-content>`,
   styleUrls: ['highlight-container.component.css']
 })
-export class HighlightContainerComponent implements AfterViewInit {
+export class HighlightContainerComponent {
   @Input() selector: string = '';
 
+  @Input()
+  set content(value: string) {
+    this._content = value;
+    this.update();
+  }
+
+  get content(): string {
+    return this._content;
+  }
+
+  private _content: string = '';
+
   constructor(private elementRef: ElementRef) {}
 
-  ngAfterViewInit() {
+  update() {
     // Find children and highlight them in place
+    this.elementRef.nativeElement.innerHTML = this._content;
     if (this.selector !== '' && this.elementRef) {
       const blocks = this.elementRef.nativeElement.querySelectorAll(this.selector);
       for (var i = 0; i < blocks.length; i++) {
diff --git a/modules/site/src/app/shared/highlight/highlight.component.spec.ts b/modules/site/src/app/shared/highlight/highlight.component.spec.ts
index f14de464..67ea7da4 100644
--- a/modules/site/src/app/shared/highlight/highlight.component.spec.ts
+++ b/modules/site/src/app/shared/highlight/highlight.component.spec.ts
@@ -1,36 +1,37 @@
-import {
-  beforeEach,
-  beforeEachProviders,
-  describe,
-  expect,
-  it,
-  inject,
-} from '@angular/core/testing';
+import {addProviders, inject} from '@angular/core/testing';
 import {ComponentFixture, TestComponentBuilder} from '@angular/compiler/testing';
 import {Component} from '@angular/core';
 import {By} from '@angular/platform-browser';
 import {HighlightComponent} from './highlight.component';
 
 describe('Component: Highlight', () => {
-  let builder: TestComponentBuilder;
+  let builder:TestComponentBuilder;
+
+  beforeEach(() => {
+    addProviders([
+      HighlightComponent,
+    ]);
+  });
 
-  beforeEachProviders(() => [HighlightComponent]);
   beforeEach(
-      inject([TestComponentBuilder], function(tcb: TestComponentBuilder) { builder = tcb; }));
+    inject([TestComponentBuilder], function (tcb:TestComponentBuilder) {
+      builder = tcb;
+    })
+  );
 
   it('should inject the component',
-     inject([HighlightComponent], (component: HighlightComponent) => {
-       expect(component).toBeTruthy();
-     }));
+    inject([HighlightComponent], (component:HighlightComponent) => {
+      expect(component).toBeTruthy();
+    }));
 
   it('should create the component', inject([], () => {
-       return builder.createAsync(HighlightComponentTestController)
-           .then((fixture: ComponentFixture<any>) => {
-             let query = fixture.debugElement.query(By.directive(HighlightComponent));
-             expect(query).toBeTruthy();
-             expect(query.componentInstance).toBeTruthy();
-           });
-     }));
+    return builder.createAsync(HighlightComponentTestController)
+      .then((fixture:ComponentFixture<any>) => {
+        let query = fixture.debugElement.query(By.directive(HighlightComponent));
+        expect(query).toBeTruthy();
+        expect(query.componentInstance).toBeTruthy();
+      });
+  }));
 });
 
 @Component({
diff --git a/modules/site/src/app/site.component.spec.ts b/modules/site/src/app/site.component.spec.ts
index c2fdbbbf..eff53cdf 100644
--- a/modules/site/src/app/site.component.spec.ts
+++ b/modules/site/src/app/site.component.spec.ts
@@ -1,7 +1,11 @@
-import {beforeEachProviders, describe, expect, it, inject} from '@angular/core/testing';
+import {addProviders, inject} from '@angular/core/testing';
 import {SiteAppComponent} from '../app/site.component';
 
-beforeEachProviders(() => [SiteAppComponent]);
+beforeEach(() => {
+  addProviders([
+    SiteAppComponent,
+  ]);
+});
 
 describe('App: Site', () => {
   it('should create the app',
diff --git a/modules/site/src/app/site.component.ts b/modules/site/src/app/site.component.ts
index a4613276..b850e3dc 100644
--- a/modules/site/src/app/site.component.ts
+++ b/modules/site/src/app/site.component.ts
@@ -1,18 +1,25 @@
-import {Component, OnInit, OnDestroy, Input, ViewChild, AfterViewInit} from '@angular/core';
-import {Response, Http} from '@angular/http';
-import {Routes, ROUTER_DIRECTIVES} from '@angular/router';
-import {Router} from '@angular/router';
-import {MD_SIDENAV_DIRECTIVES, MdSidenav} from '@angular2-material/sidenav';
-import {MdToolbar} from '@angular2-material/toolbar';
-import {MATERIAL_DIRECTIVES, Media} from 'ng2-material';
-import {MdIcon} from 'ng2-material';
-
-import {ComponentsComponent} from './+components';
-import {IndexComponent} from './+index';
-import {ComponentsService, IComponentMeta} from './shared/components.service';
-import {FooterComponent} from './shared/footer/footer.component';
-import {NavigationService} from './shared/navigation.service';
-import {ComponentsOrderByPipe} from './site.pipe';
+import { Component, OnInit, OnDestroy, Input, ViewChild, AfterViewInit } from '@angular/core';
+import { Response, Http } from '@angular/http';
+import { ROUTER_DIRECTIVES, provideRouter, Router, RouterConfig } from '@angular/router';
+import { MD_SIDENAV_DIRECTIVES, MdSidenav } from '@angular2-material/sidenav';
+import { MdToolbar } from '@angular2-material/toolbar';
+import { MATERIAL_DIRECTIVES, Media, MdIcon } from 'ng2-material';
+import { ComponentsComponent } from './+components';
+import { IndexComponent } from './+index';
+import { ComponentsService, IComponentMeta } from './shared/components.service';
+import { FooterComponent } from './shared/footer/footer.component';
+import { NavigationService } from './shared/navigation.service';
+import { ComponentsOrderByPipe } from './site.pipe';
+
+export const routes: RouterConfig = [
+  {path: '', component: IndexComponent},
+  {path: 'components/:id', component: ComponentsComponent}
+];
+
+export const AppRouterProviders = [
+  provideRouter(routes)
+];
+
 
 @Component({
   moduleId: module.id,
@@ -25,10 +32,6 @@ import {ComponentsOrderByPipe} from './site.pipe';
     FooterComponent
   ]
 })
-@Routes([
-  {path: '/', component: IndexComponent},
-  {path: '/components/:id', component: ComponentsComponent}
-])
 export class SiteAppComponent implements OnInit,
     OnDestroy, AfterViewInit {
   static SIDE_MENU_BREAKPOINT: string = 'gt-md';
@@ -49,8 +52,11 @@ export class SiteAppComponent implements OnInit,
   private _subscription = null;
 
   constructor(
-      private http: Http, private navigation: NavigationService, private media: Media,
-      private router: Router, private _components: ComponentsService) {}
+      private http: Http,
+      private router: Router,
+      private navigation: NavigationService,
+      private media: Media,
+      private _components: ComponentsService) {}
 
   ngAfterViewInit(): any {
     let query = Media.getQuery(SiteAppComponent.SIDE_MENU_BREAKPOINT);
diff --git a/modules/site/src/main.ts b/modules/site/src/main.ts
index 3274be9e..1dacad54 100644
--- a/modules/site/src/main.ts
+++ b/modules/site/src/main.ts
@@ -1,18 +1,18 @@
-import {LocationStrategy, HashLocationStrategy} from '@angular/common';
-import {provide, enableProdMode} from '@angular/core';
-import {HTTP_PROVIDERS} from '@angular/http';
-import {bootstrap} from '@angular/platform-browser-dynamic';
-import {ROUTER_PROVIDERS} from '@angular/router';
-import {MATERIAL_BROWSER_PROVIDERS} from 'ng2-material';
-
-import {SiteAppComponent, environment, DEMO_PROVIDERS} from './app/index';
-
+import {LocationStrategy, HashLocationStrategy} from "@angular/common";
+import {provideForms, disableDeprecatedForms} from "@angular/forms";
+import {enableProdMode} from "@angular/core";
+import {HTTP_PROVIDERS} from "@angular/http";
+import {bootstrap} from "@angular/platform-browser-dynamic";
+import {MATERIAL_BROWSER_PROVIDERS} from "ng2-material";
+import {SiteAppComponent, AppRouterProviders, environment, DEMO_PROVIDERS} from "./app/index";
 
 enableProdMode();
 if (environment.production) {
 }
 
 bootstrap(SiteAppComponent, [
-  ...ROUTER_PROVIDERS, ...DEMO_PROVIDERS, ...HTTP_PROVIDERS, ...MATERIAL_BROWSER_PROVIDERS,
-  provide(LocationStrategy, {useClass: HashLocationStrategy})
+  ...AppRouterProviders, ...DEMO_PROVIDERS, ...HTTP_PROVIDERS, ...MATERIAL_BROWSER_PROVIDERS,
+  {provide: LocationStrategy, useClass: HashLocationStrategy},
+  disableDeprecatedForms(),
+  provideForms()
 ]);
diff --git a/modules/site/src/system-config.ts b/modules/site/src/system-config.ts
index 8af5ea23..4682be1f 100644
--- a/modules/site/src/system-config.ts
+++ b/modules/site/src/system-config.ts
@@ -13,7 +13,7 @@ const packages: any = {};
  **********************************************************************************************/
 const barrels: string[] = [
   // Angular specific barrels.
-  '@angular/core', '@angular/common', '@angular/compiler', '@angular/http', '@angular/router',
+  '@angular/core', '@angular/common', '@angular/forms', '@angular/compiler', '@angular/http', '@angular/router',
   '@angular/platform-browser', '@angular/platform-browser-dynamic',
 
   // Thirdparty barrels.
diff --git a/modules/webpack/package.json b/modules/webpack/package.json
index eb61051d..9d2cff88 100644
--- a/modules/webpack/package.json
+++ b/modules/webpack/package.json
@@ -8,24 +8,24 @@
     "postinstall": "$(npm bin)/typings install"
   },
   "dependencies": {
-    "@angular/common": "2.0.0-rc.1",
-    "@angular/core": "2.0.0-rc.1",
-    "@angular/compiler": "2.0.0-rc.1",
-    "@angular/platform-browser": "2.0.0-rc.1",
-    "@angular/platform-browser-dynamic": "2.0.0-rc.1",
-    "@angular2-material/core": "^2.0.0-alpha.4",
-    "@angular2-material/toolbar": "^2.0.0-alpha.4",
+    "@angular/common": "2.0.0-rc.4",
+    "@angular/core": "2.0.0-rc.4",
+    "@angular/compiler": "2.0.0-rc.4",
+    "@angular/platform-browser": "2.0.0-rc.4",
+    "@angular/platform-browser-dynamic": "2.0.0-rc.4",
+    "@angular2-material/core": "2.0.0-alpha.6-2",
+    "@angular2-material/toolbar": "2.0.0-alpha.6-2",
     "es6-shim": "^0.35.0",
     "ng2-material": "*",
-    "reflect-metadata": "0.1.2",
+    "reflect-metadata": "^0.1.3",
     "rxjs": "5.0.0-beta.6",
-    "zone.js": "0.6.12"
+    "zone.js": "^0.6.12"
   },
   "devDependencies": {
     "copy-webpack-plugin": "^3.0.0",
-    "css-loader": "^0.23.0",
+    "css-loader": "0.23.1",
     "extract-text-webpack-plugin": "^1.0.1",
-    "file-loader": "^0.8.4",
+    "file-loader": "0.8.5",
     "html-loader": "^0.4.0",
     "html-webpack-plugin": "^2.17.0",
     "json-loader": "^0.5.3",
diff --git a/package.json b/package.json
index 21bb908e..2ea9060f 100644
--- a/package.json
+++ b/package.json
@@ -17,17 +17,19 @@
     "postinstall": "./node_modules/.bin/typings install"
   },
   "dependencies": {
-    "@angular/common": "2.0.0-rc.1",
-    "@angular/compiler": "2.0.0-rc.1",
-    "@angular/core": "2.0.0-rc.1",
-    "@angular/platform-browser": "2.0.0-rc.1",
-    "@angular/platform-browser-dynamic": "2.0.0-rc.1",
-    "@angular/router": "2.0.0-rc.1",
-    "@angular2-material/checkbox": "2.0.0-alpha.5-2",
-    "@angular2-material/core": "2.0.0-alpha.5-2",
+    "@angular/common": "2.0.0-rc.4",
+    "@angular/compiler": "2.0.0-rc.4",
+    "@angular/core": "2.0.0-rc.4",
+    "@angular/forms": "^0.2.0",
+    "@angular/platform-browser": "2.0.0-rc.4",
+    "@angular/platform-browser-dynamic": "2.0.0-rc.4",
+    "@angular/router": "3.0.0-alpha.8",
+    "@angular2-material/checkbox": "2.0.0-alpha.6-2",
+    "@angular2-material/core": "2.0.0-alpha.6-2",
     "es6-promise": ">=3.0.2",
-    "reflect-metadata": "^0.1.3",
     "es6-shim": "^0.35.0",
+    "grunt-sass": "^1.2.0",
+    "reflect-metadata": "^0.1.3",
     "rxjs": "5.0.0-beta.6",
     "zone.js": "^0.6.12"
   },
@@ -35,6 +37,7 @@
   "devDependencies": {
     "autoprefixer": "6.2.0",
     "codelyzer": "0.0.19",
+    "core-js": "^2.4.0",
     "coveralls": "2.11.6",
     "css": "^2.2.1",
     "css-loader": "0.23.1",
@@ -70,7 +73,7 @@
     "npm": "^3.9.2",
     "remap-istanbul": "0.4.0",
     "style-loader": "0.13.0",
-    "systemjs": "0.19.26",
+    "systemjs": "0.19.27",
     "typescript": ">=1.8.9",
     "typings": "^1.0.4",
     "underscore": "1.8.3"
@@ -98,6 +101,7 @@
     "Sam Jones <ollwen.jones@gmail.com>",
     "Sam Van Brussel <sam.vanbrussel@linqed.be>",
     "Alexander Zeiher <alexander@zeiher.se>",
-    "Ferdinand Torggler <ferdinand.torggler@gmail.com>"
+    "Ferdinand Torggler <ferdinand.torggler@gmail.com>",
+    "Vincent Palita <vincent.palita@biznet.io>"
   ]
 }
diff --git a/src/components/backdrop/backdrop_spec.ts b/src/components/backdrop/backdrop_spec.ts
index 957d119b..248e4f89 100644
--- a/src/components/backdrop/backdrop_spec.ts
+++ b/src/components/backdrop/backdrop_spec.ts
@@ -1,12 +1,5 @@
-import {
-  beforeEach,
-  describe,
-  expect,
-  inject,
-  it,
-  async
-} from "@angular/core/testing";
-import {ComponentFixture, TestComponentBuilder} from "@angular/compiler/testing";
+import {inject, async} from "@angular/core/testing";
+import {ComponentFixture, TestComponentBuilder} from "@angular/core/testing";
 import {Component, DebugElement} from "@angular/core";
 import {MdBackdrop} from "../../index";
 import {By} from "@angular/platform-browser";
@@ -49,7 +42,8 @@ export function main() {
             return backdrop.show();
           }
         })
-        .then(() => result);
+        .then(() => result)
+        .catch(error => console.error.bind(console));
     }
 
     beforeEach(inject([TestComponentBuilder], (tcb) => {
@@ -59,14 +53,17 @@ export function main() {
     describe('md-backdrop', () => {
 
       describe('transitionClass', () => {
-        it('should be added to classList when shown', async(inject([], () => {
+        it('should be added to classList when shown', async(() => {
           return setup(true).then((api: IBackdropFixture) => {
-            api.fixture.detectChanges();
-            let el = api.debug.nativeElement;
-            expect(el.classList.contains(api.backdrop.transitionClass)).toBe(true);
+            return promiseWait().then(() => {
+              api.fixture.detectChanges();
+              let el = api.debug.nativeElement;
+              expect(el.classList.contains(api.backdrop.transitionClass)).toBe(true);
+            });
           });
-        })));
-        it('should be removed from classList when hidden', async(inject([], () => {
+        }));
+
+        it('should be removed from classList when hidden', async(() => {
           return setup(true).then((api: IBackdropFixture) => {
             return promiseWait().then(() => {
               let el = api.debug.nativeElement;
@@ -79,11 +76,11 @@ export function main() {
                 });
             });
           });
-        })));
+        }));
       });
 
       describe('transitionAddClass=false', () => {
-        it('should remove transitionClass when shown', async(inject([], () => {
+        it('should remove transitionClass when shown', async(() => {
           return setup(false, false).then((api: IBackdropFixture) => {
             let el = api.debug.nativeElement;
             expect(el.classList.contains(api.backdrop.transitionClass)).toBe(false);
@@ -92,8 +89,9 @@ export function main() {
               expect(el.classList.contains(api.backdrop.transitionClass)).toBe(false);
             });
           });
-        })));
-        it('should add transitionClass when hidden', async(inject([], () => {
+        }));
+
+        it('should add transitionClass when hidden', async(() => {
           return setup(true, false).then((api: IBackdropFixture) => {
             let el = api.debug.nativeElement;
             expect(el.classList.contains(api.backdrop.transitionClass)).toBe(false);
@@ -101,11 +99,11 @@ export function main() {
               expect(el.classList.contains(api.backdrop.transitionClass)).toBe(true);
             });
           });
-        })));
+        }));
       });
 
       describe('clickClose', () => {
-        it('should be hidden by a click when true', async(inject([], () => {
+        it('should be hidden by a click when true', async(() => {
           return setup(true).then((api: IBackdropFixture) => {
             let triggered = false;
             api.backdrop.clickClose = true;
@@ -115,9 +113,11 @@ export function main() {
             };
             api.debug.nativeElement.click();
             expect(triggered).toBe(true);
-          });
-        })));
-        it('should not be hidden when clickClose is false', async(inject([], () => {
+          })
+            .catch(error => console.error.bind(console));
+        }));
+
+        it('should not be hidden when clickClose is false', async(() => {
           return setup(true).then((api: IBackdropFixture) => {
             let triggered = false;
             api.backdrop.clickClose = false;
@@ -127,9 +127,11 @@ export function main() {
             };
             api.debug.nativeElement.click();
             expect(triggered).toBe(false);
-          });
-        })));
-        it('should not be clickable during transition animation', async(inject([], () => {
+          })
+            .catch(error => console.error.bind(console));
+        }));
+
+        it('should not be clickable during transition animation', async(() => {
           return setup().then((api: IBackdropFixture) => {
             let triggered = false;
             api.backdrop.clickClose = true;
@@ -145,11 +147,13 @@ export function main() {
               api.debug.nativeElement.click();
               expect(triggered).toBe(true);
             });
-          });
-        })));
+          })
+            .catch(error => console.error.bind(console));
+        }));
       });
+
       describe('show', () => {
-        it('emit events before and after being shown', async(inject([], () => {
+        it('emit events before and after being shown', () => {
           return setup().then((api: IBackdropFixture) => {
             let changes: string[] = [];
             expect(api.backdrop.visible).toBe(false);
@@ -164,8 +168,9 @@ export function main() {
                 expect(changes[1]).toBe('shown');
               });
           });
-        })));
-        it('does not emit events events if already shown', async(inject([], () => {
+        });
+
+        it('does not emit events events if already shown', async(() => {
           return setup(true).then((api: IBackdropFixture) => {
             let changes: number = 0;
             api.backdrop.onShowing.subscribe(() => changes++);
@@ -176,12 +181,13 @@ export function main() {
               .then(() => {
                 expect(changes).toBe(0);
               });
-          });
-        })));
+          })
+            .catch(error => console.error.bind(console));
+        }));
       });
 
       describe('hide', () => {
-        it('hide emits events before and after being hidden', async(inject([], () => {
+        it('hide emits events before and after being hidden', async(() => {
           return setup(true).then((api: IBackdropFixture) => {
             let changes: string[] = [];
             api.backdrop.onHiding.subscribe(() => changes.push('hiding'));
@@ -194,9 +200,11 @@ export function main() {
                 expect(changes[0]).toBe('hiding');
                 expect(changes[1]).toBe('hidden');
               });
-          });
-        })));
-        it('does not emit events events if already hidden', async(inject([], () => {
+          })
+            .catch(error => console.error.bind(console));
+        }));
+
+        it('does not emit events events if already hidden', async(() => {
           return setup().then((api: IBackdropFixture) => {
             let changes: number = 0;
             expect(api.backdrop.visible).toBe(false);
@@ -208,8 +216,9 @@ export function main() {
               .then(() => {
                 expect(changes).toBe(0);
               });
-          });
-        })));
+          })
+            .catch(error => console.error.bind(console));
+        }));
       });
     });
 
diff --git a/src/components/button/button_spec.ts b/src/components/button/button_spec.ts
index f96ef627..22420122 100644
--- a/src/components/button/button_spec.ts
+++ b/src/components/button/button_spec.ts
@@ -1,5 +1,5 @@
-import {beforeEach, describe, expect, inject, it, async} from '@angular/core/testing';
-import {ComponentFixture, TestComponentBuilder} from '@angular/compiler/testing';
+import {inject, async} from '@angular/core/testing';
+import {ComponentFixture, TestComponentBuilder} from '@angular/core/testing';
 import {Component, ViewMetadata, DebugElement} from '@angular/core';
 import {MdButton, MdAnchor, Ink} from '../../index';
 import {By} from '@angular/platform-browser';
@@ -22,7 +22,7 @@ export function main() {
       this.clickCount++;
     }
   }
-  
+
   let createEvent = (): MouseEvent => {
     var event = document.createEvent('MouseEvent');
     event.initEvent('mouse', true, true);
@@ -30,9 +30,12 @@ export function main() {
   };
 
   describe('MdButton', () => {
-
     let builder: TestComponentBuilder;
 
+    beforeEach(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
+      builder = tcb;
+    }));
+
     function setup(template: string = defaultTemplate): Promise<ComponentFixture<TestComponent>> {
       return builder
         .overrideTemplate(TestComponent, template)
@@ -43,12 +46,9 @@ export function main() {
         }).catch(console.error.bind(console));
     }
 
-    beforeEach(inject([TestComponentBuilder], (tcb) => {
-      builder = tcb;
-    }));
-
     describe('button[md-button]', () => {
-      it('should handle a click on the button', async(() => {
+
+      it('should handle a click on the button', () => {
         return setup().then((fixture: ComponentFixture<TestComponent>) => {
           let testComponent = fixture.debugElement.componentInstance;
           let buttonDebugElement = fixture.debugElement.query(By.css('button'));
@@ -56,10 +56,10 @@ export function main() {
           buttonDebugElement.nativeElement.click();
           expect(testComponent.clickCount).toBe(1);
         });
-      }), 10000);
+      });
 
 
-      it('should ink ripple when clicked', async(() => {
+      it('should ink ripple when clicked', () => {
         return setup().then((fixture: ComponentFixture<TestComponent>) => {
           let button: DebugElement = fixture.debugElement.children[0];
 
@@ -77,9 +77,9 @@ export function main() {
           expect(fired).toBe(true);
           Ink.rippleEvent = save;
         });
-      }));
+      });
 
-      it('should not ink ripple with md-no-ink attribute', async(inject([], () => {
+      it('should not ink ripple with md-no-ink attribute', () => {
         let template = `<button md-button md-no-ink></button>`;
         return setup(template).then((fixture: ComponentFixture<TestComponent>) => {
           let button: DebugElement = fixture.debugElement.children[0];
@@ -96,9 +96,9 @@ export function main() {
           expect(fired).toBe(false);
           Ink.rippleEvent = save;
         });
-      })));
+      });
 
-      it('should disable the button', async(() => {
+      it('should disable the button', () => {
         return setup().then((fixture: ComponentFixture<TestComponent>) => {
           let testAppComponent = fixture.debugElement.componentInstance;
           let buttonDebugElement = fixture.debugElement.query(By.css('button'));
@@ -118,7 +118,7 @@ export function main() {
           buttonElement.click();
           expect(testAppComponent.clickCount).toBe(0);
         });
-      }), 10000);
+      });
     });
 
     describe('a[md-button]', () => {
@@ -129,7 +129,7 @@ export function main() {
           TestComponent, new ViewMetadata({template: anchorTemplate, directives: [MdAnchor]}));
       });
 
-      it('should remove disabled anchors from tab order', async(() => {
+      it('should remove disabled anchors from tab order', () => {
         return builder.createAsync(TestComponent).then((fixture: ComponentFixture<TestComponent>) => {
           let testAppComponent = fixture.debugElement.componentInstance;
           let anchorDebugElement = fixture.debugElement.query(By.css('a'));
@@ -146,9 +146,9 @@ export function main() {
           expect(anchorElement.tabIndex).toBe(-1);
 
         });
-      }), 10000);
+      });
 
-      it('should not preventDefault on enabled anchor clicks', async(inject([], () => {
+      it('should not preventDefault on enabled anchor clicks', () => {
         return builder.createAsync(TestComponent).then((fixture: ComponentFixture<TestComponent>) => {
           let anchor: DebugElement = fixture.debugElement.children[0];
           let event = createEvent();
@@ -157,8 +157,9 @@ export function main() {
           anchor.triggerEventHandler('click', event);
           expect(triggered).toBe(false);
         });
-      })));
-      it('should preventDefault for disabled anchor clicks', async(inject([], () => {
+      });
+
+      it('should preventDefault for disabled anchor clicks', () => {
         return builder.createAsync(TestComponent).then((fixture: ComponentFixture<TestComponent>) => {
           let anchor: DebugElement = fixture.debugElement.children[0];
           let anchorComp: MdAnchor = anchor.componentInstance;
@@ -170,7 +171,7 @@ export function main() {
           expect(triggered).toBe(true);
           fixture.destroy();
         });
-      })));
+      });
     });
   });
 }
diff --git a/src/components/data-table/data_table_selectable_tr.ts b/src/components/data-table/data_table_selectable_tr.ts
index 4ed74ffa..a0df44f6 100644
--- a/src/components/data-table/data_table_selectable_tr.ts
+++ b/src/components/data-table/data_table_selectable_tr.ts
@@ -11,7 +11,7 @@ export interface ITableSelectableRow {
   selectableValue: string;
   onChange: EventEmitter<ITableSelectableRowSelectionChange>;
   isActive: boolean;
-  change: () => void;
+  change: (event: any) => void;
   ngAfterContentInit: () => void;
 }
 
@@ -41,16 +41,20 @@ export abstract class AbstractMdDataTableSelectableRow implements AfterContentIn
   /**
    * Change active status
    */
-  change() {
+  change(event) {
+    if (event.target.classList.contains('md-checkbox-inner-container')) {
+      event.preventDefault();
+    }
+
     this.isActive = !this.isActive;
 
-    let event: ITableSelectableRowSelectionChange = {
+    let changeEvent: ITableSelectableRowSelectionChange = {
       name: 'selectable_row_change',
       target: this,
       isActive: this.isActive,
       selectableValue: this.selectableValue
     }
-    this.onChange.emit(event);
+    this.onChange.emit(changeEvent);
   }
 
   ngAfterContentInit() {}
@@ -60,14 +64,14 @@ export abstract class AbstractMdDataTableSelectableRow implements AfterContentIn
   selector: 'tr[md-data-table-header-selectable-row]',
   template: `
         <th class="md-data-check-cell">
-            <md-checkbox #check [checked]="isActive"></md-checkbox>
+            <md-checkbox [checked]="isActive"></md-checkbox>
         </th>
         <ng-content></ng-content>
     `,
   directives: [MdCheckbox],
   host: {
     '[class.active]': 'isActive',
-    '(click)': 'change()'
+    '(click)': 'change($event)'
   }
 })
 export class MdDataTableHeaderSelectableRow extends AbstractMdDataTableSelectableRow {
@@ -94,14 +98,14 @@ export class MdDataTableHeaderSelectableRow extends AbstractMdDataTableSelectabl
   selector: 'tr[md-data-table-selectable-row]',
   template: `
         <td class="md-data-check-cell">
-          <md-checkbox #check [checked]="isActive"></md-checkbox>
+          <md-checkbox [checked]="isActive"></md-checkbox>
         </td>
         <ng-content></ng-content>
     `,
   directives: [MdCheckbox],
   host: {
     '[class.active]': 'isActive',
-    '(click)': 'change()'
+    '(click)': 'change($event)'
   }
 })
 export class MdDataTableSelectableRow extends AbstractMdDataTableSelectableRow {
diff --git a/src/components/data-table/data_table_spec.ts b/src/components/data-table/data_table_spec.ts
index abfc5dca..f72e5a1c 100644
--- a/src/components/data-table/data_table_spec.ts
+++ b/src/components/data-table/data_table_spec.ts
@@ -1,6 +1,6 @@
 import {componentSanityCheck} from "../../platform/testing/util";
-import {beforeEach, describe, expect, inject, it, async} from "@angular/core/testing";
-import {ComponentFixture, TestComponentBuilder} from "@angular/compiler/testing";
+import {inject, async} from "@angular/core/testing";
+import {ComponentFixture, TestComponentBuilder} from "@angular/core/testing";
 import {Component, DebugElement, EventEmitter, QueryList} from "@angular/core";
 import {CORE_DIRECTIVES} from "@angular/common";
 import {By} from "@angular/platform-browser";
@@ -61,14 +61,14 @@ export function main() {
     }));
 
     describe('md-data-table', () => {
-      it('should initialize selected', async(inject([], () => {
+      it('should initialize selected', () => {
         return setup().then((api: IDataTableFixture) => {
           expect(api.comp.selected.length).toEqual(0);
           api.fixture.destroy();
         });
-      })));
+      });
 
-      it('should toggle checked value when a click is fired on a row checkbox', async(inject([], () => {
+      it('should toggle checked value when a click is fired on a row checkbox', () => {
         return setup().then((api: IDataTableFixture) => {
           let row = api.debug.query(By.css('tbody tr:first-child'));
           row.nativeElement.click();
@@ -78,9 +78,9 @@ export function main() {
           expect(api.comp.selected.length).toEqual(0);
           api.fixture.destroy();
         });
-      })));
+      });
 
-      it('should check all row checkbox when a click is fired on master checkbox', async(inject([], () => {
+      it('should check all row checkbox when a click is fired on master checkbox', () => {
         return setup().then((api: IDataTableFixture) => {
           let masterRow = api.debug.query(By.css('thead tr:first-child'));
           masterRow.nativeElement.click();
@@ -90,9 +90,9 @@ export function main() {
           expect(api.comp.selected.length).toEqual(0);
           api.fixture.destroy();
         });
-      })));
+      });
 
-      it('should uncheck master checkbox if a row checkbox is unchecked', async(inject([], () => {
+      it('should uncheck master checkbox if a row checkbox is unchecked', () => {
         return setup().then((api: IDataTableFixture) => {
           let masterRow = api.debug.query(By.css('thead tr:first-child')),
               row       = api.debug.query(By.css('tbody tr:first-child')).nativeElement;
@@ -105,9 +105,9 @@ export function main() {
           expect(masterRow.componentInstance.isActive).toBe(false);
           api.fixture.destroy();
         });
-      })));
+      });
 
-      it('should fire a selectable_change event when a row checkbox change', async(inject([], () => {
+      it('should fire a selectable_change event when a row checkbox change', () => {
         return setup().then((api: IDataTableFixture) => {
           let row = api.debug.query(By.css('tbody tr:first-child')).nativeElement;
 
@@ -118,12 +118,12 @@ export function main() {
           row.click();
           api.fixture.destroy();
         });
-      })));
+      });
     });
 
     describe('_unsubscribeChildren', () => {
 
-      it('should reset the selected values', async(inject([], () => {
+      it('should reset the selected values', () => {
         return setup().then((api: IDataTableFixture) => {
           api.comp.selected = ['1', '2'];
 
@@ -131,9 +131,9 @@ export function main() {
 
           expect(api.comp.selected.length).toEqual(0);
         });
-      })));
+      });
 
-      it('should unsubscribe to listener', async(inject([], () => {
+      it('should unsubscribe to listener', () => {
         return setup().then((api: IDataTableFixture) => {
           let emitter = new EventEmitter(false),
             spy = jasmine.createSpy('spy');
@@ -151,13 +151,13 @@ export function main() {
 
           expect(spy.calls.count()).toEqual(1);
         });
-      })));
+      });
 
     });
 
     describe('_updateChildrenListener', () => {
 
-      it('should ask unsubscription', async(inject([], () => {
+      it('should ask unsubscription', () => {
         return setup().then((api: IDataTableFixture) => {
           spyOn(api.comp, '_unsubscribeChildren');
 
@@ -165,7 +165,7 @@ export function main() {
 
           expect(api.comp._unsubscribeChildren).toHaveBeenCalled();
         });
-      })));
+      });
 
     });
 
diff --git a/src/components/dialog/dialog.ts b/src/components/dialog/dialog.ts
index 0560b1df..fa4d2a29 100644
--- a/src/components/dialog/dialog.ts
+++ b/src/components/dialog/dialog.ts
@@ -9,7 +9,9 @@ import {
   ViewEncapsulation,
   OnDestroy
 } from '@angular/core';
-import {Overlay, OverlayState, OverlayRef, OVERLAY_PROVIDERS} from '@angular2-material/core/overlay/overlay';
+import {Overlay, OVERLAY_PROVIDERS} from '@angular2-material/core/overlay/overlay';
+import {OverlayState} from '@angular2-material/core/overlay/overlay-state';
+import {OverlayRef} from '@angular2-material/core/overlay/overlay-ref';
 import {Animate} from '../../core/util/animate';
 import {MdDialogPortal} from './dialog-portal';
 import {MdDialogActions} from './dialog-actions';
diff --git a/src/components/form/messages_spec.ts b/src/components/form/messages_spec.ts
index dd2affac..27d11a35 100644
--- a/src/components/form/messages_spec.ts
+++ b/src/components/form/messages_spec.ts
@@ -1,5 +1,5 @@
-import {beforeEach, describe, expect, inject, it, async} from '@angular/core/testing';
-import {ComponentFixture, TestComponentBuilder} from '@angular/compiler/testing';
+import {inject, async} from '@angular/core/testing';
+import {ComponentFixture, TestComponentBuilder} from '@angular/core/testing';
 import {Component} from '@angular/core';
 import {MdMessage, MdMessages} from '../../index';
 import {CORE_DIRECTIVES, FORM_DIRECTIVES, Control} from '@angular/common';
@@ -53,26 +53,29 @@ export function main() {
     }));
 
     describe('md-messages', () => {
-      it('should error if used outside of an NgFormControl', async(inject([], () => {
+      it('should error if used outside of an NgFormControl', () => {
         return setup(`<div md-messages></div>`).catch((err: any) => {
           expect(err).toBeDefined();
         });
-      })));
-      it('should initialize when given model and control group are present', async(inject([], () => {
+      });
+
+      it('should initialize when given model and control group are present', () => {
         return setup().then((api: IFormMessagesFixture) => {
           expect(api.container.isTouched).toBe(false);
           api.fixture.destroy();
         });
-      })));
-      it('should bind local view references #ref="ngForm"', async(inject([], () => {
+      });
+
+      it('should bind local view references #ref="ngForm"', () => {
         return setup().then((api: IFormMessagesFixture) => {
           expect(api.container.isTouched).toBe(false);
           expect(api.messages.length).toBe(1);
           expect(api.container.form).not.toBeNull();
           expect(api.fixture.componentInstance.name).toBe('MorTon');
         });
-      })));
-      it('should re-export valid from control or form', async(inject([], () => {
+      });
+
+      it('should re-export valid from control or form', async(() => {
         return setup().then((api: IFormMessagesFixture) => {
           return promiseWait().then(() => {
             let ctrl: Control = (<any>api.container.property).control;
@@ -84,7 +87,8 @@ export function main() {
             expect(api.container.valid).toBe(true);
           });
         });
-      })));
+      }));
+
     });
 
 
diff --git a/src/components/form/validators_spec.ts b/src/components/form/validators_spec.ts
index 1b43ec28..41fd1dbd 100644
--- a/src/components/form/validators_spec.ts
+++ b/src/components/form/validators_spec.ts
@@ -1,4 +1,3 @@
-import {describe, it, expect} from "@angular/core/testing";
 import {Control} from "@angular/common";
 import {MdPatternValidator, MdNumberRequiredValidator} from "../../index";
 
diff --git a/src/components/ink/ink_spec.ts b/src/components/ink/ink_spec.ts
index 05c92329..66af1915 100644
--- a/src/components/ink/ink_spec.ts
+++ b/src/components/ink/ink_spec.ts
@@ -1,5 +1,5 @@
-import {beforeEach, describe, expect, inject, it, async} from '@angular/core/testing';
-import {ComponentFixture, TestComponentBuilder} from '@angular/compiler/testing';
+import {inject} from '@angular/core/testing';
+import {ComponentFixture, TestComponentBuilder} from '@angular/core/testing';
 import {Component, DebugElement} from '@angular/core';
 import {Ink, MdInk} from '../../index';
 import {By} from '@angular/platform-browser';
@@ -41,7 +41,7 @@ export function main() {
     }));
 
     describe('[md-ink]', () => {
-      it('should ink ripple when clicked', async(inject([], () => {
+      it('should ink ripple when clicked', () => {
         setup().then((fixture: ComponentFixture<TestComponent>) => {
           let element: DebugElement = fixture.debugElement.query(By.css('[md-ink]'));
 
@@ -59,17 +59,17 @@ export function main() {
           expect(fired).toBe(true);
           Ink.rippleEvent = save;
         });
-      })));
+      });
 
-      it('should ink ripple without assertion mock', async(() => {
+      it('should ink ripple without assertion mock', () => {
         setup().then((fixture: ComponentFixture<TestComponent>) => {
           let element: DebugElement = fixture.debugElement.query(By.css('[md-ink]'));
           let event = createEvent();
           element.triggerEventHandler('mousedown', event);
         });
-      }));
+      });
 
-      it('should not ink ripple with md-no-ink attribute', async(inject([], () => {
+      it('should not ink ripple with md-no-ink attribute', () => {
         let template = `<div md-ink md-no-ink></div>`;
         setup(template).then((fixture: ComponentFixture<TestComponent>) => {
           let element: DebugElement = fixture.debugElement.query(By.css('[md-ink]'));
@@ -86,7 +86,7 @@ export function main() {
           expect(fired).toBe(false);
           Ink.rippleEvent = save;
         });
-      })));
+      });
     });
   });
 }
diff --git a/src/components/pagination/pagination.ts b/src/components/pagination/pagination.ts
index 9abdc2a6..ac7592b1 100644
--- a/src/components/pagination/pagination.ts
+++ b/src/components/pagination/pagination.ts
@@ -6,34 +6,42 @@ import {
   EventEmitter,
   ElementRef,
   AfterViewInit,
-  AfterContentInit
+  AfterContentInit,
+  OnInit
 } from '@angular/core';
 import {isPresent} from '@angular/core/src/facade/lang';
+import {DomSanitizationService, SafeHtml} from '@angular/platform-browser/src/security/dom_sanitization_service';
 import 'rxjs/add/operator/filter';
 import {PaginationService} from './pagination_service';
 
+
 export interface IPaginationModel {
   currentPage: number;
   itemsPerPage: number;
-  totalItems: number;
+  totalItems: number; 
 }
 
-export abstract class AbstractPaginationSubComponent {
+export abstract class AbstractPaginationSubComponent implements OnInit{
 
-  @Input() name: string;
+  @Input() name: string = 'default';
 
   @Input() model: IPaginationModel = { currentPage: 0,
     itemsPerPage: 0,
     totalItems: 0
   };
 
-  constructor(protected service: PaginationService) {
+  constructor(protected service: PaginationService) {}
+
+  ngOnInit() {
+    if (!this.name) {
+      this.name = 'default'; 
+    }
     this.service.onChange
-      .filter(event => isPresent(event) && isPresent(event.name))
-      .filter(event => event.target === this.name)
-      .subscribe(event => {
-        this.model = event.pagination;
-      });
+        .filter(event => isPresent(event) && isPresent(event.name))
+        .filter(event => event.target === this.name)
+        .subscribe(event => {
+          this.model = event.pagination;
+        });
   }
 
 }
@@ -60,7 +68,7 @@ export class MdPaginationRange extends AbstractPaginationSubComponent {
 
   public value: string = '';
 
-  constructor(protected service: PaginationService) {
+  constructor(protected service: PaginationService, private sanitizationService: DomSanitizationService) {
     super(service);
   }
 
@@ -92,7 +100,9 @@ export class MdPaginationRange extends AbstractPaginationSubComponent {
       let rest = this.model.totalItems - rangeStart,
         rangeStop = rest < this.model.itemsPerPage ? this.model.totalItems : rangeStart + this.model.itemsPerPage - 1;
 
-      return this.getFormattedValue(rangeStart, rangeStop, this.model.totalItems);
+      return this.sanitizationService.bypassSecurityTrustHtml(
+        this.getFormattedValue(rangeStart, rangeStop, this.model.totalItems)
+      );
     }
 
     return;
@@ -261,7 +271,9 @@ export class MdPagination implements AfterContentInit, AfterViewInit {
   constructor(private service: PaginationService, private element: ElementRef) {
     this.service.onChange
       .filter(event => isPresent(event) && isPresent(event.name))
-      .filter(event => event.target === this.name)
+      .filter(event => {
+        return event.target === this.name;
+      })
       .subscribe(event => this.onPaginationChange.emit(event));
 
   }
diff --git a/src/components/pagination/pagination_service.ts b/src/components/pagination/pagination_service.ts
index 6da66196..ed6e55bc 100644
--- a/src/components/pagination/pagination_service.ts
+++ b/src/components/pagination/pagination_service.ts
@@ -11,7 +11,7 @@ export class PaginationService {
     this.onChange = new Subject(null);
   }
 
-  change(name: string, pagination: IPaginationModel) {
+  change(name: string = 'default', pagination: IPaginationModel) {
     let newEvent: IPaginationChange = {
       name: 'pagination_changed',
       target: name,
diff --git a/src/components/pagination/pagination_spec.ts b/src/components/pagination/pagination_spec.ts
index d5096bd1..a7f0137f 100644
--- a/src/components/pagination/pagination_spec.ts
+++ b/src/components/pagination/pagination_spec.ts
@@ -1,13 +1,6 @@
 import {componentSanityCheck} from '../../platform/testing/util';
-import {
-  beforeEach,
-  describe,
-  expect,
-  inject,
-  it,
-  async
-} from '@angular/core/testing';
-import {ComponentFixture, TestComponentBuilder} from "@angular/compiler/testing";
+import {inject, async} from '@angular/core/testing';
+import {ComponentFixture, TestComponentBuilder} from "@angular/core/testing";
 import {Component, DebugElement} from '@angular/core';
 import {CORE_DIRECTIVES} from '@angular/common';
 import {By} from "@angular/platform-browser";
@@ -67,120 +60,120 @@ export function main() {
 
       describe('default values', () => {
 
-        it('should have a default model', inject([], () => {
+        it('should have a default model', () => {
           return setup().then((api: IPaginationFixture) => {
             expect(api.comp.model.currentPage).toEqual(0);
             expect(api.comp.model.itemsPerPage).toEqual(0);
             expect(api.comp.model.totalItems).toEqual(0);
           });
-        }));
+        });
 
-        it('should accept custom model', inject([], () => {
+        it('should accept custom model', () => {
           return setup(`<md-pagination [model]="defaultModel"></md-pagination>`).then((api: IPaginationFixture) => {
             expect(api.comp.model.currentPage).toEqual(1);
             expect(api.comp.model.itemsPerPage).toEqual(5);
             expect(api.comp.model.totalItems).toEqual(24);
           });
-        }));
+        });
 
-        it('should have a default name', inject([], () => {
+        it('should have a default name', () => {
           return setup().then((api: IPaginationFixture) => {
             expect(api.comp.name).toEqual('default');
           });
-        }));
+        });
 
-        it('should accept a custom name', inject([], () => {
+        it('should accept a custom name', () => {
           return setup(`<md-pagination name="book"></md-pagination>`).then((api: IPaginationFixture) => {
             expect(api.comp.name).toEqual('book');
           });
-        }));
+        });
 
-        it('should display range by default', inject([], () => {
+        it('should display range by default', () => {
           return setup().then((api: IPaginationFixture) => {
             expect(api.comp.range).toBeTruthy();
           });
-        }));
+        });
 
-        it('should accept a custom display for range', inject([], () => {
+        it('should accept a custom display for range', () => {
           return setup(`<md-pagination [range]="false"></md-pagination>`).then((api: IPaginationFixture) => {
             expect(api.comp.range).toBeFalsy();
           });
-        }));
+        });
 
-        it('should not have a default rangeFormat', inject([], () => {
+        it('should not have a default rangeFormat', () => {
           return setup().then((api: IPaginationFixture) => {
             expect(api.comp.rangeFormat).toBeUndefined();
           });
-        }));
+        });
 
-        it('should accept a custom rangeFormat', inject([], () => {
+        it('should accept a custom rangeFormat', () => {
           return setup(`<md-pagination range-format="{start}/{total}"></md-pagination>`).then((api: IPaginationFixture) => {
             expect(api.comp.rangeFormat).toEqual('{start}/{total}');
           });
-        }));
+        });
 
-        it('should display controls by default', inject([], () => {
+        it('should display controls by default', () => {
           return setup().then((api: IPaginationFixture) => {
             expect(api.comp.controls).toBeTruthy();
           });
-        }));
+        });
 
-        it('should accept a custom display for controls', inject([], () => {
+        it('should accept a custom display for controls', () => {
           return setup(`<md-pagination [controls]="false"></md-pagination>`).then((api: IPaginationFixture) => {
             expect(api.comp.controls).toBeFalsy();
           });
-        }));
+        });
 
-        it('should display items per page options by default', inject([], () => {
+        it('should display items per page options by default', () => {
           return setup().then((api: IPaginationFixture) => {
             expect(api.comp.itemsPerPage).toBeTruthy();
           });
-        }));
+        });
 
-        it('should accept a custom display for items per page', inject([], () => {
+        it('should accept a custom display for items per page', () => {
           return setup(`<md-pagination [items-per-page]="false"></md-pagination>`).then((api: IPaginationFixture) => {
             expect(api.comp.itemsPerPage).toBeFalsy();
           });
-        }));
+        });
 
-        it('should not have a default prepended string to items per page', inject([], () => {
+        it('should not have a default prepended string to items per page', () => {
           return setup().then((api: IPaginationFixture) => {
             expect(api.comp.itemsPerPageBefore).toBeUndefined();
           });
-        }));
+        });
 
-        it('should accept a custom prepended string to items per page', inject([], () => {
+        it('should accept a custom prepended string to items per page', () => {
           return setup(`<md-pagination items-per-page-before="page:"></md-pagination>`).then((api: IPaginationFixture) => {
             expect(api.comp.itemsPerPageBefore).toEqual('page:');
           });
-        }));
+        });
 
-        it('should not have a default appended string to items per page', inject([], () => {
+        it('should not have a default appended string to items per page', () => {
           return setup().then((api: IPaginationFixture) => {
             expect(api.comp.itemsPerPageAfter).toBeUndefined();
           });
-        }));
+        });
 
-        it('should accept a custom appended string to items per page', inject([], () => {
+        it('should accept a custom appended string to items per page', () => {
           return setup(`<md-pagination items-per-page-after=" - "></md-pagination>`).then((api: IPaginationFixture) => {
             expect(api.comp.itemsPerPageAfter).toEqual(' - ');
           });
-        }));
+        });
 
-        it('should not have a default list of options for items per page', inject([], () => {
+        it('should not have a default list of options for items per page', () => {
           return setup().then((api: IPaginationFixture) => {
             expect(api.comp.itemsPerPageOptions).toBeUndefined();
           });
-        }));
+        });
 
-        it('should accept a custom list of options for items per page', inject([], () => {
+        it('should accept a custom list of options for items per page', () => {
           return setup(`<md-pagination [items-per-page-options]="defaultItemsPerPageOptions"></md-pagination>`).then((api: IPaginationFixture) => {
             expect(api.comp.itemsPerPageOptions).not.toContain(5);
             expect(api.comp.itemsPerPageOptions).toContain(10);
             expect(api.comp.itemsPerPageOptions).toContain(50);
             expect(api.comp.itemsPerPageOptions).toContain(100);
           });
-        }));
+        });
 
       });
 
@@ -196,7 +189,7 @@ export function main() {
           service = serv;
         }));
 
-        it('should listen PaginationService', inject([], () => {
+        it('should listen PaginationService', () => {
           return setup().then((api: IPaginationFixture) => {
             api.comp.onPaginationChange.subscribe((event) => {
               expect(event.name).toEqual('pagination_changed');
@@ -206,9 +199,9 @@ export function main() {
 
             service.change('default', updatedPagination);
           });
-        }));
+        });
 
-        it('should listen PaginationService only for his reference name', inject([], () => {
+        it('should listen PaginationService only for his reference name', () => {
           return setup(`<md-pagination name="book"></md-pagination>`).then((api: IPaginationFixture) => {
             let spy = jasmine.createSpy('spy');
 
@@ -220,26 +213,26 @@ export function main() {
 
             service.change('default', updatedPagination);
           });
-        }));
+        });
       });
 
       describe('ngAfterContentInit', () => {
 
-        it('should init default components', async(inject([], () => {
+        it('should init default components', () => {
           return setup().then((api: IPaginationFixture) => {
             let element = api.debug.nativeElement;
             api.fixture.detectChanges();
             expect(element.children.length).toEqual(3);
           });
-        })));
+        });
 
-        it('should accept custom components as children', async(inject([], () => {
+        it('should accept custom components as children', () => {
           return setup(`<md-pagination><button></button></md-pagination>`).then((api: IPaginationFixture) => {
             let element = api.debug.nativeElement;
             api.fixture.detectChanges();
             expect(element.children.length).toEqual(1);
           });
-        })));
+        });
 
       });
 
@@ -256,11 +249,11 @@ export function main() {
           spyOn(service, 'change')
         }));
 
-        it('should dispatch his model after init', async(inject([], () => {
+        it('should dispatch his model after init', () => {
           return setup(`<md-pagination name="book" [model]="defaultModel"></md-pagination>`).then((api: IPaginationFixture) => {
             expect(service.change).toHaveBeenCalled();
           });
-        })));
+        });
 
       });
 
@@ -314,45 +307,45 @@ export function main() {
 
       describe('default values', () => {
 
-        it('should have a default model', inject([], () => {
+        it('should have a default model', () => {
           return setup().then((api: IPaginationRangeFixture) => {
             expect(api.comp.model.currentPage).toEqual(0);
             expect(api.comp.model.itemsPerPage).toEqual(0);
             expect(api.comp.model.totalItems).toEqual(0);
           });
-        }));
+        });
 
-        it('should accept custom model', inject([], () => {
+        it('should accept custom model', () => {
           return setup(`<md-pagination-range [model]="page2"></md-pagination-range>`).then((api: IPaginationRangeFixture) => {
             expect(api.comp.model.currentPage).toEqual(2);
             expect(api.comp.model.itemsPerPage).toEqual(30);
             expect(api.comp.model.totalItems).toEqual(65);
           });
-        }));
+        });
 
-        it('should have a default name', inject([], () => {
+        it('should have a default name', () => {
           return setup().then((api: IPaginationRangeFixture) => {
             expect(api.comp.name).toEqual('default');
           });
-        }));
+        });
 
-        it('should accept a custom name', inject([], () => {
+        it('should accept a custom name', () => {
           return setup(`<md-pagination-range name="book"></md-pagination-range>`).then((api: IPaginationRangeFixture) => {
             expect(api.comp.name).toEqual('book');
           });
-        }));
+        });
 
-        it('should have a default range format', inject([], () => {
+        it('should have a default range format', () => {
           return setup().then((api: IPaginationRangeFixture) => {
             expect(api.comp.rangeFormat).toEqual('{start}-{end} of {total}');
           });
-        }));
+        });
 
-        it('should accept a custom range format', inject([], () => {
+        it('should accept a custom range format', () => {
           return setup(`<md-pagination-range [range-format]="defaultRangeFormat"></md-pagination-range>`).then((api: IPaginationRangeFixture) => {
             expect(api.comp.rangeFormat).toEqual('{start}-{end} / {total}');
           });
-        }));
+        });
 
       });
 
@@ -368,7 +361,7 @@ export function main() {
           service = serv;
         }));
 
-        it('should listen PaginationService', inject([], () => {
+        it('should listen PaginationService', () => {
           return setup().then((api: IPaginationRangeFixture) => {
             service.onChange.subscribe((event) => {
               expect(api.comp.model).toEqual(updatedPagination);
@@ -376,9 +369,9 @@ export function main() {
 
             service.change('default', updatedPagination);
           });
-        }));
+        });
 
-        it('should listen PaginationService only for his reference name', inject([], () => {
+        it('should listen PaginationService only for his reference name', () => {
           return setup(`<md-pagination-range name="book"></md-pagination-range>`).then((api: IPaginationRangeFixture) => {
             service.onChange.subscribe(() => {
               expect(api.comp.model).toEqual({
@@ -390,39 +383,39 @@ export function main() {
 
             service.change('default', updatedPagination);
           });
-        }));
+        });
       });
 
       describe('getFormattedValue', () => {
 
-        it('should replace pattern in the range format', inject([], () => {
+        it('should replace pattern in the range format', () => {
           return setup().then((api: IPaginationRangeFixture) => {
             expect(api.comp.getFormattedValue(1, 5, 30)).toEqual('1-5 of 30');
           });
-        }));
+        });
 
       });
 
       describe('getRange', () => {
 
-        it('should calculate range at the middle', inject([], () => {
+        it('should calculate range at the middle', () => {
           return setup(`<md-pagination-range [model]="page2"></md-pagination-range>`).then((api: IPaginationRangeFixture) => {
             spyOn(api.comp, 'getFormattedValue').and.callThrough();
             let result = api.comp.getRange();
-            expect(result).toEqual('31-60 of 65');
+            expect(result['changingThisBreaksApplicationSecurity']).toEqual('31-60 of 65');
             expect(api.comp.getFormattedValue).toHaveBeenCalledWith(31, 60, 65);
           });
-        }));
+        });
 
 
-        it('should calculate range at the end', inject([], () => {
+        it('should calculate range at the end', () => {
           return setup(`<md-pagination-range [model]="page3"></md-pagination-range>`).then((api: IPaginationRangeFixture) => {
             spyOn(api.comp, 'getFormattedValue').and.callThrough();
             let result = api.comp.getRange();
-            expect(result).toEqual('61-65 of 65');
+            expect(result['changingThisBreaksApplicationSecurity']).toEqual('61-65 of 65');
             expect(api.comp.getFormattedValue).toHaveBeenCalledWith(61, 65, 65);
           });
-        }));
+        });
 
       });
 
@@ -478,33 +471,33 @@ export function main() {
 
       describe('default values', () => {
 
-        it('should have a default model', inject([], () => {
+        it('should have a default model', () => {
           return setup().then((api: IPaginationControlsFixture) => {
             expect(api.comp.model.currentPage).toEqual(0);
             expect(api.comp.model.itemsPerPage).toEqual(0);
             expect(api.comp.model.totalItems).toEqual(0);
           });
-        }));
+        });
 
-        it('should accept custom model', inject([], () => {
+        it('should accept custom model', () => {
           return setup(`<md-pagination-controls [model]="page2"></md-pagination-controls>`).then((api: IPaginationControlsFixture) => {
             expect(api.comp.model.currentPage).toEqual(2);
             expect(api.comp.model.itemsPerPage).toEqual(30);
             expect(api.comp.model.totalItems).toEqual(65);
           });
-        }));
+        });
 
-        it('should have a default name', inject([], () => {
+        it('should have a default name', () => {
           return setup().then((api: IPaginationControlsFixture) => {
             expect(api.comp.name).toEqual('default');
           });
-        }));
+        });
 
-        it('should accept a custom name', inject([], () => {
+        it('should accept a custom name', () => {
           return setup(`<md-pagination-controls name="book"></md-pagination-controls>`).then((api: IPaginationControlsFixture) => {
             expect(api.comp.name).toEqual('book');
           });
-        }));
+        });
 
       });
 
@@ -520,7 +513,7 @@ export function main() {
           service = serv;
         }));
 
-        it('should listen PaginationService', inject([], () => {
+        it('should listen PaginationService', () => {
           return setup().then((api: IPaginationControlsFixture) => {
             service.onChange.subscribe((event) => {
               expect(api.comp.model).toEqual(updatedPagination);
@@ -528,9 +521,9 @@ export function main() {
 
             service.change('default', updatedPagination);
           });
-        }));
+        });
 
-        it('should listen PaginationService only for his reference name', inject([], () => {
+        it('should listen PaginationService only for his reference name', () => {
           return setup(`<md-pagination-controls name="book"></md-pagination-controls>`).then((api: IPaginationControlsFixture) => {
             service.onChange.subscribe(() => {
               expect(api.comp.model).toEqual({
@@ -542,62 +535,62 @@ export function main() {
 
             service.change('default', updatedPagination);
           });
-        }));
+        });
       });
 
       describe('isFirstPage', () => {
 
-        it('should accept first page as first page', inject([], () => {
+        it('should accept first page as first page', () => {
           return setup(`<md-pagination-controls [model]="page1"></md-pagination-controls>`).then((api: IPaginationControlsFixture) => {
             expect(api.comp.isFirstPage()).toBeTruthy();
           });
-        }));
+        });
 
-        it('should not accept second page as first page', inject([], () => {
+        it('should not accept second page as first page', () => {
           return setup(`<md-pagination-controls [model]="page2"></md-pagination-controls>`).then((api: IPaginationControlsFixture) => {
             expect(api.comp.isFirstPage()).toBeFalsy();
           });
-        }));
+        });
 
       });
 
       describe('isLastPage', () => {
 
-        it('should accept third page as last page', inject([], () => {
+        it('should accept third page as last page', () => {
           return setup(`<md-pagination-controls [model]="page3"></md-pagination-controls>`).then((api: IPaginationControlsFixture) => {
             expect(api.comp.isLastPage()).toBeTruthy();
           });
-        }));
+        });
 
-        it('should not accept second page as last page', inject([], () => {
+        it('should not accept second page as last page', () => {
           return setup(`<md-pagination-controls [model]="page2"></md-pagination-controls>`).then((api: IPaginationControlsFixture) => {
             expect(api.comp.isLastPage()).toBeFalsy();
           });
-        }));
+        });
 
       });
 
       describe('previousPage', () => {
 
-        it('should call change of page to previous one', inject([], () => {
+        it('should call change of page to previous one', () => {
           return setup(`<md-pagination-controls [model]="page2"></md-pagination-controls>`).then((api: IPaginationControlsFixture) => {
             spyOn(api.comp, 'changePage');
             api.comp.previousPage();
             expect(api.comp.changePage).toHaveBeenCalledWith(1);
           });
-        }));
+        });
 
       });
 
       describe('nextPage', () => {
 
-        it('should call change of page to previous one', inject([], () => {
+        it('should call change of page to previous one', () => {
           return setup(`<md-pagination-controls [model]="page2"></md-pagination-controls>`).then((api: IPaginationControlsFixture) => {
             spyOn(api.comp, 'changePage');
             api.comp.nextPage();
             expect(api.comp.changePage).toHaveBeenCalledWith(3);
           });
-        }));
+        });
 
       });
 
@@ -609,7 +602,7 @@ export function main() {
           spyOn(service, 'change');
         }));
 
-        it('should dispatch the new current page to the service', inject([], () => {
+        it('should dispatch the new current page to the service', () => {
           return setup(`<md-pagination-controls [model]="page2"></md-pagination-controls>`).then((api: IPaginationControlsFixture) => {
             api.comp.changePage(1);
             expect(service.change).toHaveBeenCalledWith('default', {
@@ -618,7 +611,7 @@ export function main() {
               totalItems: 65
             });
           });
-        }));
+        });
 
       });
 
@@ -671,72 +664,72 @@ export function main() {
 
       describe('default values', () => {
 
-        it('should have a default model', inject([], () => {
+        it('should have a default model', () => {
           return setup().then((api: IPaginationItemsPerPageFixture) => {
             expect(api.comp.model.currentPage).toEqual(0);
             expect(api.comp.model.itemsPerPage).toEqual(0);
             expect(api.comp.model.totalItems).toEqual(0);
           });
-        }));
+        });
 
-        it('should accept custom model', inject([], () => {
+        it('should accept custom model', () => {
           return setup(`<md-pagination-items-per-page [model]="page2"></md-pagination-items-per-page>`).then((api: IPaginationItemsPerPageFixture) => {
             expect(api.comp.model.currentPage).toEqual(2);
             expect(api.comp.model.itemsPerPage).toEqual(30);
             expect(api.comp.model.totalItems).toEqual(65);
           });
-        }));
+        });
 
-        it('should have a default name', inject([], () => {
+        it('should have a default name', () => {
           return setup().then((api: IPaginationItemsPerPageFixture) => {
             expect(api.comp.name).toEqual('default');
           });
-        }));
+        });
 
-        it('should accept a custom name', inject([], () => {
+        it('should accept a custom name', () => {
           return setup(`<md-pagination-items-per-page name="book"></md-pagination-items-per-page>`).then((api: IPaginationItemsPerPageFixture) => {
             expect(api.comp.name).toEqual('book');
           });
-        }));
+        });
 
-        it('should have a default prepended string', inject([], () => {
+        it('should have a default prepended string', () => {
           return setup().then((api: IPaginationItemsPerPageFixture) => {
             expect(api.comp.itemsPerPageBefore).toEqual('Rows per page:');
           });
-        }));
+        });
 
-        it('should accept a custom prepended string', inject([], () => {
+        it('should accept a custom prepended string', () => {
           return setup(`<md-pagination-items-per-page items-per-page-before="Items per page:"></md-pagination-items-per-page>`).then((api: IPaginationItemsPerPageFixture) => {
             expect(api.comp.itemsPerPageBefore).toEqual('Items per page:');
           });
-        }));
+        });
 
-        it('should not have a default appended string', inject([], () => {
+        it('should not have a default appended string', () => {
           return setup().then((api: IPaginationItemsPerPageFixture) => {
             expect(api.comp.itemsPerPageAfter).toBeUndefined();
           });
-        }));
+        });
 
-        it('should accept a custom appended string', inject([], () => {
+        it('should accept a custom appended string', () => {
           return setup(`<md-pagination-items-per-page items-per-page-after=" - "></md-pagination-items-per-page>`).then((api: IPaginationItemsPerPageFixture) => {
             expect(api.comp.itemsPerPageAfter).toEqual(' - ');
           });
-        }));
+        });
 
-        it('should have a empty list of options for items per page', inject([], () => {
+        it('should have a empty list of options for items per page', () => {
           return setup().then((api: IPaginationItemsPerPageFixture) => {
             expect(api.comp.itemsPerPageOptions).toEqual([]);
           });
-        }));
+        });
 
-        it('should accept a custom list of options for items per page', inject([], () => {
+        it('should accept a custom list of options for items per page', () => {
           return setup(`<md-pagination-items-per-page [items-per-page-options]="defaultItemsPerPageOptions"></md-pagination-items-per-page>`).then((api: IPaginationItemsPerPageFixture) => {
             expect(api.comp.itemsPerPageOptions).not.toContain(5);
             expect(api.comp.itemsPerPageOptions).toContain(10);
             expect(api.comp.itemsPerPageOptions).toContain(50);
             expect(api.comp.itemsPerPageOptions).toContain(100);
           });
-        }));
+        });
 
       });
 
@@ -752,7 +745,7 @@ export function main() {
           service = serv;
         }));
 
-        it('should listen PaginationService', inject([], () => {
+        it('should listen PaginationService', () => {
           return setup().then((api: IPaginationItemsPerPageFixture) => {
             service.onChange.subscribe((event) => {
               expect(api.comp.model).toEqual(updatedPagination);
@@ -760,9 +753,9 @@ export function main() {
 
             service.change('default', updatedPagination);
           });
-        }));
+        });
 
-        it('should listen PaginationService only for his reference name', inject([], () => {
+        it('should listen PaginationService only for his reference name', () => {
           return setup(`<md-pagination-items-per-page name="book"></md-pagination-items-per-page>`).then((api: IPaginationItemsPerPageFixture) => {
             service.onChange.subscribe(() => {
               expect(api.comp.model.currentPage).toEqual(0);
@@ -772,7 +765,7 @@ export function main() {
 
             service.change('default', updatedPagination);
           });
-        }));
+        });
       });
 
       describe('changePaginationLength', () => {
@@ -783,7 +776,7 @@ export function main() {
           spyOn(service, 'change');
         }));
 
-        it('should dispatch page change to the service and reset to first page', inject([], () => {
+        it('should dispatch page change to the service and reset to first page', () => {
           return setup(`<md-pagination-items-per-page [model]="page2"></md-pagination-items-per-page>`).then((api: IPaginationItemsPerPageFixture) => {
             api.comp.changePaginationLength(50);
             expect(service.change).toHaveBeenCalledWith('default', {
@@ -792,7 +785,7 @@ export function main() {
               totalItems: 65
             });
           });
-        }));
+        });
 
       });
 
diff --git a/src/components/peekaboo/peekaboo_spec.ts b/src/components/peekaboo/peekaboo_spec.ts
index 5fef212c..144f1074 100644
--- a/src/components/peekaboo/peekaboo_spec.ts
+++ b/src/components/peekaboo/peekaboo_spec.ts
@@ -1,12 +1,5 @@
-import {
-  beforeEach,
-  describe,
-  expect,
-  inject,
-  it,
-  async
-} from "@angular/core/testing";
-import {ComponentFixture, TestComponentBuilder} from "@angular/compiler/testing";
+import {inject} from "@angular/core/testing";
+import {ComponentFixture, TestComponentBuilder} from "@angular/core/testing";
 import {Component, DebugElement} from "@angular/core";
 import {MdPeekaboo} from "../../index";
 import {By} from "@angular/platform-browser";
@@ -54,54 +47,60 @@ export function main() {
     }));
 
     describe('[md-peekaboo]', () => {
-      it('should be inactive by default', async(inject([], () => {
+      it('should be inactive by default', () => {
         return setup().then((api: IPeekabooFixture) => {
           expect(api.peek.active).toBe(false);
           api.fixture.destroy();
         });
-      })));
+      });
+
       describe('breakAction', () => {
-        it('should be undefined by default', async(inject([], () => {
+        it('should be undefined by default', () => {
           return setup().then((api: IPeekabooFixture) => {
             expect(api.peek.breakAction).toBeUndefined();
           });
-        })));
-        it('should be set by attribute', async(inject([], () => {
+        });
+
+        it('should be set by attribute', () => {
           return setup(`<div md-peekaboo breakAction="show"></div>`).then((api: IPeekabooFixture) => {
             expect(api.peek.breakAction).toBe('show');
           });
-        })));
-        it('should be set by binding', async(inject([], () => {
+        });
+
+        it('should be set by binding', () => {
           return setup(`<div md-peekaboo [breakAction]="hideBinding"></div>`).then((api: IPeekabooFixture) => {
             expect(api.peek.breakAction).toBe('hide');
           });
-        })));
+        });
       });
 
       ['breakXs', 'breakSm', 'breakMd', 'breakLg', 'breakXl'].forEach((size: string) => {
         describe(size, () => {
-          it('should be -1 by default', async(inject([], () => {
+          it('should be -1 by default', () => {
             return setup().then((api: IPeekabooFixture) => {
               expect(api.peek[size]).toBe(-1);
             });
-          })));
-          it('should be set by attribute', async(inject([], () => {
+          });
+
+          it('should be set by attribute', () => {
             return setup(`<div md-peekaboo ${size}="25"></div>`).then((api: IPeekabooFixture) => {
               expect(api.peek[size]).toBe(25);
             });
-          })));
-          it('should be set by binding', async(inject([], () => {
+          });
+
+          it('should be set by binding', () => {
             return setup(`<div md-peekaboo [${size}]="sizeBinding"></div>`).then((api: IPeekabooFixture) => {
               expect(api.peek[size]).toBe(50);
             });
-          })));
-          it('should work with all breakpoint sizes', async(inject([], () => {
+          });
+
+          it('should work with all breakpoint sizes', () => {
             return setup(`<div md-peekaboo [${size}]="sizeBinding"></div>`).then((api: IPeekabooFixture) => {
               MdPeekaboo.SIZES.forEach((s: string) => {
                 api.peek.breakpoint = s;
               });
             });
-          })));
+          });
         });
 
       });
diff --git a/src/components/switch/switch_spec.ts b/src/components/switch/switch_spec.ts
index e258df4f..36f3907d 100644
--- a/src/components/switch/switch_spec.ts
+++ b/src/components/switch/switch_spec.ts
@@ -1,13 +1,6 @@
-import {
-  beforeEach,
-  describe,
-  expect,
-  inject,
-  it,
-  async
-} from "@angular/core/testing";
+import {inject} from "@angular/core/testing";
 import {By} from "@angular/platform-browser";
-import {ComponentFixture, TestComponentBuilder} from "@angular/compiler/testing";
+import {ComponentFixture, TestComponentBuilder} from "@angular/core/testing";
 import {Component, DebugElement} from "@angular/core";
 import {MdSwitch} from "./switch";
 import {componentSanityCheck} from "../../platform/testing/util";
@@ -63,51 +56,56 @@ export function main() {
     }));
 
     describe('md-switch', () => {
-      it('should initialize unchecked', async(() => {
+      it('should initialize unchecked', () => {
         return setup().then((api: ICheckboxFixture) => {
           expect(api.comp.checked).toBe(false);
           api.fixture.destroy();
         });
-      }));
-      it('should set checked from binding', async(() => {
+      });
+
+      it('should set checked from binding', () => {
         return setup(true).then((api: ICheckboxFixture) => {
           expect(api.comp.checked).toBe(true);
         });
-      }));
-      it('should toggle checked value when clicked on', async(() => {
+      });
+
+      it('should toggle checked value when clicked on', () => {
         return setup(true).then((api: ICheckboxFixture) => {
           expect(api.comp.checked).toBe(true);
           api.debug.nativeElement.click();
           expect(api.comp.checked).toBe(false);
         });
-      }));
-      it('should not toggle checked value when disabled and clicked on', async(() => {
+      });
+
+      it('should not toggle checked value when disabled and clicked on', () => {
         return setup(true, true).then((api: ICheckboxFixture) => {
           expect(api.comp.checked).toBe(true);
           api.debug.nativeElement.click();
           expect(api.comp.checked).toBe(true);
           api.fixture.destroy();
         });
-      }));
+      });
+
       describe('Keyboard', () => {
-        it('should toggle when the space key is pressed', async(() => {
+        it('should toggle when the space key is pressed', () => {
           return setup().then((api: ICheckboxFixture) => {
             expect(api.comp.checked).toBe(false);
-            const event = createEvent();
+            let event = createEvent();
             event.keyCode = KeyCodes.SPACE;
             api.debug.triggerEventHandler('keydown', event);
             expect(api.comp.checked).toBe(true);
           });
-        }));
-        it('should not toggle when any other key is pressed', async(() => {
+        });
+
+        it('should not toggle when any other key is pressed', () => {
           return setup().then((api: ICheckboxFixture) => {
             expect(api.comp.checked).toBe(false);
-            const event = createEvent();
+            let event = createEvent();
             event.keyCode = KeyCodes.DOWN;
             api.debug.triggerEventHandler('keydown', event);
             expect(api.comp.checked).toBe(false);
           });
-        }));
+        });
 
       });
     });
diff --git a/src/core/util/ink_spec.ts b/src/core/util/ink_spec.ts
index dd7a7cc6..d8166873 100644
--- a/src/core/util/ink_spec.ts
+++ b/src/core/util/ink_spec.ts
@@ -1,8 +1,7 @@
-import {describe, it, beforeEach, expect, inject, async} from '@angular/core/testing';
+import {inject} from '@angular/core/testing';
 import {MATERIAL_DIRECTIVES} from '../../index';
 import {Component} from '@angular/core';
-import {TestComponentBuilder, ComponentFixture} from '@angular/compiler/testing';
-import {promiseWait} from '../../platform/testing/util';
+import {TestComponentBuilder, ComponentFixture} from '@angular/core/testing';
 import {Ink} from './ink';
 import {By} from "@angular/platform-browser";
 
@@ -20,7 +19,6 @@ export function main() {
 
   describe('Ink', () => {
     let builder: TestComponentBuilder;
-    let _api: ComponentFixture<TestComponent> = null;
 
     function setup(template: string = defaultTemplate): Promise<ComponentFixture<TestComponent>> {
       return builder
@@ -28,7 +26,6 @@ export function main() {
         .createAsync(TestComponent)
         .then((fixture: ComponentFixture<TestComponent>) => {
           fixture.detectChanges();
-          _api = fixture;
           return fixture;
         }).catch(console.error.bind(console));
     }
@@ -37,29 +34,26 @@ export function main() {
       builder = tcb;
     }));
 
-    afterEach(() => {
-      _api.destroy();
-    });
-
     describe('canApply', () => {
-      it('should return true if element does not have md-no-ink attribute', async(() => {
+      it('should return true if element does not have md-no-ink attribute', () => {
         setup(`<div></div>`)
           .then((api: ComponentFixture<TestComponent>) => {
             const el = api.debugElement.query(By.css('div'));
             expect(Ink.canApply(el.nativeElement)).toBe(true);
           });
-      }));
-      it('should return true if element does not have md-no-ink attribute', async(() => {
+      });
+
+      it('should return true if element does not have md-no-ink attribute', () => {
         setup(`<div md-no-ink></div>`)
           .then((api: ComponentFixture<TestComponent>) => {
             const el = api.debugElement.query(By.css('div'));
             expect(Ink.canApply(el.nativeElement)).toBe(false);
           });
-      }));
+      });
     });
 
     describe('ripple', () => {
-      it('should ripple and resolve when the ink animation is done', async(() => {
+      it('should ripple and resolve when the ink animation is done', () => {
         setup(`<div></div>`)
           .then((api: ComponentFixture<TestComponent>) => {
             const el = api.debugElement.query(By.css('div'));
@@ -68,7 +62,7 @@ export function main() {
               Ink.ripple(el.nativeElement, 0, 0);
             });
           });
-      }));
+      });
     });
   });
 }
diff --git a/src/core/util/media_spec.ts b/src/core/util/media_spec.ts
index 1542f9b6..7f99b9ee 100644
--- a/src/core/util/media_spec.ts
+++ b/src/core/util/media_spec.ts
@@ -1,4 +1,4 @@
-import {describe, it, beforeEach, expect, inject} from '@angular/core/testing';
+import {inject} from '@angular/core/testing';
 import {Media} from './media';
 
 export function main() {
diff --git a/src/index.ts b/src/index.ts
index fc50315b..91845804 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,11 +1,6 @@
-import {provide} from "@angular/core";
 import {MdAnchor, MdButton} from "./components/button/button";
 import {MdContent} from "./components/content/content";
-import {
-  MdDataTable,
-  MdDataTableHeaderSelectableRow,
-  MdDataTableSelectableRow
-} from "./components/data-table/index";
+import {MdDataTable, MdDataTableHeaderSelectableRow, MdDataTableSelectableRow} from "./components/data-table/index";
 import {MdDialog, MdDialogTitle, MdDialogActions, MdDialogPortal} from "./components/dialog/index";
 import {MdDivider} from "./components/divider/divider";
 import {MdIcon} from "./components/icon/icon";
@@ -20,17 +15,20 @@ import {
 } from "./components/form/validators";
 import {MdMessage, MdMessages} from "./components/form/messages";
 import {MdList, MdListItem} from "./components/list/list";
-import {MdPagination,
+import {
+  MdPagination,
   MdPaginationControls,
   MdPaginationItemsPerPage,
   MdPaginationRange,
-  PaginationService} from "./components/pagination/index";
+  PaginationService
+} from "./components/pagination/index";
 import {MdPeekaboo} from "./components/peekaboo/peekaboo";
 import {MdSwitch} from "./components/switch/switch";
 import {MdSubheader} from "./components/subheader/subheader";
 import {Media} from "./core/util/media";
 import {ViewportHelper, BrowserViewportHelper, NodeViewportHelper} from "./core/util/viewport";
-import {OVERLAY_CONTAINER_TOKEN, createOverlayContainer} from "@angular2-material/core/overlay/overlay";
+import {OVERLAY_CONTAINER_TOKEN} from "@angular2-material/core/overlay/overlay";
+import {createOverlayContainer} from "@angular2-material/core/overlay/overlay-container";
 import {MdBackdrop} from "./components/backdrop/backdrop";
 
 export * from './components/button/button';
@@ -93,7 +91,7 @@ export const MATERIAL_DIRECTIVES: any[] = [
  * Material Design component providers for use in a Node.JS environment.
  */
 export const MATERIAL_NODE_PROVIDERS: any[] = [
-  provide(ViewportHelper, {useClass: NodeViewportHelper}),
+  {provide: ViewportHelper, useClass: NodeViewportHelper},
   Media,
   PaginationService,
   ...INPUT_VALIDATORS
@@ -104,9 +102,9 @@ export const MATERIAL_NODE_PROVIDERS: any[] = [
  */
 export const MATERIAL_BROWSER_PROVIDERS: any[] = [
   ...MATERIAL_NODE_PROVIDERS,
-  provide(ViewportHelper, {useClass: BrowserViewportHelper}),
+  {provide: ViewportHelper, useClass: BrowserViewportHelper},
   // TODO(jd): should this be here? Or in the example app bootstrap?
-  provide(OVERLAY_CONTAINER_TOKEN, {useValue: createOverlayContainer()}),
+  {provide: OVERLAY_CONTAINER_TOKEN, useValue: createOverlayContainer()},
 ];
 
 
diff --git a/src/platform/testing/bootstrap.ts b/src/platform/testing/bootstrap.ts
index 6c7a268e..395eb7f3 100644
--- a/src/platform/testing/bootstrap.ts
+++ b/src/platform/testing/bootstrap.ts
@@ -2,26 +2,21 @@ declare var System: any;
 declare var Zone: any;
 
 
-import {resetBaseTestProviders, setBaseTestProviders, MockApplicationRef} from "@angular/core/testing";
-import {BROWSER_APP_DYNAMIC_PROVIDERS} from "@angular/platform-browser-dynamic";
-import {
-  TEST_BROWSER_STATIC_PLATFORM_PROVIDERS,
-  ADDITIONAL_TEST_BROWSER_PROVIDERS
-} from "@angular/platform-browser/testing";
+import {resetBaseTestProviders, setBaseTestProviders} from "@angular/core/testing";
+import {BROWSER_APP_COMPILER_PROVIDERS} from "@angular/platform-browser-dynamic";
+import {TEST_BROWSER_DYNAMIC_PLATFORM_PROVIDERS, TEST_BROWSER_DYNAMIC_APPLICATION_PROVIDERS} from "@angular/platform-browser-dynamic/testing";
 import {MATERIAL_BROWSER_PROVIDERS} from "../../index";
 import {TestUrlResolver} from "./test_url_resolver";
 import {UrlResolver} from "@angular/compiler";
-import {provide, ApplicationRef} from "@angular/core";
 
 resetBaseTestProviders();
 setBaseTestProviders(
-  TEST_BROWSER_STATIC_PLATFORM_PROVIDERS,
+  TEST_BROWSER_DYNAMIC_PLATFORM_PROVIDERS,
   [
-    ...BROWSER_APP_DYNAMIC_PROVIDERS,
-    ...ADDITIONAL_TEST_BROWSER_PROVIDERS,
+    ...BROWSER_APP_COMPILER_PROVIDERS,
+    ...TEST_BROWSER_DYNAMIC_APPLICATION_PROVIDERS,
     ...MATERIAL_BROWSER_PROVIDERS,
-    provide(ApplicationRef, {useClass: MockApplicationRef}),
-    provide(UrlResolver, {useValue: new TestUrlResolver()})
+    {provide: UrlResolver, useValue: new TestUrlResolver()}
   ]
 );
 
@@ -42,7 +37,6 @@ export function load(files: string[]): Promise<any[]> {
     }
   });
 
-
   let runTests = (path: string) => {
     return new Promise<void>((resolve, reject) => {
       myZone.run(() => {
diff --git a/src/platform/testing/util.ts b/src/platform/testing/util.ts
index 38e8e7d8..3dcc4d3e 100644
--- a/src/platform/testing/util.ts
+++ b/src/platform/testing/util.ts
@@ -1,6 +1,6 @@
 import {Component} from "@angular/core";
 import {beforeEach, describe, inject, it, async} from "@angular/core/testing";
-import {ComponentFixture, TestComponentBuilder} from "@angular/compiler/testing";
+import {ComponentFixture, TestComponentBuilder} from "@angular/core/testing";
 import {MATERIAL_DIRECTIVES} from "../../index";
 
 export function promiseWait(milliseconds: number = 10): Promise<void> {