From b0d6297ff5f5011eb94a2c6ea46827348ac5fd6a Mon Sep 17 00:00:00 2001
From: Fabrizio Fortunato <fortunatof@ryanair.com>
Date: Sat, 14 Oct 2017 22:08:12 +0200
Subject: [PATCH] feat(material): Upgrade @angular/material to v 2.0.0-beta.12

Angular material removed the global MaterialModule all the
components needs to be imported individually.

Fixes #448
---
 e2e/app.po.ts                                 |  2 +-
 example-app/app/auth/auth.module.ts           |  2 +-
 .../login-form.component.spec.ts.snap         | 90 +++++++++----------
 .../auth/components/login-form.component.ts   | 41 ++++-----
 .../login-page.component.spec.ts.snap         | 88 +++++++++---------
 .../containers/login-page.component.spec.ts   |  6 +-
 example-app/app/books/books.module.ts         |  2 +-
 .../app/books/components/book-authors.ts      |  2 +-
 .../app/books/components/book-detail.ts       | 40 ++++-----
 .../app/books/components/book-preview.ts      | 49 ++++++----
 .../app/books/components/book-search.ts       | 39 ++++----
 example-app/app/books/components/index.ts     |  2 +-
 .../app/books/containers/collection-page.ts   |  8 +-
 example-app/app/core/components/layout.ts     |  6 +-
 example-app/app/core/components/nav-item.ts   |  8 +-
 example-app/app/core/components/sidenav.ts    | 10 +--
 example-app/app/core/components/toolbar.ts    |  8 +-
 .../app/core/containers/not-found-page.ts     | 16 ++--
 example-app/app/core/core.module.ts           |  2 +-
 example-app/app/material/index.ts             |  1 +
 example-app/app/material/material.module.ts   | 36 ++++++++
 example-app/styles.css                        |  5 ++
 package.json                                  |  6 +-
 setup-jest.ts                                 |  8 +-
 yarn.lock                                     | 12 +--
 25 files changed, 271 insertions(+), 218 deletions(-)
 create mode 100644 example-app/app/material/index.ts
 create mode 100644 example-app/app/material/material.module.ts

diff --git a/e2e/app.po.ts b/e2e/app.po.ts
index af4d72e7be..40338ebb8d 100644
--- a/e2e/app.po.ts
+++ b/e2e/app.po.ts
@@ -6,6 +6,6 @@ export class ExampleAppPage {
   }
 
   getAppDescription() {
-    return element(by.css('md-toolbar-row')).getText();
+    return element(by.css('mat-toolbar-row')).getText();
   }
 }
diff --git a/example-app/app/auth/auth.module.ts b/example-app/app/auth/auth.module.ts
index fe57a360d7..d4ac462489 100644
--- a/example-app/app/auth/auth.module.ts
+++ b/example-app/app/auth/auth.module.ts
@@ -2,7 +2,6 @@ import { NgModule, ModuleWithProviders } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';
 import { ReactiveFormsModule } from '@angular/forms';
-import { MaterialModule } from '@angular/material';
 import { StoreModule } from '@ngrx/store';
 import { EffectsModule } from '@ngrx/effects';
 import { LoginPageComponent } from './containers/login-page.component';
@@ -12,6 +11,7 @@ import { AuthService } from './services/auth.service';
 import { AuthGuard } from './services/auth-guard.service';
 import { AuthEffects } from './effects/auth.effects';
 import { reducers } from './reducers';
+import { MaterialModule } from '../material';
 
 export const COMPONENTS = [LoginPageComponent, LoginFormComponent];
 
diff --git a/example-app/app/auth/components/__snapshots__/login-form.component.spec.ts.snap b/example-app/app/auth/components/__snapshots__/login-form.component.spec.ts.snap
index 6c03296a87..ae3bd622ff 100644
--- a/example-app/app/auth/components/__snapshots__/login-form.component.spec.ts.snap
+++ b/example-app/app/auth/components/__snapshots__/login-form.component.spec.ts.snap
@@ -6,19 +6,19 @@ exports[`Login Page should compile 1`] = `
   submitted={[Function EventEmitter]}
 >
   
-      <md-card
+      <mat-card
     _ngcontent-c0=""
   >
     
         
-    <md-card-title
+    <mat-card-title
       _ngcontent-c0=""
     >
       Login
-    </md-card-title>
+    </mat-card-title>
     
         
-    <md-card-content
+    <mat-card-content
       _ngcontent-c0=""
     >
       
@@ -36,7 +36,7 @@ exports[`Login Page should compile 1`] = `
         >
           
               
-          <md-input-container
+          <mat-input-container
             _ngcontent-c0=""
           >
             
@@ -45,14 +45,14 @@ exports[`Login Page should compile 1`] = `
               _ngcontent-c0=""
               class="ng-untouched ng-pristine ng-valid"
               formcontrolname="username"
-              mdinput=""
+              matinput=""
               ng-reflect-name="username"
               placeholder="Username"
               type="text"
             />
             
               
-          </md-input-container>
+          </mat-input-container>
           
             
         </p>
@@ -64,7 +64,7 @@ exports[`Login Page should compile 1`] = `
         >
           
               
-          <md-input-container
+          <mat-input-container
             _ngcontent-c0=""
           >
             
