chore(material): clean up old workarounds with new features.

modules/examples/src/material/button/index.ts

@@ -1,11 +1,17 @@
-import {bootstrap, Component, View, NgFor} from 'angular2/bootstrap';
+import {bootstrap, Component, View, NgFor, ViewEncapsulation} from 'angular2/bootstrap';
 import {MdButton, MdAnchor} from 'angular2_material/src/components/button/button';
 import {UrlResolver} from 'angular2/src/services/url_resolver';
 import {commonDemoSetup, DemoUrlResolver} from '../demo_common';
 import {bind} from 'angular2/di';
 
-@Component({selector: 'demo-app'})
-@View({templateUrl: './demo_app.html', directives: [MdButton, MdAnchor, NgFor]})
+@Component({
+  selector: 'demo-app',
+})
+@View({
+  templateUrl: './demo_app.html',
+  directives: [MdButton, MdAnchor, NgFor],
+  encapsulation: ViewEncapsulation.NONE
+})
 class DemoApp {
   previousClick: string;
   action: string;

modules/examples/src/material/checkbox/index.ts

@@ -1,11 +1,17 @@
-import {bootstrap, Component, Directive, View} from 'angular2/bootstrap';
+import {bootstrap, Component, Directive, View, ViewEncapsulation} from 'angular2/bootstrap';
 import {MdCheckbox} from 'angular2_material/src/components/checkbox/checkbox';
 import {UrlResolver} from 'angular2/src/services/url_resolver';
 import {commonDemoSetup, DemoUrlResolver} from '../demo_common';
 import {bind} from 'angular2/di';
 
-@Component({selector: 'demo-app'})
-@View({templateUrl: './demo_app.html', directives: [MdCheckbox]})
+@Component({
+  selector: 'demo-app',
+})
+@View({
+  templateUrl: './demo_app.html',
+  directives: [MdCheckbox],
+  encapsulation: ViewEncapsulation.NONE
+})
 class DemoApp {
   toggleCount: number;
 

modules/examples/src/material/dialog/index.ts

@@ -1,4 +1,11 @@
-import {bootstrap, ElementRef, ComponentRef, Component, View} from 'angular2/bootstrap';
+import {
+  bootstrap,
+  ElementRef,
+  ComponentRef,
+  Component,
+  View,
+  ViewEncapsulation
+} from 'angular2/bootstrap';
 import {
   MdDialog,
   MdDialogRef,
@@ -17,6 +24,7 @@ import {isPresent} from 'angular2/src/facade/lang';
 @View({
   templateUrl: './demo_app.html',
   directives: [],
+  encapsulation: ViewEncapsulation.NONE,
 })
 class DemoApp {
   dialog: MdDialog;
@@ -62,6 +70,7 @@ class DemoApp {
   properties: ['numCoconuts'],
 })
 @View({
+  encapsulation: ViewEncapsulation.NONE,
   template: `
     <h2>This is the dialog content</h2>
     <p>There are {{numCoconuts}} coconuts.</p>

modules/examples/src/material/grid_list/index.ts

@@ -1,11 +1,17 @@
-import {bootstrap, Component, View} from 'angular2/bootstrap';
+import {bootstrap, Component, View, ViewEncapsulation} from 'angular2/bootstrap';
 import {MdGridList, MdGridTile} from 'angular2_material/src/components/grid_list/grid_list';
 import {UrlResolver} from 'angular2/src/services/url_resolver';
 import {commonDemoSetup, DemoUrlResolver} from '../demo_common';
 import {bind} from 'angular2/di';
 
-@Component({selector: 'demo-app'})
-@View({templateUrl: './demo_app.html', directives: [MdGridList, MdGridTile]})
+@Component({
+  selector: 'demo-app',
+})
+@View({
+  templateUrl: './demo_app.html',
+  directives: [MdGridList, MdGridTile],
+  encapsulation: ViewEncapsulation.NONE,
+})
 class DemoApp {
   tile3RowSpan: number;
   tile3ColSpan: number;

modules/examples/src/material/input/index.ts

@@ -1,11 +1,15 @@
-import {bootstrap, Component, View} from 'angular2/bootstrap';
+import {bootstrap, Component, View, ViewEncapsulation} from 'angular2/bootstrap';
 import {MdInputContainer, MdInput} from 'angular2_material/src/components/input/input';
 import {UrlResolver} from 'angular2/src/services/url_resolver';
 import {commonDemoSetup, DemoUrlResolver} from '../demo_common';
 import {bind} from 'angular2/di';
 
 @Component({selector: 'demo-app'})
-@View({templateUrl: './demo_app.html', directives: [MdInputContainer, MdInput]})
+@View({
+  templateUrl: './demo_app.html',
+  directives: [MdInputContainer, MdInput],
+  encapsulation: ViewEncapsulation.NONE
+})
 class DemoApp {
   constructor() {}
 }

modules/examples/src/material/progress-linear/demo_app.html

@@ -1,36 +1,34 @@
-<link>
-
 <div style="width: 500px;">
   <h2>Progress-linear demo</h2>
 
   <p>
     Determinate: primary
-    <md-progress-linear md-mode="determinate" [value]="progress" class="md-accent">
+    <md-progress-linear mode="determinate" [value]="progress" class="md-accent">
     </md-progress-linear>
   </p>
 
   <p>
     Determinate: accent
-    <md-progress-linear md-mode="determinate" [value]="progress" class="md-primary">
+    <md-progress-linear mode="determinate" [value]="progress" class="md-primary">
     </md-progress-linear>
   </p>
 
   <p>
     Buffer
-    <md-progress-linear md-mode="buffer"
+    <md-progress-linear mode="buffer"
         [value]="progress" [buffer-value]="progress + (200 / progress)" class="md-warn">
     </md-progress-linear>
   </p>
 
   <p>
     Indeterminate
-    <md-progress-linear md-mode="indeterminate" class="md-primary">
+    <md-progress-linear mode="indeterminate" class="md-primary">
     </md-progress-linear>
   </p>
 
   <p>
     Query
-    <md-progress-linear md-mode="query" class="md-accent">
+    <md-progress-linear mode="query" class="md-accent">
     </md-progress-linear>
   </p>
 

modules/examples/src/material/progress-linear/index.ts

@@ -1,11 +1,17 @@
-import {bootstrap, Component, View} from 'angular2/bootstrap';
+import {bootstrap, Component, View, ViewEncapsulation} from 'angular2/bootstrap';
 import {MdProgressLinear} from 'angular2_material/src/components/progress-linear/progress_linear';
 import {UrlResolver} from 'angular2/src/services/url_resolver';
 import {commonDemoSetup, DemoUrlResolver} from '../demo_common';
 import {bind} from 'angular2/di';
 
-@Component({selector: 'demo-app'})
-@View({templateUrl: './demo_app.html', directives: [MdProgressLinear]})
+@Component({
+  selector: 'demo-app',
+})
+@View({
+  templateUrl: './demo_app.html',
+  directives: [MdProgressLinear],
+  encapsulation: ViewEncapsulation.NONE,
+})
 class DemoApp {
   progress: number;
 

modules/examples/src/material/radio/index.ts

@@ -1,12 +1,19 @@
-import {bootstrap, Component, View} from 'angular2/bootstrap';
+import {bootstrap, Component, View, ViewEncapsulation} from 'angular2/bootstrap';
 import {MdRadioButton, MdRadioGroup} from 'angular2_material/src/components/radio/radio_button';
 import {MdRadioDispatcher} from 'angular2_material/src/components/radio/radio_dispatcher';
 import {UrlResolver} from 'angular2/src/services/url_resolver';
 import {commonDemoSetup, DemoUrlResolver} from '../demo_common';
 import {bind} from 'angular2/di';
 
-@Component({selector: 'demo-app', viewBindings: [MdRadioDispatcher]})
-@View({templateUrl: './demo_app.html', directives: [MdRadioGroup, MdRadioButton]})
+@Component({
+  selector: 'demo-app',
+  viewBindings: [MdRadioDispatcher],
+})
+@View({
+  templateUrl: './demo_app.html',
+  directives: [MdRadioGroup, MdRadioButton],
+  encapsulation: ViewEncapsulation.NONE,
+})
 class DemoApp {
   thirdValue;
   groupValueChangeCount;

modules/examples/src/material/switcher/index.ts

@@ -1,11 +1,17 @@
-import {bootstrap, Component, View} from 'angular2/bootstrap';
+import {bootstrap, Component, View, ViewEncapsulation} from 'angular2/bootstrap';
 import {MdSwitch} from 'angular2_material/src/components/switcher/switch';
 import {UrlResolver} from 'angular2/src/services/url_resolver';
 import {commonDemoSetup, DemoUrlResolver} from '../demo_common';
 import {bind} from 'angular2/di';
 
-@Component({selector: 'demo-app'})
-@View({templateUrl: './demo_app.html', directives: [MdSwitch]})
+@Component({
+  selector: 'demo-app',
+})
+@View({
+  templateUrl: './demo_app.html',
+  directives: [MdSwitch],
+  encapsulation: ViewEncapsulation.NONE,
+})
 class DemoApp {
   toggleCount: number;