chore(migration): migrates from md to mat & updates angular 4.4.3

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>

src/app/pages/component-sidenav/component-sidenav.spec.ts

@@ -1,5 +1,5 @@
 import {async, ComponentFixture, TestBed} from '@angular/core/testing';
-import {MdSidenav} from '@angular/material';
+import {MatSidenav} from '@angular/material';
 import {ComponentSidenav, ComponentSidenavModule} from './component-sidenav';
 import {DocsAppTestingModule} from '../../testing/testing-module';
 
@@ -26,7 +26,7 @@ describe('ComponentSidenav', () => {
 
     fixture.detectChanges();
     async(() => {
-      expect(component.sidenav instanceof MdSidenav).toBeTruthy();
+      expect(component.sidenav instanceof MatSidenav).toBeTruthy();
       expect(component.isScreenSmall()).toBeTruthy();
       expect(component.sidenav.opened).toBe(false);
     })

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

@@ -1,6 +1,6 @@
 import {Component, NgZone, ViewEncapsulation, ViewChild, OnInit, NgModule} from '@angular/core';
 import {DocumentationItems} from '../../shared/documentation-items/documentation-items';
-import {MdSidenav, MdSidenavModule} from '@angular/material';
+import {MatSidenav, MatSidenavModule} from '@angular/material';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import {Router, RouterModule} from '@angular/router';
 import {CommonModule} from '@angular/common';
@@ -25,7 +25,7 @@ export class ComponentSidenav implements OnInit {
     this.mediaMatcher.addListener(mql => zone.run(() => this.mediaMatcher = mql));
   }
 
-  @ViewChild(MdSidenav) sidenav: MdSidenav;
+  @ViewChild(MatSidenav) sidenav: MatSidenav;
 
   ngOnInit() {
     this._router.events.subscribe(() => {
@@ -43,7 +43,7 @@ export class ComponentSidenav implements OnInit {
 
 @NgModule({
   imports: [
-    MdSidenavModule,
+    MatSidenavModule,
     RouterModule,
     CommonModule,
     ComponentHeaderModule,

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

@@ -1,6 +1,6 @@
 <div class="docs-component-viewer">
-  <nav md-tab-nav-bar class="docs-component-viewer-tabbed-content">
-    <a md-tab-link class="docs-component-viewer-section-tab"
+  <nav mat-tab-nav-bar class="docs-component-viewer-tabbed-content">
+    <a mat-tab-link class="docs-component-viewer-section-tab"
         *ngFor="let section of ['Overview', 'API', 'Examples']"
         [routerLink]="section.toLowerCase()"
         routerLinkActive #rla="routerLinkActive"

src/app/pages/component-viewer/component-viewer.spec.ts

@@ -5,7 +5,7 @@ import {ComponentViewer, ComponentViewerModule} from './component-viewer';
 import {DocsAppTestingModule} from '../../testing/testing-module';
 
 import {EXAMPLE_COMPONENTS} from '@angular/material-examples';
-import {MdButtonModule} from '@angular/material';
+import {MatButtonModule} from '@angular/material';
 import {NgModule} from '@angular/core';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 
@@ -52,7 +52,7 @@ describe('ComponentViewer', () => {
 // to compile all of the examples for these tests.
 @NgModule({
   imports: [
-    MdButtonModule,
+    MatButtonModule,
     NoopAnimationsModule,
   ],
   declarations: [EXAMPLE_COMPONENTS[exampleKey].component],

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

@@ -2,7 +2,7 @@ import {Component, OnInit, NgModule, ElementRef, ViewEncapsulation, ViewChild} f
 import {ActivatedRoute, Router, RouterModule} from '@angular/router';
 import {DocumentationItems, DocItem} from '../../shared/documentation-items/documentation-items';
 import {ComponentPageTitle} from '../page-title/page-title';
-import {MdTabsModule} from '@angular/material';
+import {MatTabsModule} from '@angular/material';
 import {DocViewerModule} from '../../shared/doc-viewer/doc-viewer-module';
 import {CommonModule} from '@angular/common';
 import {TableOfContentsModule} from '../../shared/table-of-contents/table-of-contents.module';
@@ -65,7 +65,7 @@ export class ComponentExamples extends ComponentOverview {}
 
 @NgModule({
   imports: [
-    MdTabsModule,
+    MatTabsModule,
     RouterModule,
     DocViewerModule,
     CommonModule,

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

@@ -2,12 +2,12 @@
   <h1>Guides</h1>
 </div>
 
-<md-nav-list class="docs-guide-list">
-  <a md-list-item *ngFor="let guide of guideItems.getAllItems()"
+<mat-nav-list class="docs-guide-list">
+  <a mat-list-item *ngFor="let guide of guideItems.getAllItems()"
       class="docs-guide-item"
       [routerLink]="['/guide/', guide.id]">
     {{guide.name}}
   </a>
-</md-nav-list>
+</mat-nav-list>
 
 <app-footer></app-footer>

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

@@ -1,6 +1,6 @@
 import {Component, NgModule, OnInit} from '@angular/core';
 import {GuideItems} from '../../shared/guide-items/guide-items';
-import {MdListModule} from '@angular/material';
+import {MatListModule} from '@angular/material';
 import {RouterModule} from '@angular/router';
 import {FooterModule} from '../../shared/footer/footer';
 import {CommonModule} from '@angular/common';
@@ -21,7 +21,7 @@ export class GuideList implements OnInit {
 
 
 @NgModule({
-  imports: [MdListModule, RouterModule, FooterModule, CommonModule],
+  imports: [MatListModule, RouterModule, FooterModule, CommonModule],
   exports: [GuideList],
   declarations: [GuideList],
   providers: [GuideItems, ComponentPageTitle],

src/app/pages/homepage/homepage.html

@@ -5,7 +5,7 @@ <h1 class="mat-h1">Angular Material</h1>
       <h2> Material Design components for Angular</h2>
     </div>
     <div class="docs-header-start">
-     <a md-raised-button class="docs-button" routerLink="/guide/getting-started">Get started</a>
+     <a mat-raised-button class="docs-button" routerLink="/guide/getting-started">Get started</a>
     </div>
   </div>
 </header>
@@ -59,7 +59,7 @@ <h2>Optimized for Angular</h2>
     </div>
   </div>
   <div class="docs-homepage-bottom-start">
-    <a md-raised-button class="docs-button" routerLink="/guide/getting-started">Get started</a>
+    <a mat-raised-button class="docs-button" routerLink="/guide/getting-started">Get started</a>
   </div>
 </div>
 

src/app/pages/homepage/homepage.ts

@@ -1,6 +1,6 @@
 import {Component, NgModule, OnInit} from '@angular/core';
 import {SvgViewerModule} from '../../shared/svg-viewer/svg-viewer';
-import {MdButtonModule} from '@angular/material';
+import {MatButtonModule} from '@angular/material';
 import {FooterModule} from '../../shared/footer/footer';
 import {RouterModule} from '@angular/router';
 import {ComponentPageTitle} from '../page-title/page-title';
@@ -19,7 +19,7 @@ export class Homepage implements OnInit {
 }
 
 @NgModule({
-  imports: [SvgViewerModule, MdButtonModule, FooterModule, RouterModule],
+  imports: [SvgViewerModule, MatButtonModule, FooterModule, RouterModule],
   exports: [Homepage],
   declarations: [Homepage],
 })

src/app/shared/doc-viewer/doc-viewer-module.ts

@@ -2,11 +2,11 @@ import {DocViewer} from './doc-viewer';
 import {ExampleViewer} from '../example-viewer/example-viewer';
 import {PlunkerButtonModule} from '../plunker/plunker-button';
 import {
-  MdButtonModule,
-  MdIconModule,
-  MdTabsModule,
-  MdTooltipModule,
-  MdSnackBarModule,
+  MatButtonModule,
+  MatIconModule,
+  MatTabsModule,
+  MatTooltipModule,
+  MatSnackBarModule,
   PortalModule
 } from '@angular/material';
 import {CommonModule} from '@angular/common';
@@ -18,11 +18,11 @@ import {CopierService} from '../copier/copier.service';
 // ExampleViewer is included in the DocViewerModule because they have a circular dependency.
 @NgModule({
   imports: [
-    MdButtonModule,
-    MdIconModule,
-    MdTooltipModule,
-    MdSnackBarModule,
-    MdTabsModule,
+    MatButtonModule,
+    MatIconModule,
+    MatTooltipModule,
+    MatSnackBarModule,
+    MatTabsModule,
     CommonModule,
     PortalModule,
     PlunkerButtonModule

src/app/shared/doc-viewer/header-link.ts

@@ -23,7 +23,7 @@ import {Router} from '@angular/router';
       class="docs-markdown-a docs-header-link"
       aria-label="Link to this heading"
       [href]="url">
-      <md-icon>link</md-icon>
+      <mat-icon>link</mat-icon>
     </a>
   `
 })