diff --git a/src/components/checkbox/checkbox.ts b/src/components/checkbox/checkbox.ts
index 76e2efabe6b..e343466a5d9 100644
--- a/src/components/checkbox/checkbox.ts
+++ b/src/components/checkbox/checkbox.ts
@@ -22,7 +22,7 @@ let nextId = 0;
  * Provider Expression that allows md-checkbox to register as a ControlValueAccessor. This allows it
  * to support [(ngModel)] and ngControl.
  */
-const MD_CHECKBOX_CONTROL_VALUE_ACCESSOR = new Provider(
+export const MD_CHECKBOX_CONTROL_VALUE_ACCESSOR = new Provider(
     NG_VALUE_ACCESSOR, {
       useExisting: forwardRef(() => MdCheckbox),
       multi: true
diff --git a/src/components/input/input.ts b/src/components/input/input.ts
index 5fedec0fb5e..6dda9e0ca65 100644
--- a/src/components/input/input.ts
+++ b/src/components/input/input.ts
@@ -18,7 +18,9 @@ import {
 } from '@angular/core';
 import {
   NG_VALUE_ACCESSOR,
-  ControlValueAccessor
+  ControlValueAccessor,
+  NgModel,
+  NgIf,
 } from '@angular/common';
 import {BooleanFieldValue} from '@angular2-material/core/annotations/field-value';
 import {MdError} from '@angular2-material/core/errors/error';
@@ -27,7 +29,7 @@ import {Observable} from 'rxjs/Observable';
 
 const noop = () => {};
 
-const MD_INPUT_CONTROL_VALUE_ACCESSOR = new Provider(NG_VALUE_ACCESSOR, {
+export const MD_INPUT_CONTROL_VALUE_ACCESSOR = new Provider(NG_VALUE_ACCESSOR, {
   useExisting: forwardRef(() => MdInput),
   multi: true
 });
@@ -97,6 +99,7 @@ export class MdHint {
   templateUrl: 'input.html',
   styleUrls: ['input.css'],
   providers: [MD_INPUT_CONTROL_VALUE_ACCESSOR],
+  directives: [NgIf, NgModel],
   host: {'(click)' : 'focus()'}
 })
 export class MdInput implements ControlValueAccessor, AfterContentInit, OnChanges {
diff --git a/src/components/progress-bar/progress-bar.ts b/src/components/progress-bar/progress-bar.ts
index 89dc3314fe0..fac375e88c1 100644
--- a/src/components/progress-bar/progress-bar.ts
+++ b/src/components/progress-bar/progress-bar.ts
@@ -4,7 +4,7 @@ import {
     HostBinding,
     Input,
 } from '@angular/core';
-
+import {NgStyle} from '@angular/common';
 
 // TODO(josephperrott): Benchpress tests.
 // TODO(josephperrott): Add ARIA attributes for progressbar "for".
@@ -24,6 +24,7 @@ import {
   templateUrl: 'progress-bar.html',
   styleUrls: ['progress-bar.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  directives: [NgStyle],
 })
 export class MdProgressBar {
   /** Value of the progressbar. Defaults to zero. Mirrored to aria-valuenow. */
diff --git a/src/components/radio/radio.ts b/src/components/radio/radio.ts
index 9c15fb3a01a..deecbe94f3e 100644
--- a/src/components/radio/radio.ts
+++ b/src/components/radio/radio.ts
@@ -34,7 +34,7 @@ export {
  * Provider Expression that allows md-radio-group to register as a ControlValueAccessor. This
  * allows it to support [(ngModel)] and ngControl.
  */
-const MD_RADIO_GROUP_CONTROL_VALUE_ACCESSOR = new Provider(
+export const MD_RADIO_GROUP_CONTROL_VALUE_ACCESSOR = new Provider(
     NG_VALUE_ACCESSOR, {
       useExisting: forwardRef(() => MdRadioGroup),
       multi: true
diff --git a/src/components/sidenav/sidenav.ts b/src/components/sidenav/sidenav.ts
index 295e60486b9..0b24887e487 100644
--- a/src/components/sidenav/sidenav.ts
+++ b/src/components/sidenav/sidenav.ts
@@ -12,6 +12,7 @@ import {
     EventEmitter,
     Renderer
 } from '@angular/core';
+import {NgStyle} from '@angular/common';
 import {Dir} from '@angular2-material/core/rtl/dir';
 import {PromiseCompleter} from '@angular2-material/core/async/promise-completer';
 import {MdError} from '@angular2-material/core/errors/error';
@@ -231,7 +232,7 @@ export class MdSidenav {
   // Do not use ChangeDetectionStrategy.OnPush. It does not work for this component because
   // technically it is a sibling of MdSidenav (on the content tree) and isn't updated when MdSidenav
   // changes its state.
-  directives: [MdSidenav],
+  directives: [MdSidenav, NgStyle],
   templateUrl: 'sidenav.html',
   styleUrls: [
     'sidenav.css',
diff --git a/src/components/tabs/tabs.ts b/src/components/tabs/tabs.ts
index 073cc47f422..e548e770dfe 100644
--- a/src/components/tabs/tabs.ts
+++ b/src/components/tabs/tabs.ts
@@ -6,10 +6,11 @@ import {
     Output,
     ViewChildren,
     NgZone,
-    EventEmitter
+    EventEmitter,
+    QueryList,
+    ContentChildren
 } from '@angular/core';
-import {QueryList} from '@angular/core';
-import {ContentChildren} from '@angular/core';
+import {NgIf, NgFor} from '@angular/common';
 import {PortalHostDirective} from '@angular2-material/core/portal/portal-directives';
 import {MdTabLabel} from './tab-label';
 import {MdTabContent} from './tab-content';
@@ -45,7 +46,7 @@ export class MdTab {
   selector: 'md-tab-group',
   templateUrl: 'tab-group.html',
   styleUrls: ['tab-group.css'],
-  directives: [PortalHostDirective, MdTabLabelWrapper, MdInkBar],
+  directives: [PortalHostDirective, MdTabLabelWrapper, MdInkBar, NgIf, NgFor],
 })
 export class MdTabGroup {
   /** @internal */
diff --git a/src/core/a11y/live-announcer.ts b/src/core/a11y/live-announcer.ts
index 8af32e027ad..fae1adb6b9b 100644
--- a/src/core/a11y/live-announcer.ts
+++ b/src/core/a11y/live-announcer.ts
@@ -14,7 +14,11 @@ export class MdLiveAnnouncer {
 
   private _liveElement: Element;
 
-  constructor(@Optional() @Inject(LIVE_ANNOUNCER_ELEMENT_TOKEN) elementToken: Element) {
+  constructor(@Optional() @Inject(LIVE_ANNOUNCER_ELEMENT_TOKEN) elementToken: any) {
+
+    // We inject the live element as `any` because the constructor signature cannot reference
+    // browser globals (HTMLElement) on non-browser environments, since having a class decorator
+    // causes TypeScript to preserve the constructor signature types.
     this._liveElement = elementToken || this._createLiveElement();
   }
 
diff --git a/src/core/overlay/overlay.ts b/src/core/overlay/overlay.ts
index 6ab20397dd8..3247f4bbf22 100644
--- a/src/core/overlay/overlay.ts
+++ b/src/core/overlay/overlay.ts
@@ -32,10 +32,17 @@ let defaultState = new OverlayState();
  */
  @Injectable()
 export class Overlay {
+  private _overlayContainerElement: HTMLElement;
+
   constructor(
-      @Inject(OVERLAY_CONTAINER_TOKEN) private _overlayContainerElement: HTMLElement,
+      @Inject(OVERLAY_CONTAINER_TOKEN) overlayContainerElement: any,
       private _componentResolver: ComponentResolver,
       private _positionBuilder: OverlayPositionBuilder) {
+
+    // We inject the container as `any` because the constructor signature cannot reference
+    // browser globals (HTMLElement) on non-browser environments, since having a class decorator
+    // causes TypeScript to preserve the constructor signature types.
+    this._overlayContainerElement = overlayContainerElement;
   }
 
   /**
diff --git a/src/demo-app/checkbox/checkbox-demo.ts b/src/demo-app/checkbox/checkbox-demo.ts
index cd578f020ce..af331d4e91f 100644
--- a/src/demo-app/checkbox/checkbox-demo.ts
+++ b/src/demo-app/checkbox/checkbox-demo.ts
@@ -1,8 +1,8 @@
 import {Component} from '@angular/core';
-import {FORM_DIRECTIVES} from '@angular/common';
+import {NgFor, FORM_DIRECTIVES} from '@angular/common';
 import {MdCheckbox} from '@angular2-material/checkbox/checkbox';
 
-interface Task {
+export interface Task {
   name: string;
   completed: boolean;
   subtasks?: Task[];
@@ -17,9 +17,9 @@ interface Task {
     }
   `],
   templateUrl: 'nested-checklist.html',
-  directives: [MdCheckbox]
+  directives: [MdCheckbox, NgFor]
 })
-class MdCheckboxDemoNestedChecklist {
+export class MdCheckboxDemoNestedChecklist {
   tasks: Task[] = [
     {
       name: 'Reminders',
diff --git a/src/demo-app/grid-list/grid-list-demo.ts b/src/demo-app/grid-list/grid-list-demo.ts
index bb1ead3ad70..0f078184375 100644
--- a/src/demo-app/grid-list/grid-list-demo.ts
+++ b/src/demo-app/grid-list/grid-list-demo.ts
@@ -1,4 +1,5 @@
 import {Component} from '@angular/core';
+import {NgFor, FORM_DIRECTIVES} from '@angular/common';
 import {MD_GRID_LIST_DIRECTIVES} from '@angular2-material/grid-list/grid-list';
 import {MdButton} from '@angular2-material/button/button';
 import {MD_CARD_DIRECTIVES} from '@angular2-material/card/card';
@@ -9,7 +10,14 @@ import {MdIcon, MdIconRegistry} from '@angular2-material/icon/icon';
   selector: 'grid-list-demo',
   templateUrl: 'grid-list-demo.html',
   styleUrls: ['grid-list-demo.css'],
-  directives: [MD_GRID_LIST_DIRECTIVES, MdButton, MD_CARD_DIRECTIVES, MdIcon],
+  directives: [
+    MD_GRID_LIST_DIRECTIVES,
+    MdButton,
+    MD_CARD_DIRECTIVES,
+    MdIcon,
+    FORM_DIRECTIVES,
+    NgFor,
+  ],
   providers: [MdIconRegistry]
 })
 export class GridListDemo {
diff --git a/src/demo-app/input/input-demo.ts b/src/demo-app/input/input-demo.ts
index 0be50ac3631..aaa0a75c5d9 100644
--- a/src/demo-app/input/input-demo.ts
+++ b/src/demo-app/input/input-demo.ts
@@ -1,4 +1,5 @@
 import {Component} from '@angular/core';
+import {FORM_DIRECTIVES, NgFor} from '@angular/common';
 import {MD_INPUT_DIRECTIVES} from '@angular2-material/input/input';
 import {MdButton} from '@angular2-material/button/button';
 import {MdCard} from '@angular2-material/card/card';
@@ -14,7 +15,16 @@ let max = 5;
   selector: 'input-demo',
   templateUrl: 'input-demo.html',
   styleUrls: ['input-demo.css'],
-  directives: [MdCard, MdCheckbox, MdButton, MdIcon, MdToolbar, MD_INPUT_DIRECTIVES]
+  directives: [
+    MdCard,
+    MdCheckbox,
+    MdButton,
+    MdIcon,
+    MdToolbar,
+    MD_INPUT_DIRECTIVES,
+    FORM_DIRECTIVES,
+    NgFor,
+  ]
 })
 export class InputDemo {
   dividerColor: boolean;
diff --git a/src/demo-app/list/list-demo.ts b/src/demo-app/list/list-demo.ts
index 0c4791b3d8a..daad2055caa 100644
--- a/src/demo-app/list/list-demo.ts
+++ b/src/demo-app/list/list-demo.ts
@@ -1,4 +1,5 @@
 import {Component} from '@angular/core';
+import {NgIf, NgFor} from '@angular/common';
 import {MdButton} from '@angular2-material/button/button';
 import {MD_LIST_DIRECTIVES} from '@angular2-material/list/list';
 import {MdIcon} from '@angular2-material/icon/icon';
@@ -8,7 +9,7 @@ import {MdIcon} from '@angular2-material/icon/icon';
   selector: 'list-demo',
   templateUrl: 'list-demo.html',
   styleUrls: ['list-demo.css'],
-  directives: [MD_LIST_DIRECTIVES, MdButton, MdIcon]
+  directives: [MD_LIST_DIRECTIVES, MdButton, MdIcon, NgIf, NgFor]
 })
 export class ListDemo {
   items: string[] = [
diff --git a/src/demo-app/overlay/overlay-demo.ts b/src/demo-app/overlay/overlay-demo.ts
index ecf3bf01165..f23ac47e96f 100644
--- a/src/demo-app/overlay/overlay-demo.ts
+++ b/src/demo-app/overlay/overlay-demo.ts
@@ -6,6 +6,7 @@ import {
     ViewChild,
     ViewContainerRef
 } from '@angular/core';
+import {NgIf} from '@angular/common';
 import {
     Overlay,
     OverlayState,
@@ -24,7 +25,7 @@ import {
   selector: 'overlay-demo',
   templateUrl: 'overlay-demo.html',
   styleUrls: ['overlay-demo.css'],
-  directives: [PORTAL_DIRECTIVES, OVERLAY_DIRECTIVES],
+  directives: [PORTAL_DIRECTIVES, OVERLAY_DIRECTIVES, NgIf],
   providers: [OVERLAY_PROVIDERS],
   encapsulation: ViewEncapsulation.None,
 })
diff --git a/src/demo-app/portal/portal-demo.ts b/src/demo-app/portal/portal-demo.ts
index 759c398a6e6..7006da54d75 100644
--- a/src/demo-app/portal/portal-demo.ts
+++ b/src/demo-app/portal/portal-demo.ts
@@ -1,4 +1,5 @@
 import {Component, ViewChildren, QueryList} from '@angular/core';
+import {NgFor} from '@angular/common';
 import {
     Portal,
     ComponentPortal,
@@ -12,7 +13,7 @@ import {
   selector: 'portal-demo',
   templateUrl: 'portal-demo.html',
   styleUrls: ['portal-demo.css'],
-  directives: [TemplatePortalDirective, PortalHostDirective]
+  directives: [TemplatePortalDirective, PortalHostDirective, NgFor]
 })
 export class PortalDemo {
   @ViewChildren(TemplatePortalDirective) templatePortals: QueryList<Portal<any>>;
diff --git a/src/demo-app/radio/radio-demo.ts b/src/demo-app/radio/radio-demo.ts
index 910683caeef..944192fdc00 100644
--- a/src/demo-app/radio/radio-demo.ts
+++ b/src/demo-app/radio/radio-demo.ts
@@ -1,6 +1,7 @@
 import {Component} from '@angular/core';
+import {FORM_DIRECTIVES, NgFor} from '@angular/common';
 import {MdCheckbox} from '@angular2-material/checkbox/checkbox';
-import {MdRadioButton, MdRadioGroup} from '@angular2-material/radio/radio';
+import {MD_RADIO_DIRECTIVES} from '@angular2-material/radio/radio';
 import {
   MdUniqueSelectionDispatcher
 } from '@angular2-material/core/coordination/unique-selection-dispatcher';
@@ -11,7 +12,7 @@ import {
   templateUrl: 'radio-demo.html',
   styleUrls: ['radio-demo.css'],
   providers: [MdUniqueSelectionDispatcher],
-  directives: [MdCheckbox, MdRadioButton, MdRadioGroup]
+  directives: [MdCheckbox, MD_RADIO_DIRECTIVES, FORM_DIRECTIVES, NgFor]
 })
 export class RadioDemo {
   isDisabled: boolean = false;
diff --git a/src/demo-app/slide-toggle/slide-toggle-demo.ts b/src/demo-app/slide-toggle/slide-toggle-demo.ts
index 47e1a27757a..3ce42bddd31 100644
--- a/src/demo-app/slide-toggle/slide-toggle-demo.ts
+++ b/src/demo-app/slide-toggle/slide-toggle-demo.ts
@@ -1,4 +1,5 @@
 import {Component} from '@angular/core';
+import {FORM_DIRECTIVES} from '@angular/common';
 import {MdSlideToggle} from '@angular2-material/slide-toggle/slide-toggle';
 
 @Component({
@@ -6,6 +7,6 @@ import {MdSlideToggle} from '@angular2-material/slide-toggle/slide-toggle';
   selector: 'switch-demo',
   templateUrl: 'slide-toggle-demo.html',
   styleUrls: ['slide-toggle-demo.css'],
-  directives: [MdSlideToggle]
+  directives: [MdSlideToggle, FORM_DIRECTIVES]
 })
 export class SlideToggleDemo {}
diff --git a/src/demo-app/tabs/tab-group-demo.ts b/src/demo-app/tabs/tab-group-demo.ts
index b61851951bf..bac30be2e98 100644
--- a/src/demo-app/tabs/tab-group-demo.ts
+++ b/src/demo-app/tabs/tab-group-demo.ts
@@ -1,4 +1,5 @@
 import {Component, ViewEncapsulation} from '@angular/core';
+import {FORM_DIRECTIVES, NgIf, NgFor, AsyncPipe} from '@angular/common';
 import {MD_TABS_DIRECTIVES} from '@angular2-material/tabs/tabs';
 import {MdToolbar} from '@angular2-material/toolbar/toolbar';
 import {MdInput} from '@angular2-material/input/input';
@@ -9,7 +10,8 @@ import {Observable} from 'rxjs/Observable';
   selector: 'tab-group-demo',
   templateUrl: 'tab-group-demo.html',
   styleUrls: ['tab-group-demo.css'],
-  directives: [MD_TABS_DIRECTIVES, MdToolbar, MdInput],
+  directives: [MD_TABS_DIRECTIVES, MdToolbar, MdInput, NgIf, FORM_DIRECTIVES, NgFor],
+  pipes: [AsyncPipe],
   encapsulation: ViewEncapsulation.None,
 })
 export class TabsDemo {
diff --git a/src/demo-app/tsconfig.json b/src/demo-app/tsconfig.json
index 505c35e4ff0..7259b770083 100644
--- a/src/demo-app/tsconfig.json
+++ b/src/demo-app/tsconfig.json
@@ -26,6 +26,10 @@
       ]
     }
   },
+  "angularCompilerOptions": {
+    "genDir": "../../dist",
+    "debug": true
+  },
   "files": [
     "main.ts",
     "typings.d.ts"