@@ -73,14 +73,14 @@ exports[`Login Page should compile 1`] = `
               _ngcontent-c0=""
               class="ng-untouched ng-pristine ng-valid"
               formcontrolname="password"
-              mdinput=""
+              matinput=""
               ng-reflect-name="password"
               placeholder="Password"
               type="password"
             />
             
               
-          </md-input-container>
+          </mat-input-container>
           
             
         </p>
@@ -88,8 +88,8 @@ exports[`Login Page should compile 1`] = `
   
             
         
-                  
-          
+        
+  
             
         <p
           _ngcontent-c0=""
@@ -99,7 +99,7 @@ exports[`Login Page should compile 1`] = `
               
           <button
             _ngcontent-c0=""
-            md-button=""
+            mat-button=""
             type="submit"
           >
             Login
@@ -113,10 +113,10 @@ exports[`Login Page should compile 1`] = `
       </form>
       
         
-    </md-card-content>
+    </mat-card-content>
     
       
-  </md-card>
+  </mat-card>
     
 </bc-login-form>
 `;
@@ -127,19 +127,19 @@ exports[`Login Page should disable the form if pending 1`] = `
   submitted={[Function EventEmitter]}
 >
   
-      <md-card
+      <mat-card
     _ngcontent-c1=""
   >
     
         
-    <md-card-title
+    <mat-card-title
       _ngcontent-c1=""
     >
       Login
-    </md-card-title>
+    </mat-card-title>
     
         
-    <md-card-content
+    <mat-card-content
       _ngcontent-c1=""
     >
       
@@ -157,7 +157,7 @@ exports[`Login Page should disable the form if pending 1`] = `
         >
           
               
-          <md-input-container
+          <mat-input-container
             _ngcontent-c1=""
           >
             
@@ -167,14 +167,14 @@ exports[`Login Page should disable the form if pending 1`] = `
               class="ng-untouched ng-pristine"
               disabled=""
               formcontrolname="username"
-              mdinput=""
+              matinput=""
               ng-reflect-name="username"
               placeholder="Username"
               type="text"
             />
             
               
-          </md-input-container>
+          </mat-input-container>
           
             
         </p>
@@ -186,7 +186,7 @@ exports[`Login Page should disable the form if pending 1`] = `
         >
           
               
-          <md-input-container
+          <mat-input-container
             _ngcontent-c1=""
           >
             
@@ -196,14 +196,14 @@ exports[`Login Page should disable the form if pending 1`] = `
               class="ng-untouched ng-pristine"
               disabled=""
               formcontrolname="password"
-              mdinput=""
+              matinput=""
               ng-reflect-name="password"
               placeholder="Password"
               type="password"
             />
             
               
-          </md-input-container>
+          </mat-input-container>
           
             
         </p>
@@ -211,8 +211,8 @@ exports[`Login Page should disable the form if pending 1`] = `
   
             
         
-                  
-          
+        
+  
             
         <p
           _ngcontent-c1=""
@@ -222,7 +222,7 @@ exports[`Login Page should disable the form if pending 1`] = `
               
           <button
             _ngcontent-c1=""
-            md-button=""
+            mat-button=""
             type="submit"
           >
             Login
@@ -236,10 +236,10 @@ exports[`Login Page should disable the form if pending 1`] = `
       </form>
       
         
-    </md-card-content>
+    </mat-card-content>
     
       
-  </md-card>
+  </mat-card>
     
 </bc-login-form>
 `;
@@ -251,19 +251,19 @@ exports[`Login Page should display an error message if provided 1`] = `
   submitted={[Function EventEmitter]}
 >
   
-      <md-card
+      <mat-card
     _ngcontent-c2=""
   >
     
         
-    <md-card-title
+    <mat-card-title
       _ngcontent-c2=""
     >
       Login
-    </md-card-title>
+    </mat-card-title>
     
         
-    <md-card-content
+    <mat-card-content
       _ngcontent-c2=""
     >
       
@@ -281,7 +281,7 @@ exports[`Login Page should display an error message if provided 1`] = `
         >
           
               
-          <md-input-container
+          <mat-input-container
             _ngcontent-c2=""
           >
             
@@ -290,14 +290,14 @@ exports[`Login Page should display an error message if provided 1`] = `
               _ngcontent-c2=""
               class="ng-untouched ng-pristine ng-valid"
               formcontrolname="username"
-              mdinput=""
+              matinput=""
               ng-reflect-name="username"
               placeholder="Username"
               type="text"
             />
             
               
-          </md-input-container>
+          </mat-input-container>
           
             
         </p>
@@ -309,7 +309,7 @@ exports[`Login Page should display an error message if provided 1`] = `
         >
           
               
-          <md-input-container
+          <mat-input-container
             _ngcontent-c2=""
           >
             
@@ -318,14 +318,14 @@ exports[`Login Page should display an error message if provided 1`] = `
               _ngcontent-c2=""
               class="ng-untouched ng-pristine ng-valid"
               formcontrolname="password"
-              mdinput=""
+              matinput=""
               ng-reflect-name="password"
               placeholder="Password"
               type="password"
             />
             
               
-          </md-input-container>
+          </mat-input-container>
           
             
         </p>
@@ -341,8 +341,8 @@ exports[`Login Page should display an error message if provided 1`] = `
               Invalid credentials
             
         </p>
-                  
-          
+        
+  
             
         <p
           _ngcontent-c2=""
@@ -352,7 +352,7 @@ exports[`Login Page should display an error message if provided 1`] = `
               
           <button
             _ngcontent-c2=""
-            md-button=""
+            mat-button=""
             type="submit"
           >
             Login
@@ -366,10 +366,10 @@ exports[`Login Page should display an error message if provided 1`] = `
       </form>
       
         
