Update to Angular Material beta.3

package.json

@@ -16,22 +16,23 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/common": "^2.4.6",
-    "@angular/compiler": "^2.4.6",
-    "@angular/core": "^2.4.6",
-    "@angular/forms": "^2.4.6",
-    "@angular/http": "^2.4.6",
-    "@angular/material": "^2.0.0-beta.1",
-    "@angular/platform-browser": "^2.4.6",
-    "@angular/platform-browser-dynamic": "^2.4.6",
-    "@angular/router": "~3.4.6",
+    "@angular/animations": "^4.0.0",
+    "@angular/common": "^4.0.0",
+    "@angular/compiler": "^4.0.0",
+    "@angular/core": "^4.0.0",
+    "@angular/forms": "^4.0.0",
+    "@angular/http": "^4.0.0",
+    "@angular/material": "^2.0.0-beta.3",
+    "@angular/platform-browser": "^4.0.0",
+    "@angular/platform-browser-dynamic": "^4.0.0",
+    "@angular/router": "~4.0.0",
     "core-js": "^2.4.1",
     "rxjs": "^5.1.0",
-    "zone.js": "^0.7.6"
+    "zone.js": "^0.7.7"
   },
   "devDependencies": {
-    "@angular/cli": "^1.0.0-beta.30",
-    "@angular/compiler-cli": "^2.4.6",
+    "@angular/cli": "^1.0.0",
+    "@angular/compiler-cli": "^4.0.0",
     "@types/jasmine": "^2.5.41",
     "@types/node": "^7.0.5",
     "highlight.js": "^9.9.0",
@@ -46,6 +47,6 @@
     "protractor": "^5.1.1",
     "ts-node": "^2.0.0",
     "tslint": "^4.4.2",
-    "typescript": "~2.0.10"
+    "typescript": "~2.1.1"
   }
 }

src/_app-theme.scss

@@ -1,4 +1,4 @@
-@import '~@angular/material/core/theming/theming';
+@import '~@angular/material/theming';
 @import './app/pages/homepage/homepage-theme';
 @import './app/pages/component-sidenav/component-sidenav-theme';
 @import './app/pages/component-viewer/component-viewer-theme';

src/app/app-module.ts

@@ -1,4 +1,5 @@
 import {BrowserModule} from '@angular/platform-browser';
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import {NgModule} from '@angular/core';
 import {Location, LocationStrategy, PathLocationStrategy} from '@angular/common';
 import {FormsModule} from '@angular/forms';
