Migrate from md to mat & updates angular 4.4.3 (#276)

Author: amcdnl

package.json

@@ -18,25 +18,25 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^4.3.0",
+    "@angular/animations": "^4.4.3",
     "@angular/cdk": "2.0.0-beta.11",
-    "@angular/common": "^4.3.0",
-    "@angular/compiler": "^4.3.0",
-    "@angular/core": "^4.3.0",
-    "@angular/forms": "^4.3.0",
-    "@angular/http": "^4.3.0",
+    "@angular/common": "^4.4.3",
+    "@angular/compiler": "^4.4.3",
+    "@angular/core": "^4.4.3",
+    "@angular/forms": "^4.4.3",
+    "@angular/http": "^4.4.3",
     "@angular/material": "2.0.0-beta.11",
-    "@angular/platform-browser": "^4.3.0",
-    "@angular/platform-browser-dynamic": "^4.3.0",
-    "@angular/router": "^4.3.0",
+    "@angular/platform-browser": "^4.4.3",
+    "@angular/platform-browser-dynamic": "^4.4.3",
+    "@angular/router": "^4.4.3",
     "@angular/service-worker": "^1.0.0-beta.16",
     "core-js": "^2.4.1",
     "rxjs": "^5.1.0",
     "zone.js": "^0.8.4"
   },
   "devDependencies": {
     "@angular/cli": "^1.0.0",
-    "@angular/compiler-cli": "^4.3.0",
+    "@angular/compiler-cli": "^4.4.3",
     "@types/jasmine": "^2.5.41",
     "@types/node": "^7.0.5",
     "hammerjs": "^2.0.8",

src/app/app-module.ts

@@ -5,7 +5,7 @@ import {LocationStrategy, PathLocationStrategy} from '@angular/common';
 import {FormsModule} from '@angular/forms';
 import {HttpModule} from '@angular/http';
 import {RouterModule} from '@angular/router';
-import {MdNativeDateModule} from '@angular/material';
+import {MatNativeDateModule, MATERIAL_COMPATIBILITY_MODE} from '@angular/material';
 import {ExampleModule} from '@angular/material-examples';
 
 import {MaterialDocsApp} from './material-docs-app';
@@ -37,7 +37,7 @@ import {DocViewerModule} from './shared/doc-viewer/doc-viewer-module';
     ExampleModule,
     FormsModule,
     HttpModule,
-    MdNativeDateModule,
+    MatNativeDateModule,
     RouterModule.forRoot(MATERIAL_DOCS_ROUTES),
 
     ComponentCategoryListModule,
@@ -63,6 +63,7 @@ import {DocViewerModule} from './shared/doc-viewer/doc-viewer-module';
     StyleManager,
     ThemeStorage,
     {provide: LocationStrategy, useClass: PathLocationStrategy},
+    {provide: MATERIAL_COMPATIBILITY_MODE, useValue: true},
   ],
   bootstrap: [MaterialDocsApp],
 })

src/app/pages/component-category-list/component-category-list.html

@@ -2,8 +2,8 @@
   <a *ngFor="let category of docItems.getItemsInCategories()"
     class="docs-component-category-list-item"
     [routerLink]="['/categories/', category.id]">
-    <md-card class="docs-component-category-list-card">
-      <md-card-title>{{category.name}}</md-card-title>
-    </md-card>
+    <mat-card class="docs-component-category-list-card">
+      <mat-card-title>{{category.name}}</mat-card-title>
+    </mat-card>
   </a>
 </div>

src/app/pages/component-category-list/component-category-list.ts

@@ -1,5 +1,5 @@
 import {Component, NgModule} from '@angular/core';
-import {MdCardModule} from '@angular/material';
+import {MatCardModule} from '@angular/material';
 import {CommonModule} from '@angular/common';
 import {RouterModule} from '@angular/router';
 import {DocumentationItems} from '../../shared/documentation-items/documentation-items';