-    </md-card-content>
+    </mat-card-content>
     
       
-  </md-card>
+  </mat-card>
     
 </bc-login-form>
 `;
diff --git a/example-app/app/auth/components/login-form.component.ts b/example-app/app/auth/components/login-form.component.ts
index dd99ec77ec..249f08d96a 100644
--- a/example-app/app/auth/components/login-form.component.ts
+++ b/example-app/app/auth/components/login-form.component.ts
@@ -5,33 +5,33 @@ import { Authenticate } from '../models/user';
 @Component({
   selector: 'bc-login-form',
   template: `
-    <md-card>
-      <md-card-title>Login</md-card-title>
-      <md-card-content>
+    <mat-card>
+      <mat-card-title>Login</mat-card-title>
+      <mat-card-content>
         <form [formGroup]="form" (ngSubmit)="submit()">
           <p>
-            <md-input-container>
-              <input type="text" mdInput placeholder="Username" formControlName="username">
-            </md-input-container>
+            <mat-input-container>
+              <input type="text" matInput placeholder="Username" formControlName="username">
+            </mat-input-container>
           </p>
 
           <p>
-            <md-input-container>
-              <input type="password" mdInput placeholder="Password" formControlName="password">
-            </md-input-container>
+            <mat-input-container>
+              <input type="password" matInput placeholder="Password" formControlName="password">
+            </mat-input-container>
           </p>
 
           <p *ngIf="errorMessage" class="loginError">
             {{ errorMessage }}
-          </p>          
-        
+          </p>
+
           <p class="loginButtons">
-            <button type="submit" md-button>Login</button>
+            <button type="submit" mat-button>Login</button>
           </p>
 
         </form>
-      </md-card-content>
-    </md-card>
+      </mat-card-content>
+    </mat-card>
   `,
   styles: [
     `
@@ -41,14 +41,15 @@ import { Authenticate } from '../models/user';
       margin: 72px 0;
     }
 