@@ -35,6 +36,7 @@ import {ComponentPageHeader} from './pages/component-page-header/component-page-
   ],
   imports: [
     BrowserModule,
+    BrowserAnimationsModule,
     ExampleModule,
     SharedModule,
     FormsModule,

src/app/examples/progress-spinner-configurable/progress-spinner-configurable-example.html

@@ -39,11 +39,11 @@ <h2 class="example-h2">Progress circle configuration</h2>
   <md-card-content>
     <h2 class="example-h2">Result</h2>
 
-    <md-progress-circle
+    <md-progress-spinner
         class="example-margin"
         [color]="color"
         [mode]="mode"
         [value]="value">
-    </md-progress-circle>
+    </md-progress-spinner>
   </md-card-content>
 </md-card>

src/app/material-docs-app.ts

@@ -1,5 +1,5 @@
 import {Component, ViewEncapsulation} from '@angular/core';
-import {Router} from '@angular/router';
+import {Router, NavigationStart} from '@angular/router';
 
 
 @Component({
@@ -16,7 +16,7 @@ export class MaterialDocsApp {
   showShadow = false;
 
   constructor(router: Router) {
-    router.events.subscribe(data => {
+    router.events.subscribe((data: NavigationStart) => {
       this.showShadow = data.url.startsWith('/components');
     });
   }

src/app/pages/component-list/component-list.scss

@@ -1,4 +1,3 @@
-@import '~@angular/material/button/button-base';
 @import '../../../styles/constants';
 
 .docs-component-list-category {

src/app/pages/component-sidenav/_component-sidenav-theme.scss

@@ -1,4 +1,4 @@
-@import '~@angular/material/core/theming/theming';
+@import '~@angular/material/theming';
 
 @mixin component-viewer-sidenav-theme($theme) {
   $primary: map-get($theme, primary);

src/app/pages/component-viewer/_component-viewer-theme.scss

@@ -1,4 +1,4 @@
-@import '~@angular/material/core/theming/theming';
+@import '~@angular/material/theming';
 
 @mixin component-viewer-theme($theme) {
   $primary: map-get($theme, primary);

src/app/pages/guide-viewer/guide-viewer.scss

@@ -1,4 +1,4 @@
-@import "~@angular/material/core/style/variables";
+@import "~@angular/material/theming";
 
 /* For desktop, the content should be aligned with the page title. */
 $guide-content-margin-side: 70px;

src/app/shared/example-viewer/example-viewer.html

@@ -26,6 +26,6 @@
   </div>
 
   <div class="docs-example-viewer-body">
-    <template [portalHost]="selectedPortal"></template>
+    <ng-template [portalHost]="selectedPortal"></ng-template>
   </div>
 </div>

src/assets/plunker/examples/autocomplete-overview/autocomplete-overview-example.html

@@ -0,0 +1,9 @@
+<md-input-container>
+  <input mdInput placeholder="State" [mdAutocomplete]="auto" [formControl]="stateCtrl">
+</md-input-container>
+
+<md-autocomplete #auto="mdAutocomplete">
+  <md-option *ngFor="let state of filteredStates | async" [value]="state">
+    {{ state }}
+  </md-option>
+</md-autocomplete>

src/assets/plunker/examples/autocomplete-overview/autocomplete-overview-example.ts

@@ -0,0 +1,78 @@
+import {Component} from '@angular/core';
+import {FormControl} from '@angular/forms';
+import 'rxjs/add/operator/startWith';
+
+@Component({
+  selector: 'autocomplete-overview-example',
+  templateUrl: './autocomplete-overview-example.html',
+})
+export class AutocompleteOverviewExample {
+  stateCtrl: FormControl;
+  filteredStates: any;
+
+  states = [
+    'Alabama',
+    'Alaska',
+    'Arizona',
+    'Arkansas',
+    'California',
+    'Colorado',
+    'Connecticut',
+    'Delaware',
+    'Florida',
+    'Georgia',
+    'Hawaii',
+    'Idaho',
+    'Illinois',
+    'Indiana',
+    'Iowa',
+    'Kansas',
+    'Kentucky',
+    'Louisiana',
+    'Maine',
+    'Maryland',
+    'Massachusetts',
+    'Michigan',
+    'Minnesota',
+    'Mississippi',
+    'Missouri',
+    'Montana',
+    'Nebraska',
+    'Nevada',
+    'New Hampshire',
+    'New Jersey',
+    'New Mexico',
+    'New York',
+    'North Carolina',
+    'North Dakota',
+    'Ohio',
+    'Oklahoma',
+    'Oregon',
+    'Pennsylvania',
+    'Rhode Island',
+    'South Carolina',
+    'South Dakota',
+    'Tennessee',
+    'Texas',
+    'Utah',
+    'Vermont',
+    'Virginia',
+    'Washington',
+    'West Virginia',
+    'Wisconsin',
+    'Wyoming',
+  ];
+
+  constructor() {
+    this.stateCtrl = new FormControl();
+    this.filteredStates = this.stateCtrl.valueChanges
+        .startWith(null)
+        .map(name => this.filterStates(name));
+  }
+
+  filterStates(val: string) {
+    return val ? this.states.filter(s => new RegExp(`^${val}`, 'gi').test(s))
+               : this.states;
+  }
+
+}

src/assets/plunker/examples/progress-spinner-configurable/progress-spinner-configurable-example.html

@@ -39,11 +39,11 @@ <h2 class="example-h2">Progress circle configuration</h2>
   <md-card-content>
     <h2 class="example-h2">Result</h2>
 
-    <md-progress-circle
+    <md-progress-spinner
         class="example-margin"
         [color]="color"
         [mode]="mode"
         [value]="value">
-    </md-progress-circle>
+    </md-progress-spinner>
   </md-card-content>
 </md-card>

src/assets/plunker/examples/snack-bar-component/snack-bar-component-example.css

@@ -0,0 +1,3 @@
+.example-pizza-party {
+  color: hotpink;
+}

src/assets/plunker/examples/snack-bar-component/snack-bar-component-example.ts

@@ -20,6 +20,6 @@ export class SnackBarComponentExample {
 @Component({
   selector: 'snack-bar-component-example-snack',
   templateUrl: './snack-bar-component-example-snack.html',
-  styleUrls: ['./snack-bar-component-example-snack.css'],
+  styleUrls: ['./snack-bar-component-example.css'],
 })
 export class PizzaPartyComponent {}

src/main.scss

@@ -1,4 +1,4 @@
-@import '~@angular/material/core/theming/all-theme';
+@import '~@angular/material/theming';
 @import './app-theme';
 @import './styles/typography';
 

src/styles/_typography-theme.scss

@@ -1,4 +1,4 @@
-@import '~@angular/material/core/theming/theming';
+@import '~@angular/material/theming';
 
 @mixin docs-site-typography-theme($theme) {
   $primary: map-get($theme, primary);