@@ -22,7 +22,7 @@ export class ComponentCategoryList {
 }
 
 @NgModule({
-  imports: [SvgViewerModule, MdCardModule, CommonModule, RouterModule],
+  imports: [SvgViewerModule, MatCardModule, CommonModule, RouterModule],
   exports: [ComponentCategoryList],
   declarations: [ComponentCategoryList],
   providers: [DocumentationItems, ComponentPageTitle],

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

@@ -2,16 +2,16 @@
   <a *ngFor="let component of category.items"
     class="docs-component-list-item"
     [routerLink]="['/components/', component.id]">
-    <md-card class="docs-component-list-card">
-      <md-card-title class="docs-component-list-card-title">{{component.name}}</md-card-title>
+    <mat-card class="docs-component-list-card">
+      <mat-card-title class="docs-component-list-card-title">{{component.name}}</mat-card-title>
       <div class="docs-component-list-icon-spacer"></div>
       <div class="docs-component-list-item-icon">
         <docs-svg-viewer
             [attr.aria-label]="component.name"
             scaleToContainer="true"
             [src]="'../../../assets/img/components/' + component.id + '.svg'"></docs-svg-viewer>
       </div>
-    </md-card>
+    </mat-card>
   </a>
 </div>
 

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

@@ -7,7 +7,7 @@ import {ActivatedRoute, Router, RouterModule} from '@angular/router';
 import {ComponentPageTitle} from '../page-title/page-title';
 import {SvgViewerModule} from '../../shared/svg-viewer/svg-viewer';
 import {CommonModule} from '@angular/common';
-import {MdCardModule} from '@angular/material';
+import {MatCardModule} from '@angular/material';
 
 @Component({
   selector: 'app-components',
@@ -34,7 +34,7 @@ export class ComponentList {
 }
 
 @NgModule({
-  imports: [SvgViewerModule, RouterModule, CommonModule, MdCardModule],
+  imports: [SvgViewerModule, RouterModule, CommonModule, MatCardModule],
   exports: [ComponentList],
   declarations: [ComponentList],
   providers: [DocumentationItems, ComponentPageTitle],

src/app/pages/component-page-header/component-page-header.html

@@ -1,6 +1,6 @@
 <div class="docs-primary-header component-page-header">
-  <button md-button class="sidenav-toggle" (click)="toggleSidenav.emit()">
-    <md-icon>menu</md-icon>
+  <button mat-button class="sidenav-toggle" (click)="toggleSidenav.emit()">
+    <mat-icon>menu</mat-icon>
   </button>
 
   <h1 focusOnNavigation>{{getTitle()}} </h1>

src/app/pages/component-page-header/component-page-header.scss

@@ -29,7 +29,7 @@ h1 {
     justify-content: center;
   }
 
-  md-icon {
+  mat-icon {
     font-size: 30px;
     height: 64px;
     width: 64px;

src/app/pages/component-page-header/component-page-header.ts

@@ -2,7 +2,7 @@ import {Component, EventEmitter, NgModule, Output} from '@angular/core';
 import 'rxjs/add/operator/first';
 import {ComponentPageTitle} from '../page-title/page-title';
 import {NavigationFocusModule} from '../../shared/navigation-focus/navigation-focus';
-import {MdButtonModule, MdIconModule} from '@angular/material';
+import {MatButtonModule, MatIconModule} from '@angular/material';
 
 @Component({
   selector: 'component-page-header',
@@ -20,7 +20,7 @@ export class ComponentPageHeader {
 }
 
 @NgModule({
-  imports: [MdButtonModule, MdIconModule, NavigationFocusModule],
+  imports: [MatButtonModule, MatIconModule, NavigationFocusModule],
   exports: [ComponentPageHeader],
   declarations: [ComponentPageHeader],
   providers: [ComponentPageTitle],

src/app/pages/component-sidenav/component-sidenav.html

@@ -1,5 +1,5 @@
-<md-sidenav-container class="docs-component-viewer-sidenav-container">
-  <md-sidenav #sidenav class="docs-component-viewer-sidenav"
+<mat-sidenav-container class="docs-component-viewer-sidenav-container">
+  <mat-sidenav #sidenav class="docs-component-viewer-sidenav"
               [opened]="!isScreenSmall()"
               [mode]="isScreenSmall() ? 'over' : 'side'">
     <nav *ngFor="let category of docItems.getItemsInCategories()">
@@ -13,11 +13,11 @@ <h3>{{category.name}}</h3>
         </li>
       </ul>
     </nav>
-  </md-sidenav>
+  </mat-sidenav>
 
   <div class="docs-component-sidenav-content">
     <component-page-header (toggleSidenav)="sidenav.toggle()"></component-page-header>
     <router-outlet></router-outlet>
     <app-footer></app-footer>
   </div>
-</md-sidenav-container>
+</mat-sidenav-container>