-    md-card-title,
-    md-card-content {
-      display: flex;
-      justify-content: center;
+    .mat-form-field {
+      width: 100%;
+      min-width: 300px;
     }
 
-    input {
-      width: 300px;
+    mat-card-title,
+    mat-card-content {
+      display: flex;
+      justify-content: center;
     }
 
     .loginError {
diff --git a/example-app/app/auth/containers/__snapshots__/login-page.component.spec.ts.snap b/example-app/app/auth/containers/__snapshots__/login-page.component.spec.ts.snap
index 1b1c954d7e..fdaada9492 100644
--- a/example-app/app/auth/containers/__snapshots__/login-page.component.spec.ts.snap
+++ b/example-app/app/auth/containers/__snapshots__/login-page.component.spec.ts.snap
@@ -13,21 +13,21 @@ exports[`Login Page should compile 1`] = `
   >
     
       
-    <md-card
+    <mat-card
       _ngcontent-c0=""
       class="mat-card"
     >
       
         
-      <md-card-title
+      <mat-card-title
         _ngcontent-c0=""
-        class="mat-card-title "
+        class="mat-card-title"
       >
         Login
-      </md-card-title>
+      </mat-card-title>
       
         
-      <md-card-content
+      <mat-card-content
         _ngcontent-c0=""
         class="mat-card-content"
       >
@@ -46,29 +46,29 @@ exports[`Login Page should compile 1`] = `
           >
             
               
-            <md-input-container
+            <mat-input-container
               _ngcontent-c0=""
-              class="mat-input-container ng-tns-c2-0 ng-untouched ng-pristine ng-valid"
+              class="mat-input-container mat-form-field ng-tns-c2-0 mat-form-field-type-mat-input mat-form-field-can-float mat-primary ng-untouched ng-pristine ng-valid"
             >
               <div
-                class="mat-input-wrapper"
+                class="mat-input-wrapper mat-form-field-wrapper"
               >
                 <div
-                  class="mat-input-flex"
+                  class="mat-input-flex mat-form-field-flex"
                 >
                   
                   <div
-                    class="mat-input-infix"
+                    class="mat-input-infix mat-form-field-infix"
                   >
                     
                 
                     <input
                       _ngcontent-c0=""
                       aria-invalid="false"
-                      class="mat-input-element ng-untouched ng-pristine ng-valid"
+                      class="mat-input-element mat-form-field-autofill-control ng-untouched ng-pristine ng-valid"
                       formcontrolname="username"
-                      id="md-input-1"
-                      mdinput=""
+                      id="mat-input-0"
+                      matinput=""
                       ng-reflect-name="username"
                       ng-reflect-placeholder="Username"
                       ng-reflect-type="text"
@@ -78,12 +78,13 @@ exports[`Login Page should compile 1`] = `
                     
               
                     <span
-                      class="mat-input-placeholder-wrapper"
+                      class="mat-input-placeholder-wrapper mat-form-field-placeholder-wrapper"
                     >
                       
                       <label
-                        class="mat-input-placeholder ng-tns-c2-0 mat-empty mat-float"
-                        for="md-input-1"
+                        aria-owns="mat-input-0"
+                        class="mat-input-placeholder mat-form-field-placeholder ng-tns-c2-0 mat-empty mat-form-field-empty"
+                        for="mat-input-0"
                       >
                         Username 
                         
@@ -93,30 +94,30 @@ exports[`Login Page should compile 1`] = `
                   
                 </div>
                 <div
-                  class="mat-input-underline"
+                  class="mat-input-underline mat-form-field-underline"
                 >
                   <span
-                    class="mat-input-ripple"
+                    class="mat-input-ripple mat-form-field-ripple"
                   />
                 </div>
                 <div
-                  class="mat-input-subscript-wrapper"
+                  class="mat-input-subscript-wrapper mat-form-field-subscript-wrapper"
                   ng-reflect-ng-switch="hint"
                 >
                   
                   
                   <div
-                    class="mat-input-hint-wrapper ng-tns-c2-0 ng-trigger ng-trigger-transitionMessages"
+                    class="mat-input-hint-wrapper mat-form-field-hint-wrapper ng-tns-c2-0 ng-trigger ng-trigger-transitionMessages"
                     style="opacity: 1;"
                   >
                     
                     <div
-                      class="mat-input-hint-spacer"
+                      class="mat-input-hint-spacer mat-form-field-hint-spacer"
                     />
                   </div>
                 </div>
               </div>
-            </md-input-container>
+            </mat-input-container>
             
             
           </p>
@@ -128,29 +129,29 @@ exports[`Login Page should compile 1`] = `
           >
             
               
-            <md-input-container
+            <mat-input-container
               _ngcontent-c0=""
-              class="mat-input-container ng-tns-c2-1 ng-untouched ng-pristine ng-valid"
+              class="mat-input-container mat-form-field ng-tns-c2-1 mat-form-field-type-mat-input mat-form-field-can-float mat-primary ng-untouched ng-pristine ng-valid"
             >
               <div
-                class="mat-input-wrapper"
+                class="mat-input-wrapper mat-form-field-wrapper"
               >
                 <div
-                  class="mat-input-flex"
+                  class="mat-input-flex mat-form-field-flex"
                 >
                   
                   <div
-                    class="mat-input-infix"
+                    class="mat-input-infix mat-form-field-infix"
                   >
                     
                 
                     <input
                       _ngcontent-c0=""
                       aria-invalid="false"
-                      class="mat-input-element ng-untouched ng-pristine ng-valid"
+                      class="mat-input-element mat-form-field-autofill-control ng-untouched ng-pristine ng-valid"
                       formcontrolname="password"
-                      id="md-input-3"
-                      mdinput=""
+                      id="mat-input-1"
+                      matinput=""
                       ng-reflect-name="password"
                       ng-reflect-placeholder="Password"
                       ng-reflect-type="password"
@@ -160,12 +161,13 @@ exports[`Login Page should compile 1`] = `
                     
               
                     <span
-                      class="mat-input-placeholder-wrapper"
+                      class="mat-input-placeholder-wrapper mat-form-field-placeholder-wrapper"
                     >
                       
                       <label
-                        class="mat-input-placeholder ng-tns-c2-1 mat-empty mat-float"
-                        for="md-input-3"
+                        aria-owns="mat-input-1"
+                        class="mat-input-placeholder mat-form-field-placeholder ng-tns-c2-1 mat-empty mat-form-field-empty"
+                        for="mat-input-1"
                       >
                         Password 
                         
@@ -175,30 +177,30 @@ exports[`Login Page should compile 1`] = `
                   
                 </div>
                 <div
-                  class="mat-input-underline"
+                  class="mat-input-underline mat-form-field-underline"
                 >
                   <span
-                    class="mat-input-ripple"
+                    class="mat-input-ripple mat-form-field-ripple"
                   />
                 </div>
                 <div
-                  class="mat-input-subscript-wrapper"
+                  class="mat-input-subscript-wrapper mat-form-field-subscript-wrapper"
                   ng-reflect-ng-switch="hint"
                 >
                   
                   
                   <div
-                    class="mat-input-hint-wrapper ng-tns-c2-1 ng-trigger ng-trigger-transitionMessages"
+                    class="mat-input-hint-wrapper mat-form-field-hint-wrapper ng-tns-c2-1 ng-trigger ng-trigger-transitionMessages"
                     style="opacity: 1;"
                   >
                     
                     <div
-                      class="mat-input-hint-spacer"
+                      class="mat-input-hint-spacer mat-form-field-hint-spacer"
                     />
                   </div>
                 </div>
               </div>
-            </md-input-container>
+            </mat-input-container>
             
             
           </p>
@@ -206,8 +208,8 @@ exports[`Login Page should compile 1`] = `
   
             
           
-                    
           
+  
             
           <p
             _ngcontent-c0=""
@@ -217,7 +219,7 @@ exports[`Login Page should compile 1`] = `
               
             <button
               _ngcontent-c0=""
-              md-button=""
+              mat-button=""
               type="submit"
             >
               Login
@@ -231,10 +233,10 @@ exports[`Login Page should compile 1`] = `
         </form>
         
         
-      </md-card-content>
+      </mat-card-content>
       
       
-    </md-card>
+    </mat-card>
     
     
   </bc-login-form>
diff --git a/example-app/app/auth/containers/login-page.component.spec.ts b/example-app/app/auth/containers/login-page.component.spec.ts
index 7b52bb2ea3..44326a104f 100644
--- a/example-app/app/auth/containers/login-page.component.spec.ts
+++ b/example-app/app/auth/containers/login-page.component.spec.ts
@@ -1,5 +1,5 @@
 import { TestBed, ComponentFixture } from '@angular/core/testing';
-import { MdInputModule, MdCardModule } from '@angular/material';
+import { MatInputModule, MatCardModule } from '@angular/material';
 import { ReactiveFormsModule } from '@angular/forms';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { StoreModule, Store, combineReducers } from '@ngrx/store';
@@ -20,8 +20,8 @@ describe('Login Page', () => {
         StoreModule.forRoot({
           auth: combineReducers(fromAuth.reducers),
         }),
-        MdInputModule,
-        MdCardModule,
+        MatInputModule,
+        MatCardModule,
         ReactiveFormsModule,
       ],
       declarations: [LoginPageComponent, LoginFormComponent],
diff --git a/example-app/app/books/books.module.ts b/example-app/app/books/books.module.ts
index 9617a7c8db..01cb00d388 100644
--- a/example-app/app/books/books.module.ts
+++ b/example-app/app/books/books.module.ts
@@ -1,6 +1,5 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { MaterialModule } from '@angular/material';
 import { RouterModule } from '@angular/router';
 import { StoreModule } from '@ngrx/store';
 import { EffectsModule } from '@ngrx/effects';
@@ -14,6 +13,7 @@ import { FindBookPageComponent } from './containers/find-book-page';
 import { ViewBookPageComponent } from './containers/view-book-page';
 import { SelectedBookPageComponent } from './containers/selected-book-page';
 import { CollectionPageComponent } from './containers/collection-page';
+import { MaterialModule } from '../material';
 
 import { reducers } from './reducers';
 
diff --git a/example-app/app/books/components/book-authors.ts b/example-app/app/books/components/book-authors.ts
index acd881654f..cac60c880e 100644
--- a/example-app/app/books/components/book-authors.ts
+++ b/example-app/app/books/components/book-authors.ts
@@ -5,7 +5,7 @@ import { Book } from '../models/book';
 @Component({
   selector: 'bc-book-authors',
   template: `
-    <h5 md-subheader>Written By:</h5>
+    <h5 mat-subheader>Written By:</h5>
     <span>
       {{ authors | bcAddCommas }}
     </span>
diff --git a/example-app/app/books/components/book-detail.ts b/example-app/app/books/components/book-detail.ts
index ddb683b6c4..2b74254969 100644
--- a/example-app/app/books/components/book-detail.ts
+++ b/example-app/app/books/components/book-detail.ts
@@ -4,28 +4,28 @@ import { Book } from '../models/book';
 @Component({
   selector: 'bc-book-detail',
   template: `
-    <md-card *ngIf="book">
-      <md-card-title-group>
-        <md-card-title>{{ title }}</md-card-title>
-        <md-card-subtitle *ngIf="subtitle">{{ subtitle }}</md-card-subtitle>
-        <img md-card-sm-image *ngIf="thumbnail" [src]="thumbnail"/>
-      </md-card-title-group>
-      <md-card-content>
+    <mat-card *ngIf="book">
+      <mat-card-title-group>
+        <mat-card-title>{{ title }}</mat-card-title>
+        <mat-card-subtitle *ngIf="subtitle">{{ subtitle }}</mat-card-subtitle>
+        <img mat-card-sm-image *ngIf="thumbnail" [src]="thumbnail"/>
+      </mat-card-title-group>
+      <mat-card-content>
         <p [innerHtml]="description"></p>
-      </md-card-content>
-      <md-card-footer class="footer">
+      </mat-card-content>
+      <mat-card-footer class="footer">
         <bc-book-authors [book]="book"></bc-book-authors>
-      </md-card-footer>
-      <md-card-actions align="start">
-        <button md-raised-button color="warn" *ngIf="inCollection" (click)="remove.emit(book)">
+      </mat-card-footer>
+      <mat-card-actions align="start">
+        <button mat-raised-button color="warn" *ngIf="inCollection" (click)="remove.emit(book)">
         Remove Book from Collection
         </button>
 
-        <button md-raised-button color="primary" *ngIf="!inCollection" (click)="add.emit(book)">
+        <button mat-raised-button color="primary" *ngIf="!inCollection" (click)="add.emit(book)">
         Add Book to Collection
         </button>
-      </md-card-actions>
-    </md-card>
+      </mat-card-actions>
+    </mat-card>
 
   `,
   styles: [
@@ -35,10 +35,10 @@ import { Book } from '../models/book';
       justify-content: center;
       margin: 75px 0;
     }
-    md-card {
+    mat-card {
       max-width: 600px;
     }
-    md-card-title-group {
+    mat-card-title-group {
       margin-left: 0;
     }
     img {
@@ -46,13 +46,13 @@ import { Book } from '../models/book';
       min-width: 60px;
       margin-left: 5px;
     }
-    md-card-content {
+    mat-card-content {
       margin: 15px 0 50px;
     }
-    md-card-actions {
+    mat-card-actions {
       margin: 25px 0 0 !important;
     }
-    md-card-footer {
+    mat-card-footer {
       padding: 0 25px 25px;
       position: relative;
     }
diff --git a/example-app/app/books/components/book-preview.ts b/example-app/app/books/components/book-preview.ts
index ec958e2ec0..3484ea156a 100644
--- a/example-app/app/books/components/book-preview.ts
+++ b/example-app/app/books/components/book-preview.ts
@@ -5,40 +5,51 @@ import { Book } from '../models/book';
   selector: 'bc-book-preview',
   template: `
     <a [routerLink]="['/books', id]">
-      <md-card>
-        <md-card-title-group>
-          <img md-card-sm-image *ngIf="thumbnail" [src]="thumbnail"/>
-          <md-card-title>{{ title | bcEllipsis:35 }}</md-card-title>
-          <md-card-subtitle *ngIf="subtitle">{{ subtitle | bcEllipsis:40 }}</md-card-subtitle>
-        </md-card-title-group>
-        <md-card-content>
+      <mat-card>
+        <mat-card-title-group>
+          <img mat-card-sm-image *ngIf="thumbnail" [src]="thumbnail"/>
+          <mat-card-title>{{ title | bcEllipsis:35 }}</mat-card-title>
+          <mat-card-subtitle *ngIf="subtitle">{{ subtitle | bcEllipsis:40 }}</mat-card-subtitle>
+        </mat-card-title-group>
+        <mat-card-content>
           <p *ngIf="description">{{ description | bcEllipsis }}</p>
-        </md-card-content>
-        <md-card-footer>
+        </mat-card-content>
+        <mat-card-footer>
           <bc-book-authors [book]="book"></bc-book-authors>
-        </md-card-footer>
-      </md-card>
+        </mat-card-footer>
+      </mat-card>
     </a>
   `,
   styles: [
     `
-    md-card {
+    :host {
+      display: flex;
+    }
+
+    :host a {
+      display: flex;
+    }
+
+    mat-card {
       width: 400px;
-      height: 300px;
       margin: 15px;
+      display: flex;
+      flex-flow: column;
+      justify-content: space-between;
     }
+
     @media only screen and (max-width: 768px) {
-      md-card {
+      mat-card {
         margin: 15px 0 !important;
       }
     }
-    md-card:hover {
+    mat-card:hover {
       box-shadow: 3px 3px 16px -2px rgba(0, 0, 0, .5);
     }
-    md-card-title {
+    mat-card-title {
       margin-right: 10px;
     }
-    md-card-title-group {
+    mat-card-title-group {
       margin: 0;
     }
     a {
@@ -50,7 +61,7 @@ import { Book } from '../models/book';
       min-width: 60px;
       margin-left: 5px;
     }
-    md-card-content {
+    mat-card-content {
       margin-top: 15px;
       margin: 15px 0 0;
     }
@@ -58,7 +69,7 @@ import { Book } from '../models/book';
       display: inline-block;
       font-size: 13px;
     }
-    md-card-footer {
+    mat-card-footer {
       padding: 0 25px 25px;
     }
   `,
diff --git a/example-app/app/books/components/book-search.ts b/example-app/app/books/components/book-search.ts
index 151db7e669..6e9cc61b9e 100644
--- a/example-app/app/books/components/book-search.ts
+++ b/example-app/app/books/components/book-search.ts
@@ -6,42 +6,39 @@ import { Component, Output, Input, EventEmitter } from '@angular/core';
 @Component({
   selector: 'bc-book-search',
   template: `
-    <md-card>
-      <md-card-title>Find a Book</md-card-title>
-      <md-card-content>
-        <md-input-container>
-          <input mdInput placeholder="Search for a book" [value]="query" (keyup)="search.emit($event.target.value)">
-        </md-input-container>
-        <md-spinner [class.show]="searching"></md-spinner>
-      </md-card-content>
-    </md-card>
+    <mat-card>
+      <mat-card-title>Find a Book</mat-card-title>
+      <mat-card-content>
+        <mat-input-container>
+          <input matInput placeholder="Search for a book" [value]="query" (keyup)="search.emit($event.target.value)">
+        </mat-input-container>
+        <mat-progress-spinner mode="indeterminate" [class.show]="searching"></mat-progress-spinner>
+      </mat-card-content>
+    </mat-card>
   `,
   styles: [
     `
-    md-card-title,
-    md-card-content {
+    mat-card-title,
+    mat-card-content {
       display: flex;
       justify-content: center;
     }
 
-    input {
-      width: 300px;
+    .mat-form-field {
+      min-width: 300px;
     }
 
-    md-card-spinner {
-      padding-left: 60px; // Make room for the spinner
-    }
-
-    md-spinner {
-      width: 30px;
-      height: 30px;
+    .mat-progress-spinner {
+      width: 30px !important;
+      height: 30px !important;
       position: relative;
       top: 10px;
       left: 10px;
       opacity: 0.0;
+      padding-left: 60px; // Make room for the spinner
     }
 
-    md-spinner.show {
+    .mat-progress-spinner.show {
       opacity: 1.0;
     }
   `,
diff --git a/example-app/app/books/components/index.ts b/example-app/app/books/components/index.ts
index 1c4cf61459..c31ceabb3f 100644
--- a/example-app/app/books/components/index.ts
+++ b/example-app/app/books/components/index.ts
@@ -1,6 +1,5 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { MaterialModule } from '@angular/material';
 import { ReactiveFormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
 
@@ -11,6 +10,7 @@ import { BookPreviewListComponent } from './book-preview-list';
 import { BookSearchComponent } from './book-search';
 
 import { PipesModule } from '../../shared/pipes';
+import { MaterialModule } from '../../material';
 
 export const COMPONENTS = [
   BookAuthorsComponent,
diff --git a/example-app/app/books/containers/collection-page.ts b/example-app/app/books/containers/collection-page.ts
index f4c61e9e32..af76fd48e4 100644
--- a/example-app/app/books/containers/collection-page.ts
+++ b/example-app/app/books/containers/collection-page.ts
@@ -11,9 +11,9 @@ import { Book } from '../models/book';
   selector: 'bc-collection-page',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
-    <md-card>
-      <md-card-title>My Collection</md-card-title>
-    </md-card>
+    <mat-card>
+      <mat-card-title>My Collection</mat-card-title>
+    </mat-card>
 
     <bc-book-preview-list [books]="books$ | async"></bc-book-preview-list>
   `,
@@ -25,7 +25,7 @@ import { Book } from '../models/book';
    */
   styles: [
     `
-    md-card-title {
+    mat-card-title {
       display: flex;
       justify-content: center;
     }
diff --git a/example-app/app/core/components/layout.ts b/example-app/app/core/components/layout.ts
index 6a58959980..899dca7ce8 100644
--- a/example-app/app/core/components/layout.ts
+++ b/example-app/app/core/components/layout.ts
@@ -3,15 +3,15 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'bc-layout',
   template: `
-    <md-sidenav-container fullscreen>
+    <mat-sidenav-container fullscreen>
 
       <ng-content></ng-content>
 
-    </md-sidenav-container>
+    </mat-sidenav-container>
   `,
   styles: [
     `
-    md-sidenav-container {
+    mat-sidenav-container {
       background: rgba(0, 0, 0, 0.03);
     }
 
diff --git a/example-app/app/core/components/nav-item.ts b/example-app/app/core/components/nav-item.ts
index 61d1c247e1..c5c44e671d 100644
--- a/example-app/app/core/components/nav-item.ts
+++ b/example-app/app/core/components/nav-item.ts
@@ -3,10 +3,10 @@ import { Component, Input, Output, EventEmitter } from '@angular/core';
 @Component({
   selector: 'bc-nav-item',
   template: `
-    <a md-list-item [routerLink]="routerLink" (click)="navigate.emit()">
-      <md-icon md-list-icon>{{ icon }}</md-icon>
-      <span md-line><ng-content></ng-content></span>
-      <span md-line class="secondary">{{ hint }}</span>
+    <a mat-list-item [routerLink]="routerLink" (click)="navigate.emit()">
+      <mat-icon mat-list-icon>{{ icon }}</mat-icon>
+      <span mat-line><ng-content></ng-content></span>
+      <span mat-line class="secondary">{{ hint }}</span>
     </a>
   `,
   styles: [
diff --git a/example-app/app/core/components/sidenav.ts b/example-app/app/core/components/sidenav.ts
index e56fd18668..8f8e169d65 100644
--- a/example-app/app/core/components/sidenav.ts
+++ b/example-app/app/core/components/sidenav.ts
@@ -3,15 +3,15 @@ import { Component, Input } from '@angular/core';
 @Component({
   selector: 'bc-sidenav',
   template: `
-    <md-sidenav [opened]="open">
-      <md-nav-list>
+    <mat-sidenav [opened]="open">
+      <mat-nav-list>
         <ng-content></ng-content>
-      </md-nav-list>
-    </md-sidenav>
+      </mat-nav-list>
+    </mat-sidenav>
   `,
   styles: [
     `
-    md-sidenav {
+    mat-sidenav {
       width: 300px;
     }
   `,
diff --git a/example-app/app/core/components/toolbar.ts b/example-app/app/core/components/toolbar.ts
index 6ed0d3c9ec..1c8958e20a 100644
--- a/example-app/app/core/components/toolbar.ts
+++ b/example-app/app/core/components/toolbar.ts
@@ -3,12 +3,12 @@ import { Component, Output, EventEmitter } from '@angular/core';
 @Component({
   selector: 'bc-toolbar',
   template: `
-    <md-toolbar color="primary">
-      <button md-icon-button (click)="openMenu.emit()">
-        <md-icon>menu</md-icon>
+    <mat-toolbar color="primary">
+      <button mat-icon-button (click)="openMenu.emit()">
+        <mat-icon>menu</mat-icon>
       </button>
       <ng-content></ng-content>
-    </md-toolbar>
+    </mat-toolbar>
   `,
 })
 export class ToolbarComponent {
diff --git a/example-app/app/core/containers/not-found-page.ts b/example-app/app/core/containers/not-found-page.ts
index 4b569ac310..77900ad138 100644
--- a/example-app/app/core/containers/not-found-page.ts
+++ b/example-app/app/core/containers/not-found-page.ts
@@ -4,15 +4,15 @@ import { Component, ChangeDetectionStrategy } from '@angular/core';
   selector: 'bc-not-found-page',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
-    <md-card>
-      <md-card-title>404: Not Found</md-card-title>
-      <md-card-content>
+    <mat-card>
+      <mat-card-title>404: Not Found</mat-card-title>
+      <mat-card-content>
         <p>Hey! It looks like this page doesn't exist yet.</p>
-      </md-card-content>
-      <md-card-actions>
-        <button md-raised-button color="primary" routerLink="/">Take Me Home</button>
-      </md-card-actions>
-    </md-card>
+      </mat-card-content>
+      <mat-card-actions>
+        <button mat-raised-button color="primary" routerLink="/">Take Me Home</button>
+      </mat-card-actions>
+    </mat-card>
   `,
   styles: [
     `
diff --git a/example-app/app/core/core.module.ts b/example-app/app/core/core.module.ts
index 5f0d863112..de46938941 100644
--- a/example-app/app/core/core.module.ts
+++ b/example-app/app/core/core.module.ts
@@ -1,6 +1,5 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { MaterialModule } from '@angular/material';
 import { RouterModule } from '@angular/router';
 
 import { AppComponent } from './containers/app';
@@ -9,6 +8,7 @@ import { LayoutComponent } from './components/layout';
 import { NavItemComponent } from './components/nav-item';
 import { SidenavComponent } from './components/sidenav';
 import { ToolbarComponent } from './components/toolbar';
+import { MaterialModule } from '../material';
 
 import { GoogleBooksService } from './services/google-books';
 
diff --git a/example-app/app/material/index.ts b/example-app/app/material/index.ts
new file mode 100644
index 0000000000..6b0631d612
--- /dev/null
+++ b/example-app/app/material/index.ts
@@ -0,0 +1 @@
+export * from './material.module';
diff --git a/example-app/app/material/material.module.ts b/example-app/app/material/material.module.ts
new file mode 100644
index 0000000000..cf0d35b71c
--- /dev/null
+++ b/example-app/app/material/material.module.ts
@@ -0,0 +1,36 @@
+import { NgModule } from '@angular/core';
+
+import {
+  MatInputModule,
+  MatCardModule,
+  MatButtonModule,
+  MatSidenavModule,
+  MatListModule,
+  MatIconModule,
+  MatToolbarModule,
+  MatProgressSpinnerModule,
+} from '@angular/material';
+
+@NgModule({
+  imports: [
+    MatInputModule,
+    MatCardModule,
+    MatButtonModule,
+    MatSidenavModule,
+    MatListModule,
+    MatIconModule,
+    MatToolbarModule,
+    MatProgressSpinnerModule,
+  ],
+  exports: [
+    MatInputModule,
+    MatCardModule,
+    MatButtonModule,
+    MatSidenavModule,
+    MatListModule,
+    MatIconModule,
+    MatToolbarModule,
+    MatProgressSpinnerModule,
+  ],
+})
+export class MaterialModule {}
diff --git a/example-app/styles.css b/example-app/styles.css
index 0674460363..af1fd6c4c6 100644
--- a/example-app/styles.css
+++ b/example-app/styles.css
@@ -10,3 +10,8 @@ html {
   -ms-overflow-style: none;
   overflow: auto;
 }
+
+.mat-progress-spinner svg {
+  width: 30px !important;
+  height: 30px !important;
+}
diff --git a/package.json b/package.json
index 9e0cbd9390..dc0776a751 100644
--- a/package.json
+++ b/package.json
@@ -27,7 +27,7 @@
     "node": ">=6.9.5",
     "npm": ">=4.0.0",
     "yarn": ">=0.27.5 <2.0.0"
-  },  
+  },
   "lint-staged": {
     "*.ts": [
       "yarn prettier",
@@ -63,7 +63,7 @@
     "@angular/core": "^4.2.0",
     "@angular/forms": "^4.2.0",
     "@angular/http": "^4.2.0",
-    "@angular/material": "^2.0.0-beta.7",
+    "@angular/material": "^2.0.0-beta.12",
     "@angular/platform-browser": "^4.2.0",
     "@angular/platform-browser-dynamic": "^4.2.0",
     "@angular/platform-server": "^4.2.0",
@@ -123,7 +123,7 @@
     "zone.js": "^0.8.12"
   },
   "dependencies": {
-    "@angular/cdk": "^2.0.0-beta.8",
+    "@angular/cdk": "^2.0.0-beta.12",
     "opencollective": "^1.0.3"
   },
   "collective": {
diff --git a/setup-jest.ts b/setup-jest.ts
index 05a89c72cc..19963694a7 100644
--- a/setup-jest.ts
+++ b/setup-jest.ts
@@ -1,6 +1,6 @@
 import 'jest-preset-angular';
-import { MdCommonModule } from '@angular/material';
-
+// import { MdCommonModule } from '@angular/material';
+//
 global['CSS'] = null;
-MdCommonModule.prototype['_checkDoctype'] = function() {};
-MdCommonModule.prototype['_checkTheme'] = function() {};
+// MdCommonModule.prototype['_checkDoctype'] = function() {};
+// MdCommonModule.prototype['_checkTheme'] = function() {};
diff --git a/yarn.lock b/yarn.lock
index fa9f40ad1d..63be15fbab 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8,9 +8,9 @@
   dependencies:
     tslib "^1.7.1"
 
-"@angular/cdk@^2.0.0-beta.8":
-  version "2.0.0-beta.8"
-  resolved "https://registry.yarnpkg.com/@angular/cdk/-/cdk-2.0.0-beta.8.tgz#71961c851dfbeb19e085e898bf5e4461408f8b57"
+"@angular/cdk@^2.0.0-beta.12":
+  version "2.0.0-beta.12"
+  resolved "https://registry.yarnpkg.com/@angular/cdk/-/cdk-2.0.0-beta.12.tgz#3a243cb62b93f4e039120ba70f900dc9e235622e"
   dependencies:
     tslib "^1.7.1"
 
@@ -118,9 +118,9 @@
   dependencies:
     tslib "^1.7.1"
 
-"@angular/material@^2.0.0-beta.7":
-  version "2.0.0-beta.8"
-  resolved "https://registry.yarnpkg.com/@angular/material/-/material-2.0.0-beta.8.tgz#a92852abc9261aea26c2401f576645470be2cf38"
+"@angular/material@^2.0.0-beta.12":
+  version "2.0.0-beta.12"
+  resolved "https://registry.yarnpkg.com/@angular/material/-/material-2.0.0-beta.12.tgz#71b6d0b7b021891e5d0e3688c1d4bd78c7457f58"
   dependencies:
     tslib "^1.7.1"