Update Angular, Angular Material and Flex Layout to 6

Updated additional project files
Updated Angular Material examples

.angular-cli.json

@@ -1,74 +0,0 @@
-{
-    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
-    "project": {
-        "name": "fuse"
-    },
-    "apps": [
-        {
-            "root": "src",
-            "outDir": "dist",
-            "assets": [
-                "assets",
-                "app/main/content/components/angular-material",
-                "favicon.ico"
-            ],
-            "index": "index.html",
-            "main": "main.ts",
-            "polyfills": "polyfills.ts",
-            "test": "test.ts",
-            "tsconfig": "tsconfig.app.json",
-            "testTsconfig": "tsconfig.spec.json",
-            "prefix": "app",
-            "styles": [
-                "styles.scss"
-            ],
-            "scripts": [],
-            "environmentSource": "environments/environment.ts",
-            "environments": {
-                "dev": "environments/environment.ts",
-                "hmr": "environments/environment.hmr.ts",
-                "prod": "environments/environment.prod.ts"
-            }
-        }
-    ],
-    "e2e": {
-        "protractor": {
-            "config": "./protractor.conf.js"
-        }
-    },
-    "lint": [
-        {
-            "project": "src/tsconfig.app.json",
-            "exclude": [
-                "**/node_modules/**",
-                "**/src/app/fuse-fake-db/**/*",
-                "**/src/assets/angular-material-examples/**/*"
-            ]
-        },
-        {
-            "project": "src/tsconfig.spec.json",
-            "exclude": [
-                "**/node_modules/**",
-                "**/src/app/fuse-fake-db/**/*",
-                "**/src/assets/angular-material-examples/**/*"
-            ]
-        },
-        {
-            "project": "e2e/tsconfig.e2e.json",
-            "exclude": [
-                "**/node_modules/**",
-                "**/src/app/fuse-fake-db/**/*",
-                "**/src/assets/angular-material-examples/**/*"
-            ]
-        }
-    ],
-    "test": {
-        "karma": {
-            "config": "./karma.conf.js"
-        }
-    },
-    "defaults": {
-        "styleExt": "scss",
-        "component": {}
-    }
-}

.editorconfig

@@ -1,3 +1,4 @@
+# Editor configuration, see http://editorconfig.org
 root = true
 
 [*]

.gitignore

@@ -30,13 +30,10 @@
 /coverage
 /libpeerconnection.log
 npm-debug.log
+yarn-error.log
 testem.log
 /typings
 
-# e2e
-/e2e/*.js
-/e2e/*.map
-
 # System Files
 .DS_Store
 Thumbs.db

README.md

@@ -1,6 +1,6 @@
 # Fuse2
 
-Material Design Admin Template with Angular 5+ and Angular Material 2
+Material Design Admin Template with Angular 6+ and Angular Material 2
 
 ## The Community
 
@@ -14,11 +14,11 @@ Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app w
 
 ## Code scaffolding
 
-Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|module`.
+Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
 
 ## Build
 
-Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `-prod` flag for a production build.
+Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.
 
 ## Running unit tests
 
@@ -27,4 +27,8 @@ Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.
 ## Running end-to-end tests
 
 Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
-Before running the tests make sure you are serving the app via `ng serve`.
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
+

angular.json

@@ -0,0 +1,140 @@
+{
+    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+    "version": 1,
+    "newProjectRoot": "projects",
+    "projects": {
+        "fuse": {
+            "root": "",
+            "sourceRoot": "src",
+            "projectType": "application",
+            "prefix": "app",
+            "schematics": {
+                "@schematics/angular:component": {
+                    "styleext": "scss"
+                }
+            },
+            "architect": {
+                "build": {
+                    "builder": "@angular-devkit/build-angular:browser",
+                    "options": {
+                        "outputPath": "dist/fuse",
+                        "index": "src/index.html",
+                        "main": "src/main.ts",
+                        "polyfills": "src/polyfills.ts",
+                        "tsConfig": "src/tsconfig.app.json",
+                        "assets": [
+                            "src/favicon.ico",
+                            "src/assets",
+                            "src/app/main/content/components/angular-material"
+                        ],
+                        "styles": [
+                            "src/styles.scss"
+                        ],
+                        "scripts": []
+                    },
+                    "configurations": {
+                        "production": {
+                            "fileReplacements": [
+                                {
+                                    "replace": "src/environments/environment.ts",
+                                    "with": "src/environments/environment.prod.ts"
+                                }
+                            ],
+                            "optimization": true,
+                            "outputHashing": "all",
+                            "sourceMap": false,
+                            "extractCss": true,
+                            "namedChunks": false,
+                            "aot": true,
+                            "extractLicenses": true,
+                            "vendorChunk": false,
+                            "buildOptimizer": true
+                        }
+                    }
+                },
+                "serve": {
+                    "builder": "@angular-devkit/build-angular:dev-server",
+                    "options": {
+                        "browserTarget": "fuse:build"
+                    },
+                    "configurations": {
+                        "production": {
+                            "browserTarget": "fuse:build:production"
+                        },
+                        "hmr": {
+                            "hmr": true,
+                            "fileReplacements": [
+                                {
+                                    "replace": "src/environments/environment.ts",
+                                    "with": "src/environments/environment.hmr.ts"
+                                }
+                            ]
+                        }
+                    }
+                },
+                "extract-i18n": {
+                    "builder": "@angular-devkit/build-angular:extract-i18n",
+                    "options": {
+                        "browserTarget": "fuse:build"
+                    }
+                },
+                "test": {
+                    "builder": "@angular-devkit/build-angular:karma",
+                    "options": {
+                        "main": "src/test.ts",
+                        "polyfills": "src/polyfills.ts",
+                        "tsConfig": "src/tsconfig.spec.json",
+                        "karmaConfig": "src/karma.conf.js",
+                        "styles": [
+                            "styles.scss"
+                        ],
+                        "scripts": [],
+                        "assets": [
+                            "src/favicon.ico",
+                            "src/assets"
+                        ]
+                    }
+                },
+                "lint": {
+                    "builder": "@angular-devkit/build-angular:tslint",
+                    "options": {
+                        "tsConfig": [
+                            "src/tsconfig.app.json",
+                            "src/tsconfig.spec.json"
+                        ],
+                        "exclude": [
+                            "**/node_modules/**",
+                            "**/src/app/fuse-fake-db/**/*",
+                            "**/src/assets/angular-material-examples/**/*"
+                        ]
+                    }
+                }
+            }
+        },
+        "fuse-e2e": {
+            "root": "e2e/",
+            "projectType": "application",
+            "architect": {
+                "e2e": {
+                    "builder": "@angular-devkit/build-angular:protractor",
+                    "options": {
+                        "protractorConfig": "e2e/protractor.conf.js",
+                        "devServerTarget": "fuse:serve"
+                    }
+                },
+                "lint": {
+                    "builder": "@angular-devkit/build-angular:tslint",
+                    "options": {
+                        "tsConfig": "e2e/tsconfig.e2e.json",
+                        "exclude": [
+                            "**/node_modules/**",
+                            "**/src/app/fuse-fake-db/**/*",
+                            "**/src/assets/angular-material-examples/**/*"
+                        ]
+                    }
+                }
+            }
+        }
+    },
+    "defaultProject": "fuse"
+}

e2e/protractor.conf.js

@@ -0,0 +1,31 @@
+// Protractor configuration file, see link for more information
+// https://github.com/angular/protractor/blob/master/lib/config.ts
+
+const {SpecReporter} = require('jasmine-spec-reporter');
+
+exports.config = {
+    allScriptsTimeout: 11000,
+    specs            : [
+        './src/**/*.e2e-spec.ts'
+    ],
+    capabilities     : {
+        'browserName': 'chrome'
+    },
+    directConnect    : true,
+    baseUrl          : 'http://localhost:4200/',
+    framework        : 'jasmine',
+    jasmineNodeOpts  : {
+        showColors            : true,
+        defaultTimeoutInterval: 30000,
+        print                 : function ()
+        {
+        }
+    },
+    onPrepare()
+    {
+        require('ts-node').register({
+            project: require('path').join(__dirname, './tsconfig.e2e.json')
+        });
+        jasmine.getEnv().addReporter(new SpecReporter({spec: {displayStacktrace: true}}));
+    }
+};

e2e/src/app.e2e-spec.ts

@@ -9,6 +9,6 @@ describe('Fuse2 App', () => {
 
     it('should display welcome message', () => {
         page.navigateTo();
-        expect(page.getParagraphText()).toEqual('Welcome to app!');
+        expect(page.getParagraphText()).toEqual('Welcome to Fuse2!');
     });
 });

e2e/tsconfig.e2e.json

@@ -1,8 +1,7 @@
 {
   "extends": "../tsconfig.json",
   "compilerOptions": {
-    "outDir": "../out-tsc/e2e",
+    "outDir": "../out-tsc/app",
-    "baseUrl": "./",
     "module": "commonjs",
     "target": "es5",
     "types": [

karma.conf.js

@@ -1,33 +0,0 @@
-// Karma configuration file, see link for more information
-// https://karma-runner.github.io/1.0/config/configuration-file.html
-
-module.exports = function (config) {
-    config.set({
-        basePath: '',
-        frameworks: ['jasmine', '@angular/cli'],
-        plugins: [
-            require('karma-jasmine'),
-            require('karma-chrome-launcher'),
-            require('karma-jasmine-html-reporter'),
-            require('karma-coverage-istanbul-reporter'),
-            require('@angular/cli/plugins/karma')
-        ],
-        client:{
-            clearContext: false // leave Jasmine Spec Runner output visible in browser
-        },
-        coverageIstanbulReporter: {
-            reports: [ 'html', 'lcovonly' ],
-            fixWebpackSourcePaths: true
-        },
-        angularCli: {
-            environment: 'dev'
-        },
-        reporters: ['progress', 'kjhtml'],
-        port: 9876,
-        colors: true,
-        logLevel: config.LOG_INFO,
-        autoWatch: true,
-        browsers: ['Chrome'],
-        singleRun: false
-    });
-};

package.json

@@ -1,11 +1,11 @@
 {
   "name": "fuse",
-  "version": "5.2.10",
+  "version": "6.0.0",
   "license": "https://themeforest.net/licenses/terms/regular",
   "scripts": {
     "ng": "ng",
     "start": "ng serve --open",
-    "start-hmr": "ng serve --hmr -e=hmr -sm=false",
+    "start-hmr": "ng serve --configuration hmr -sm=false",
     "start-hmr-sourcemaps": "ng serve --hmr -e=hmr",
     "build": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --dev",
     "build-stats": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --dev --stats-json",
@@ -19,69 +19,71 @@
   "private": true,
   "dependencies": {
     "@agm/core": "1.0.0-beta.2",
-    "@angular/animations": "5.2.8",
+    "@angular/animations": "6.0.0",
-    "@angular/cdk": "5.2.4",
+    "@angular/cdk": "6.0.0",
-    "@angular/common": "5.2.8",
+    "@angular/common": "6.0.0",
-    "@angular/compiler": "5.2.8",
+    "@angular/compiler": "6.0.0",
-    "@angular/core": "5.2.8",
+    "@angular/core": "6.0.0",
-    "@angular/flex-layout": "5.0.0-beta.14",
+    "@angular/flex-layout": "6.0.0-beta.15",
-    "@angular/forms": "5.2.8",
+    "@angular/forms": "6.0.0",
-    "@angular/http": "5.2.8",
+    "@angular/http": "6.0.0",
-    "@angular/material": "5.2.4",
+    "@angular/material": "6.0.0",
-    "@angular/material-moment-adapter": "5.2.4",
+    "@angular/material-moment-adapter": "6.0.0",
-    "@angular/platform-browser": "5.2.8",
+    "@angular/platform-browser": "6.0.0",
-    "@angular/platform-browser-dynamic": "5.2.8",
+    "@angular/platform-browser-dynamic": "6.0.0",
-    "@angular/router": "5.2.8",
+    "@angular/router": "6.0.0",
     "@ngrx/effects": "5.2.0",
     "@ngrx/router-store": "5.2.0",
     "@ngrx/store": "5.2.0",
     "@ngrx/store-devtools": "5.2.0",
-    "@ngx-translate/core": "9.1.1",
+    "@ngx-translate/core": "10.0.1",
-    "@swimlane/ngx-charts": "7.1.1",
+    "@swimlane/ngx-charts": "7.3.0",
-    "@swimlane/ngx-datatable": "11.2.0",
+    "@swimlane/ngx-datatable": "11.3.2",
-    "@swimlane/ngx-dnd": "3.1.0",
+    "@swimlane/ngx-dnd": "3.2.0",
     "@types/prismjs": "1.9.0",
-    "angular-calendar": "0.23.6",
+    "angular-calendar": "0.24.0",
-    "angular-in-memory-web-api": "0.5.3",
+    "angular-in-memory-web-api": "0.6.0",
     "chart.js": "2.7.2",
     "classlist.js": "1.1.20150312",
-    "core-js": "2.5.3",
+    "core-js": "2.5.5",
-    "d3": "4.13.0",
+    "d3": "5.1.0",
     "hammerjs": "2.0.8",
     "intl": "1.2.5",
-    "lodash": "4.17.5",
+    "lodash": "4.17.10",
-    "moment": "2.21.0",
+    "moment": "2.22.1",
     "ng2-charts": "1.6.0",
-    "ngrx-store-freeze": "0.2.1",
+    "ngrx-store-freeze": "0.2.2",
-    "ngx-color-picker": "5.3.4",
+    "ngx-color-picker": "5.3.8",
     "ngx-cookie-service": "1.0.10",
     "perfect-scrollbar": "1.3.0",
-    "prismjs": "1.11.0",
+    "prismjs": "1.14.0",
-    "rxjs": "5.5.6",
+    "rxjs": "6.1.0",
+    "rxjs-compat": "6.1.0",
     "web-animations-js": "2.3.1",
-    "zone.js": "0.8.20"
+    "zone.js": "0.8.26"
   },
   "devDependencies": {
-    "@angular/cli": "1.7.3",
+    "@angular/cli": "6.0.0",
-    "@angular/compiler-cli": "5.2.8",
+    "@angular/compiler-cli": "6.0.0",
-    "@angular/language-service": "5.2.8",
+    "@angular/language-service": "6.0.0",
+    "@angular-devkit/build-angular": "0.6.0",
     "@angularclass/hmr": "2.1.3",
-    "@types/jasmine": "2.8.6",
+    "@types/jasmine": "2.8.7",
     "@types/jasminewd2": "2.0.3",
-    "@types/lodash": "4.14.106",
+    "@types/lodash": "4.14.108",
-    "@types/node": "6.0.101",
+    "@types/node": "8.9.5",
     "codelyzer": "4.2.1",
-    "jasmine-core": "2.8.0",
+    "jasmine-core": "2.99.1",
     "jasmine-spec-reporter": "4.2.1",
-    "karma": "2.0.0",
+    "karma": "1.7.1",
     "karma-chrome-launcher": "2.2.0",
     "karma-coverage-istanbul-reporter": "1.4.2",
-    "karma-jasmine": "1.1.1",
+    "karma-jasmine": "1.1.2",
     "karma-jasmine-html-reporter": "0.2.2",
-    "protractor": "5.1.2",
+    "protractor": "5.3.1",
-    "ts-node": "4.1.0",
+    "ts-node": "5.0.1",
     "tslint": "5.9.1",
-    "typescript": "2.6.2",
+    "typescript": "2.7.2",
     "webpack-bundle-analyzer": "2.11.1"
   }
 }

protractor.conf.js

@@ -1,28 +0,0 @@
-// Protractor configuration file, see link for more information
-// https://github.com/angular/protractor/blob/master/lib/config.ts
-
-const { SpecReporter } = require('jasmine-spec-reporter');
-
-exports.config = {
-    allScriptsTimeout: 11000,
-    specs: [
-        './e2e/**/*.e2e-spec.ts'
-    ],
-    capabilities: {
-        'browserName': 'chrome'
-    },
-    directConnect: true,
-    baseUrl: 'http://localhost:4200/',
-    framework: 'jasmine',
-    jasmineNodeOpts: {
-        showColors: true,
-        defaultTimeoutInterval: 30000,
-        print: function() {}
-    },
-    onPrepare() {
-        require('ts-node').register({
-            project: 'e2e/tsconfig.e2e.json'
-        });
-        jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
-    }
-};

src/@fuse/components/highlight/prism-languages.ts

@@ -5,6 +5,7 @@ import 'prismjs/components/prism-csharp';
 import 'prismjs/components/prism-css';
 import 'prismjs/components/prism-diff';
 import 'prismjs/components/prism-markup';
+import 'prismjs/components/prism-markup-templating';
 import 'prismjs/components/prism-java';
 import 'prismjs/components/prism-javascript';
 import 'prismjs/components/prism-json';

src/app/main/content/components/angular-material/material.module.ts

@@ -1,43 +1,25 @@
 import { NgModule } from '@angular/core';
-import {
+
-    MatAutocompleteModule,
-    MatButtonModule,
-    MatButtonToggleModule,
-    MatCheckboxModule,
-    MatToolbarModule,
-    MatTooltipModule,
-    MatCardModule,
-    MatChipsModule,
-    MatDatepickerModule,
-    MatDialogModule,
-    MatExpansionModule,
-    MatFormFieldModule,
-    MatGridListModule,
-    MatIconModule,
-    MatInputModule,
-    MatListModule,
-    MatMenuModule,
-    MatNativeDateModule,
-    MatPaginatorModule,
-    MatProgressBarModule,
-    MatProgressSpinnerModule,
-    MatRadioModule,
-    MatRippleModule,
-    MatSelectModule,
-    MatSidenavModule,
-    MatSliderModule,
-    MatSlideToggleModule,
-    MatSnackBarModule,
-    MatSortModule,
-    MatTableModule,
-    MatTabsModule,
-    MatStepperModule
-} from '@angular/material';
 import { CdkTableModule } from '@angular/cdk/table';
+import { CdkTreeModule } from '@angular/cdk/tree';
+import {
+    MatAutocompleteModule, MatBadgeModule, MatBottomSheetModule, MatButtonModule,
+    MatButtonToggleModule, MatCardModule, MatCheckboxModule, MatChipsModule, MatDatepickerModule,
+    MatDialogModule, MatDividerModule, MatExpansionModule, MatFormFieldModule, MatGridListModule,
+    MatIconModule, MatInputModule, MatListModule, MatMenuModule, MatPaginatorModule,
+    MatProgressBarModule, MatProgressSpinnerModule, MatRadioModule, MatRippleModule, MatSelectModule,
+    MatSidenavModule, MatSliderModule, MatSlideToggleModule, MatSnackBarModule, MatSortModule,
+    MatStepperModule, MatTableModule, MatTabsModule, MatToolbarModule, MatTooltipModule, MatTreeModule
+} from '@angular/material';
+import { MatMomentDateModule } from '@angular/material-moment-adapter';
 
 @NgModule({
     imports: [
+        CdkTableModule,
+        CdkTreeModule,
         MatAutocompleteModule,
+        MatBadgeModule,
+        MatBottomSheetModule,
         MatButtonModule,
         MatButtonToggleModule,
         MatCardModule,
@@ -45,6 +27,7 @@ import { CdkTableModule } from '@angular/cdk/table';
         MatChipsModule,
         MatDatepickerModule,
         MatDialogModule,
+        MatDividerModule,
         MatExpansionModule,
         MatFormFieldModule,
         MatGridListModule,
@@ -52,7 +35,7 @@ import { CdkTableModule } from '@angular/cdk/table';
         MatInputModule,
         MatListModule,
         MatMenuModule,
-        MatNativeDateModule,
+        MatMomentDateModule,
         MatPaginatorModule,
         MatProgressBarModule,
         MatProgressSpinnerModule,
@@ -60,19 +43,23 @@ import { CdkTableModule } from '@angular/cdk/table';
         MatRippleModule,
         MatSelectModule,
         MatSidenavModule,
-        MatSliderModule,
         MatSlideToggleModule,
+        MatSliderModule,
         MatSnackBarModule,
-        MatStepperModule,
         MatSortModule,
+        MatStepperModule,
         MatTableModule,
         MatTabsModule,
         MatToolbarModule,
         MatTooltipModule,
-        CdkTableModule
+        MatTreeModule
     ],
     exports: [
+        CdkTableModule,
+        CdkTreeModule,
         MatAutocompleteModule,
+        MatBadgeModule,
+        MatBottomSheetModule,
         MatButtonModule,
         MatButtonToggleModule,
         MatCardModule,
@@ -80,13 +67,15 @@ import { CdkTableModule } from '@angular/cdk/table';
         MatChipsModule,
         MatDatepickerModule,
         MatDialogModule,
+        MatDividerModule,
         MatExpansionModule,
+        MatFormFieldModule,
         MatGridListModule,
         MatIconModule,
         MatInputModule,
         MatListModule,
         MatMenuModule,
-        MatNativeDateModule,
+        MatMomentDateModule,
         MatPaginatorModule,
         MatProgressBarModule,
         MatProgressSpinnerModule,
@@ -94,19 +83,18 @@ import { CdkTableModule } from '@angular/cdk/table';
         MatRippleModule,
         MatSelectModule,
         MatSidenavModule,
-        MatSliderModule,
         MatSlideToggleModule,
+        MatSliderModule,
         MatSnackBarModule,
-        MatStepperModule,
         MatSortModule,
+        MatStepperModule,
         MatTableModule,
         MatTabsModule,
         MatToolbarModule,
         MatTooltipModule,
-        CdkTableModule
+        MatTreeModule
     ]
 })
 export class MaterialModule
 {
-
 }

src/app/navigation/navigation.ts

@@ -668,16 +668,16 @@ export const navigation = [
                         'type'    : 'group',
                         'children': [
                             {
-                                'id'   : 'list',
+                                'id'   : 'badge',
-                                'title': 'List',
+                                'title': 'Badge',
                                 'type' : 'item',
-                                'url'  : '/components/angular-material/list'
+                                'url'  : '/components/angular-material/badge'
                             },
                             {
-                                'id'   : 'grid-list',
+                                'id'   : 'bottom-sheet',
-                                'title': 'Grid list',
+                                'title': 'Bottom Sheet',
                                 'type' : 'item',
-                                'url'  : '/components/angular-material/grid-list'
+                                'url'  : '/components/angular-material/bottom-sheet'
                             },
                             {
                                 'id'   : 'card',
@@ -691,18 +691,6 @@ export const navigation = [
                                 'type' : 'item',
                                 'url'  : '/components/angular-material/divider'
                             },
-                            {
-                                'id'   : 'stepper',
-                                'title': 'Stepper',
-                                'type' : 'item',
-                                'url'  : '/components/angular-material/stepper'
-                            },
-                            {
-                                'id'   : 'tabs',
-                                'title': 'Tabs',
-                                'type' : 'item',
-                                'url'  : '/components/angular-material/tabs'
-                            },
                             {
                                 'id'   : 'elevation',
                                 'title': 'Elevation',
@@ -714,6 +702,30 @@ export const navigation = [
                                 'title': 'Expansion Panel',
                                 'type' : 'item',
                                 'url'  : '/components/angular-material/expansion-panel'
+                            },
+                            {
+                                'id'   : 'grid-list',
+                                'title': 'Grid list',
+                                'type' : 'item',
+                                'url'  : '/components/angular-material/grid-list'
+                            },
+                            {
+                                'id'   : 'list',
+                                'title': 'List',
+                                'type' : 'item',
+                                'url'  : '/components/angular-material/list'
+                            },
+                            {
+                                'id'   : 'stepper',
+                                'title': 'Stepper',
+                                'type' : 'item',
+                                'url'  : '/components/angular-material/stepper'
+                            },
+                            {
+                                'id'   : 'tabs',
+                                'title': 'Tabs',
+                                'type' : 'item',
+                                'url'  : '/components/angular-material/tabs'
                             }
                         ]
                     },
@@ -771,17 +783,17 @@ export const navigation = [
                                 'type' : 'item',
                                 'url'  : '/components/angular-material/dialog'
                             },
-                            {
-                                'id'   : 'tooltip',
-                                'title': 'Tooltip',
-                                'type' : 'item',
-                                'url'  : '/components/angular-material/tooltip'
-                            },
                             {
                                 'id'   : 'snackbar',
                                 'title': 'Snackbar',
                                 'type' : 'item',
                                 'url'  : '/components/angular-material/snackbar'
+                            },
+                            {
+                                'id'   : 'tooltip',
+                                'title': 'Tooltip',
+                                'type' : 'item',
+                                'url'  : '/components/angular-material/tooltip'
                             }
                         ]
                     },
@@ -791,10 +803,10 @@ export const navigation = [
                         'type'    : 'group',
                         'children': [
                             {
-                                'id'   : 'table',
+                                'id'   : 'paginator',
-                                'title': 'Table',
+                                'title': 'Paginator',
                                 'type' : 'item',
-                                'url'  : '/components/angular-material/data-table'
+                                'url'  : '/components/angular-material/paginator'
                             },
                             {
                                 'id'   : 'sort-header',
@@ -803,12 +815,18 @@ export const navigation = [
                                 'url'  : '/components/angular-material/sort-header'
                             },
                             {
-                                'id'   : 'paginator',
+                                'id'   : 'table',
-                                'title': 'Paginator',
+                                'title': 'Table',
                                 'type' : 'item',
-                                'url'  : '/components/angular-material/paginator'
+                                'url'  : '/components/angular-material/table'
                             }
                         ]
+                    },
+                    {
+                        'id'   : 'tree',
+                        'title': 'Tree',
+                        'type' : 'item',
+                        'url'  : '/components/angular-material/tree'
                     }
                 ]
             },

src/assets/angular-material-examples/autocomplete-auto-active-first-option/autocomplete-auto-active-first-option-example.ts

@@ -1,8 +1,7 @@
 import {Component} from '@angular/core';
 import {FormControl} from '@angular/forms';
-import {Observable} from 'rxjs/Observable';
+import {Observable} from 'rxjs';
-import {startWith} from 'rxjs/operators/startWith';
+import {map, startWith} from 'rxjs/operators';
-import {map} from 'rxjs/operators/map';
 
 /**
  * @title Highlight the first autocomplete option

src/assets/angular-material-examples/autocomplete-display/autocomplete-display-example.ts

@@ -1,14 +1,10 @@
 import {Component} from '@angular/core';
 import {FormControl} from '@angular/forms';
-import { Observable } from 'rxjs/Observable';
+import {Observable} from 'rxjs';
-import 'rxjs/add/operator/startWith';
+import {map, startWith} from 'rxjs/operators';
-import 'rxjs/add/operator/map';
 
-export class User
+export class User {
-{
+  constructor(public name: string) { }
-    constructor(public name: string)
-    {
-    }
 }
 
 /**
@@ -19,8 +15,7 @@ export class User
   templateUrl: 'autocomplete-display-example.html',
   styleUrls: ['autocomplete-display-example.css']
 })
-export class AutocompleteDisplayExample
+export class AutocompleteDisplayExample {
-{
 
   myControl = new FormControl();
 
@@ -32,26 +27,22 @@ export class AutocompleteDisplayExample
 
   filteredOptions: Observable<User[]>;
 
-    ngOnInit()
+  ngOnInit() {
-    {
     this.filteredOptions = this.myControl.valueChanges
-                                   .startWith(null)
+      .pipe(
-                                   .map(user => user && typeof user === 'object' ? user.name : user)
+        startWith<string | User>(''),
-                                   .map(name => name ? this.filter(name) : this.options.slice());
+        map(value => typeof value === 'string' ? value : value.name),
+        map(name => name ? this.filter(name) : this.options.slice())
+      );
   }
 
-    filter(name: string): User[]
+  filter(name: string): User[] {
-    {
     return this.options.filter(option =>
       option.name.toLowerCase().indexOf(name.toLowerCase()) === 0);
   }
 
-    displayFn(user: User): string
+  displayFn(user?: User): string | undefined {
-    {
+    return user ? user.name : undefined;
-        if ( user )
-        {
-            return user.name;
-        }
   }
 
 }

src/assets/angular-material-examples/autocomplete-filter/autocomplete-filter-example.ts

@@ -1,8 +1,7 @@
 import {Component} from '@angular/core';
 import {FormControl} from '@angular/forms';
-import { Observable } from 'rxjs/Observable';
+import {Observable} from 'rxjs';
-import 'rxjs/add/operator/startWith';
+import {map, startWith} from 'rxjs/operators';
-import 'rxjs/add/operator/map';
 
 /**
  * @title Filter autocomplete
@@ -12,8 +11,7 @@ import 'rxjs/add/operator/map';
   templateUrl: 'autocomplete-filter-example.html',
   styleUrls: ['autocomplete-filter-example.css']
 })
-export class AutocompleteFilterExample
+export class AutocompleteFilterExample {
-{
 
   myControl: FormControl = new FormControl();
 
@@ -25,17 +23,17 @@ export class AutocompleteFilterExample
 
   filteredOptions: Observable<string[]>;
 
-    ngOnInit()
+  ngOnInit() {
-    {
     this.filteredOptions = this.myControl.valueChanges
-                                   .startWith(null)
+      .pipe(
-                                   .map(val => val ? this.filter(val) : this.options.slice());
+        startWith(''),
+        map(val => this.filter(val))
+      );
   }
 
-    filter(val: string): string[]
+  filter(val: string): string[] {
-    {
     return this.options.filter(option =>
-            option.toLowerCase().indexOf(val.toLowerCase()) === 0);
+      option.toLowerCase().includes(val.toLowerCase()));
   }
 
 }

src/assets/angular-material-examples/autocomplete-optgroup/autocomplete-optgroup-example.html

@@ -0,0 +1,12 @@
+<form [formGroup]="stateForm">
+  <mat-form-field>
+    <input type="text" matInput placeholder="States Group" formControlName="stateGroup" required [matAutocomplete]="autoGroup"/>
+      <mat-autocomplete #autoGroup="matAutocomplete">
+        <mat-optgroup *ngFor="let group of stateGroupOptions | async" [label]="group.letter">
+          <mat-option *ngFor="let name of group.names" [value]="name">
+            {{ name }}
+          </mat-option>
+      </mat-optgroup>
+    </mat-autocomplete>
+  </mat-form-field> 
+</form>  

src/assets/angular-material-examples/autocomplete-optgroup/autocomplete-optgroup-example.ts

@@ -0,0 +1,111 @@
+import {Component, OnInit} from '@angular/core';
+import {FormGroup, FormBuilder} from '@angular/forms';
+import {Observable} from 'rxjs';
+import {startWith, map} from 'rxjs/operators';
+
+export interface StateGroup {
+  letter: string;
+  names: string[];
+}
+
+/**
+ * @title Option groups autocomplete
+ */
+@Component({
+  templateUrl: './autocomplete-optgroup-example.html',
+  styleUrls: ['./autocomplete-optgroup-example.css'],
+})
+
+export class AutocompleteOptgroupExample implements OnInit {
+  stateForm: FormGroup = this.fb.group({
+    stateGroup: '',
+  });
+
+  stateGroups: StateGroup[] = [{
+    letter: 'A',
+    names: ['Alabama', 'Alaska', 'Arizona', 'Arkansas']
+  }, {
+    letter: 'C',
+    names: ['California', 'Colorado', 'Connecticut']
+  }, {
+    letter: 'D',
+    names: ['Delaware']
+  }, {
+    letter: 'F',
+    names: ['Florida']
+  }, {
+    letter: 'G',
+    names: ['Georgia']
+  }, {
+    letter: 'H',
+    names: ['Hawaii']
+  }, {
+    letter: 'I',
+    names: ['Idaho', 'Illinois', 'Indiana', 'Iowa']
+  }, {
+    letter: 'K',
+    names: ['Kansas', 'Kentucky']
+  }, {
+    letter: 'L',
+    names: ['Louisiana']
+  }, {
+    letter: 'M',
+    names: ['Maine', 'Maryland', 'Massachusetts', 'Michigan',
+      'Minnesota', 'Mississippi', 'Missouri', 'Montana']
+  }, {
+    letter: 'N',
+    names: ['Nebraska', 'Nevada', 'New Hampshire', 'New Jersey',
+      'New Mexico', 'New York', 'North Carolina', 'North Dakota']
+  }, {
+    letter: 'O',
+    names: ['Ohio', 'Oklahoma', 'Oregon']
+  }, {
+    letter: 'P',
+    names: ['Pennsylvania']
+  }, {
+    letter: 'R',
+    names: ['Rhode Island']
+  }, {
+    letter: 'S',
+    names: ['South Carolina', 'South Dakota']
+  }, {
+    letter: 'T',
+    names: ['Tennessee', 'Texas']
+  }, {
+    letter: 'U',
+    names: ['Utah']
+  }, {
+    letter: 'V',
+    names: ['Vermont', 'Virginia']
+  }, {
+    letter: 'W',
+    names: ['Washington', 'West Virginia', 'Wisconsin', 'Wyoming']
+  }];
+
+  stateGroupOptions: Observable<StateGroup[]>;
+
+  constructor(private fb: FormBuilder) { }
+
+  ngOnInit() {
+    this.stateGroupOptions = this.stateForm.get('stateGroup')!.valueChanges
+      .pipe(
+        startWith(''),
+        map(val => this.filterGroup(val))
+      );
+  }
+
+  filterGroup(val: string): StateGroup[] {
+    if (val) {
+      return this.stateGroups
+        .map(group => ({ letter: group.letter, names: this._filter(group.names, val) }))
+        .filter(group => group.names.length > 0);
+    }
+
+    return this.stateGroups;
+  }
+
+  private _filter(opt: string[], val: string) {
+    const filterValue = val.toLowerCase();
+    return opt.filter(item => item.toLowerCase().startsWith(filterValue));
+  }
+}

src/assets/angular-material-examples/autocomplete-overview/autocomplete-overview-example.html

@@ -3,9 +3,8 @@
     <input matInput placeholder="State" aria-label="State" [matAutocomplete]="auto" [formControl]="stateCtrl">
     <mat-autocomplete #auto="matAutocomplete">
       <mat-option *ngFor="let state of filteredStates | async" [value]="state.name">
-                <img style="vertical-align:middle;" aria-hidden src="{{state.flag}}" width="25"/>
+        <img style="vertical-align:middle;" aria-hidden src="{{state.flag}}" height="25" />
-                <span>{{ state.name }}</span>
+        <span>{{ state.name }}</span> |
-                |
         <small>Population: {{state.population}}</small>
       </mat-option>
     </mat-autocomplete>

src/assets/angular-material-examples/autocomplete-overview/autocomplete-overview-example.ts

@@ -1,9 +1,12 @@
 import {Component} from '@angular/core';
 import {FormControl} from '@angular/forms';
 
-import { Observable } from 'rxjs/Observable';
+import {Observable} from 'rxjs';
-import 'rxjs/add/operator/startWith';
+import {map, startWith} from 'rxjs/operators';
-import 'rxjs/add/operator/map';
+
+export class State {
+  constructor(public name: string, public population: string, public flag: string) { }
+}
 
 /**
  * @title Autocomplete overview
@@ -13,12 +16,11 @@ import 'rxjs/add/operator/map';
   templateUrl: 'autocomplete-overview-example.html',
   styleUrls: ['autocomplete-overview-example.css']
 })
-export class AutocompleteOverviewExample
+export class AutocompleteOverviewExample {
-{
   stateCtrl: FormControl;
   filteredStates: Observable<any[]>;
 
-    states: any[] = [
+  states: State[] = [
     {
       name: 'Arkansas',
       population: '2.978M',
@@ -45,16 +47,16 @@ export class AutocompleteOverviewExample
     }
   ];
 
-    constructor()
+  constructor() {
-    {
     this.stateCtrl = new FormControl();
     this.filteredStates = this.stateCtrl.valueChanges
-                                  .startWith(null)
+      .pipe(
-                                  .map(state => state ? this.filterStates(state) : this.states.slice());
+        startWith(''),
+        map(state => state ? this.filterStates(state) : this.states.slice())
+      );
   }
 
-    filterStates(name: string)
+  filterStates(name: string) {
-    {
     return this.states.filter(state =>
       state.name.toLowerCase().indexOf(name.toLowerCase()) === 0);
   }

src/assets/angular-material-examples/autocomplete-simple/autocomplete-simple-example.ts

@@ -9,8 +9,7 @@ import { FormControl } from '@angular/forms';
   templateUrl: 'autocomplete-simple-example.html',
   styleUrls: ['autocomplete-simple-example.css']
 })
-export class AutocompleteSimpleExample
+export class AutocompleteSimpleExample {
-{
 
   myControl: FormControl = new FormControl();
 

src/assets/angular-material-examples/badge-overview/badge-overview-example.html

@@ -0,0 +1,17 @@
+<p>
+  <span matBadge="4" matBadgeOverlap="false">Text with a badge</span>
+</p>
+
+<p>
+  Button with a badge on the left
+  <button mat-raised-button color="primary"
+      matBadge="8" matBadgePosition="before" matBadgeColor="accent">
+    Action
+  </button>
+</p>
+
+<p>
+  Icon with a badge
+  <mat-icon matBadge="15" matBadgeColor="warn">home</mat-icon>
+</p>
+

src/assets/angular-material-examples/badge-overview/badge-overview-example.ts

@@ -0,0 +1,12 @@
+import {Component} from '@angular/core';
+
+
+/**
+ * @title Badge overview
+ */
+@Component({
+  selector: 'badge-overview-example',
+  templateUrl: 'badge-overview-example.html',
+  styleUrls: ['badge-overview-example.css']
+})
+export class BadgeOverviewExample { }

src/assets/angular-material-examples/bottom-sheet-overview/bottom-sheet-overview-example-sheet.html

@@ -0,0 +1,21 @@
+<mat-nav-list>
+  <a href="https://keep.google.com/" mat-list-item (click)="openLink($event)">
+    <span mat-line>Google Keep</span>
+    <span mat-line>Add to a note</span>
+  </a>
+
+  <a href="https://docs.google.com/" mat-list-item (click)="openLink($event)">
+    <span mat-line>Google Docs</span>
+    <span mat-line>Embed in a document</span>
+  </a>
+
+  <a href="https://plus.google.com/" mat-list-item (click)="openLink($event)">
+    <span mat-line>Google Plus</span>
+    <span mat-line>Share with your friends</span>
+  </a>
+
+  <a href="https://hangouts.google.com/" mat-list-item (click)="openLink($event)">
+    <span mat-line>Google Hangouts</span>
+    <span mat-line>Show to your coworkers</span>
+  </a>
+</mat-nav-list>

src/assets/angular-material-examples/bottom-sheet-overview/bottom-sheet-overview-example.css

@@ -0,0 +1 @@
+/** No CSS for this example */

src/assets/angular-material-examples/bottom-sheet-overview/bottom-sheet-overview-example.html

@@ -0,0 +1,3 @@
+<p>You have receive a file called "cat-picture.jpeg".</p>
+
+<button mat-raised-button (click)="openBottomSheet()">Open file</button>

src/assets/angular-material-examples/bottom-sheet-overview/bottom-sheet-overview-example.ts

@@ -0,0 +1,31 @@
+import {Component} from '@angular/core';
+import {MatBottomSheet, MatBottomSheetRef} from '@angular/material';
+
+/**
+ * @title Bottom Sheet Overview
+ */
+@Component({
+  selector: 'bottom-sheet-overview-example',
+  templateUrl: 'bottom-sheet-overview-example.html',
+  styleUrls: ['bottom-sheet-overview-example.css'],
+})
+export class BottomSheetOverviewExample {
+  constructor(private bottomSheet: MatBottomSheet) {}
+
+  openBottomSheet(): void {
+    this.bottomSheet.open(BottomSheetOverviewExampleSheet);
+  }
+}
+
+@Component({
+  selector: 'bottom-sheet-overview-example-sheet',
+  templateUrl: 'bottom-sheet-overview-example-sheet.html',
+})
+export class BottomSheetOverviewExampleSheet {
+  constructor(private bottomSheetRef: MatBottomSheetRef<BottomSheetOverviewExampleSheet>) {}
+
+  openLink(event: MouseEvent): void {
+    this.bottomSheetRef.dismiss();
+    event.preventDefault();
+  }
+}

src/assets/angular-material-examples/button-overview/button-overview-example.ts

@@ -5,8 +5,7 @@ import { Component } from '@angular/core';
  */
 @Component({
   selector: 'button-overview-example',
-    templateUrl: 'button-overview-example.html'
+  templateUrl: 'button-overview-example.html',
+  styleUrls: ['button-overview-example.css'],
 })
-export class ButtonOverviewExample
+export class ButtonOverviewExample {}
-{
-}

src/assets/angular-material-examples/button-toggle-exclusive/button-toggle-exclusive-example.ts

@@ -6,8 +6,6 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'button-toggle-exclusive-example',
   templateUrl: 'button-toggle-exclusive-example.html',
-    styleUrls  : ['button-toggle-exclusive-example.css']
+  styleUrls: ['button-toggle-exclusive-example.css'],
 })
-export class ButtonToggleExclusiveExample
+export class ButtonToggleExclusiveExample {}
-{
-}

src/assets/angular-material-examples/button-toggle-overview/button-toggle-overview-example.html

@@ -1 +1,5 @@
-<mat-button-toggle>Toggle me!</mat-button-toggle>
+<mat-button-toggle-group name="fontStyle" aria-label="Font Style">
+  <mat-button-toggle value="bold">Bold</mat-button-toggle>
+  <mat-button-toggle value="italic">Italic</mat-button-toggle>
+  <mat-button-toggle value="underline">Underline</mat-button-toggle>
+</mat-button-toggle-group>

src/assets/angular-material-examples/button-toggle-overview/button-toggle-overview-example.ts

@@ -5,8 +5,7 @@ import { Component } from '@angular/core';
  */
 @Component({
   selector: 'button-toggle-overview-example',
-    templateUrl: 'button-toggle-overview-example.html'
+  templateUrl: 'button-toggle-overview-example.html',
+  styleUrls: ['button-toggle-overview-example.css'],
 })
-export class ButtonToggleOverviewExample
+export class ButtonToggleOverviewExample {}
-{
-}

src/assets/angular-material-examples/button-types/button-types-example.html

@@ -21,19 +21,19 @@
 <h3>Icon Buttons</h3>
 <div class="button-row">
   <button mat-icon-button>
-        <mat-icon class="mat-24" aria-label="Example icon-button with a heart icon">favorite</mat-icon>
+    <mat-icon aria-label="Example icon-button with a heart icon">favorite</mat-icon>
   </button>
   <button mat-icon-button color="primary">
-        <mat-icon class="mat-24" aria-label="Example icon-button with a heart icon">favorite</mat-icon>
+    <mat-icon aria-label="Example icon-button with a heart icon">favorite</mat-icon>
   </button>
   <button mat-icon-button color="accent">
-        <mat-icon class="mat-24" aria-label="Example icon-button with a heart icon">favorite</mat-icon>
+    <mat-icon aria-label="Example icon-button with a heart icon">favorite</mat-icon>
   </button>
   <button mat-icon-button color="warn">
-        <mat-icon class="mat-24" aria-label="Example icon-button with a heart icon">favorite</mat-icon>
+    <mat-icon aria-label="Example icon-button with a heart icon">favorite</mat-icon>
   </button>
   <button mat-icon-button disabled>
-        <mat-icon class="mat-24" aria-label="Example icon-button with a heart icon">favorite</mat-icon>
+    <mat-icon aria-label="Example icon-button with a heart icon">favorite</mat-icon>
   </button>
 </div>
 
@@ -45,7 +45,7 @@
   <button mat-fab color="warn">Warn</button>
   <button mat-fab disabled>Disabled</button>
   <button mat-fab>
-        <mat-icon class="mat-24" aria-label="Example icon-button with a heart icon">favorite</mat-icon>
+    <mat-icon aria-label="Example icon-button with a heart icon">favorite</mat-icon>
   </button>
   <a mat-fab routerLink=".">Link</a>
 </div>
@@ -58,7 +58,7 @@
   <button mat-mini-fab color="warn">Warn</button>
   <button mat-mini-fab disabled>Disabled</button>
   <button mat-mini-fab>
-        <mat-icon class="mat-24" aria-label="Example icon-button with a heart icon">favorite</mat-icon>
+    <mat-icon aria-label="Example icon-button with a heart icon">favorite</mat-icon>
   </button>
   <a mat-mini-fab routerLink=".">Link</a>
 </div>

src/assets/angular-material-examples/button-types/button-types-example.ts

@@ -6,8 +6,6 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'button-types-example',
   templateUrl: 'button-types-example.html',
-    styleUrls  : ['button-types-example.css']
+  styleUrls: ['button-types-example.css'],
 })
-export class ButtonTypesExample
+export class ButtonTypesExample {}
-{
-}

src/assets/angular-material-examples/card-fancy/card-fancy-example.css

@@ -1,8 +1,8 @@
 .example-card {
-    width: 400px;
+  max-width: 400px;
 }
 
 .example-header-image {
-    background-image: url('/assets/images/examples/shiba1.jpg');
+  background-image: url('https://material.angular.io/assets/img/examples/shiba1.jpg');
   background-size: cover;
 }

src/assets/angular-material-examples/card-fancy/card-fancy-example.html

@@ -4,7 +4,7 @@
     <mat-card-title>Shiba Inu</mat-card-title>
     <mat-card-subtitle>Dog Breed</mat-card-subtitle>
   </mat-card-header>
-    <img mat-card-image src="assets/images/examples/shiba2.jpg" alt="Photo of a Shiba Inu">
+  <img mat-card-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="Photo of a Shiba Inu">
   <mat-card-content>
     <p>
       The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan.

src/assets/angular-material-examples/card-fancy/card-fancy-example.ts

@@ -6,8 +6,6 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'card-fancy-example',
   templateUrl: 'card-fancy-example.html',
-    styleUrls  : ['card-fancy-example.css']
+  styleUrls: ['card-fancy-example.css'],
 })
-export class CardFancyExample
+export class CardFancyExample {}
-{
-}

src/assets/angular-material-examples/card-overview/card-overview-example.ts

@@ -5,8 +5,7 @@ import { Component } from '@angular/core';
  */
 @Component({
   selector: 'card-overview-example',
-    templateUrl: 'card-overview-example.html'
+  templateUrl: 'card-overview-example.html',
+  styleUrls: ['card-overview-example.css'],
 })
-export class CardOverviewExample
+export class CardOverviewExample {}
-{
-}

src/assets/angular-material-examples/cdk-table-basic/cdk-table-basic-example.css

@@ -17,7 +17,7 @@
 
 .example-header-row, .example-row {
   display: flex;
-    border-bottom: 1px solid #CCC;
+  border-bottom: 1px solid #ccc;
   align-items: center;
   height: 32px;
   padding: 0 8px;

src/assets/angular-material-examples/cdk-table-basic/cdk-table-basic-example.ts

@@ -1,10 +1,6 @@
-import { Component } from '@angular/core';
 import {DataSource} from '@angular/cdk/collections';
-import { BehaviorSubject } from 'rxjs/BehaviorSubject';
+import {Component} from '@angular/core';
-import { Observable } from 'rxjs/Observable';
+import {BehaviorSubject, Observable} from 'rxjs';
-import 'rxjs/add/operator/startWith';
-import 'rxjs/add/observable/merge';
-import 'rxjs/add/operator/map';
 
 /**
  * @title Basic CDK data-table
@@ -12,33 +8,26 @@ import 'rxjs/add/operator/map';
 @Component({
   selector: 'cdk-table-basic-example',
   styleUrls: ['cdk-table-basic-example.css'],
-    templateUrl: 'cdk-table-basic-example.html'
+  templateUrl: 'cdk-table-basic-example.html',
 })
-export class CdkTableBasicExample
+export class CdkTableBasicExample {
-{
   displayedColumns = ['userId', 'userName', 'progress', 'color'];
   exampleDatabase = new ExampleDatabase();
   dataSource: ExampleDataSource | null;
 
-    ngOnInit()
+  ngOnInit() {
-    {
     this.dataSource = new ExampleDataSource(this.exampleDatabase);
   }
 }
 
 /** Constants used to fill up our data base. */
-const COLORS = [
+const COLORS = ['maroon', 'red', 'orange', 'yellow', 'olive', 'green', 'purple',
-    'maroon', 'red', 'orange', 'yellow', 'olive', 'green', 'purple',
+  'fuchsia', 'lime', 'teal', 'aqua', 'blue', 'navy', 'black', 'gray'];
-    'fuchsia', 'lime', 'teal', 'aqua', 'blue', 'navy', 'black', 'gray'
+const NAMES = ['Maia', 'Asher', 'Olivia', 'Atticus', 'Amelia', 'Jack',
-];
-const NAMES = [
-    'Maia', 'Asher', 'Olivia', 'Atticus', 'Amelia', 'Jack',
   'Charlotte', 'Theodore', 'Isla', 'Oliver', 'Isabella', 'Jasper',
-    'Cora', 'Levi', 'Violet', 'Arthur', 'Mia', 'Thomas', 'Elizabeth'
+  'Cora', 'Levi', 'Violet', 'Arthur', 'Mia', 'Thomas', 'Elizabeth'];
-];
 
-export interface UserData
+export interface UserData {
-{
   id: string;
   name: string;
   progress: string;
@@ -46,36 +35,25 @@ export interface UserData
 }
 
 /** An example database that the data source uses to retrieve data for the table. */
-export class ExampleDatabase
+export class ExampleDatabase {
-{
   /** Stream that emits whenever the data has been modified. */
   dataChange: BehaviorSubject<UserData[]> = new BehaviorSubject<UserData[]>([]);
+  get data(): UserData[] { return this.dataChange.value; }
 
-    get data(): UserData[]
+  constructor() {
-    {
-        return this.dataChange.value;
-    }
-
-    constructor()
-    {
     // Fill up the database with 100 users.
-        for ( let i = 0; i < 100; i++ )
+    for (let i = 0; i < 100; i++) { this.addUser(); }
-        {
-            this.addUser();
-        }
   }
 
   /** Adds a new user to the database. */
-    addUser()
+  addUser() {
-    {
     const copiedData = this.data.slice();
     copiedData.push(this.createNewUser());
     this.dataChange.next(copiedData);
   }
 
   /** Builds and returns a new User. */
-    private createNewUser()
+  private createNewUser() {
-    {
     const name =
         NAMES[Math.round(Math.random() * (NAMES.length - 1))] + ' ' +
         NAMES[Math.round(Math.random() * (NAMES.length - 1))].charAt(0) + '.';
@@ -96,20 +74,15 @@ export class ExampleDatabase
  * the underlying data. Instead, it only needs to take the data and send the table exactly what
  * should be rendered.
  */
-export class ExampleDataSource extends DataSource<any>
+export class ExampleDataSource extends DataSource<any> {
-{
+  constructor(private _exampleDatabase: ExampleDatabase) {
-    constructor(private _exampleDatabase: ExampleDatabase)
-    {
     super();
   }
 
   /** Connect function called by the table to retrieve one stream containing the data to render. */
-    connect(): Observable<UserData[]>
+  connect(): Observable<UserData[]> {
-    {
     return this._exampleDatabase.dataChange;
   }
 
-    disconnect()
+  disconnect() {}
-    {
-    }
 }

src/assets/angular-material-examples/cdk-tree-flat/cdk-tree-flat-example.css

@@ -0,0 +1,4 @@
+.demo-tree-node {
+  display: flex;
+  align-items: center;
+}

src/assets/angular-material-examples/cdk-tree-flat/cdk-tree-flat-example.html

@@ -0,0 +1,14 @@
+<cdk-tree [dataSource]="dataSource" [treeControl]="treeControl">
+  <cdk-tree-node *cdkTreeNodeDef="let node" cdkTreeNodePadding class="demo-tree-node">
+    <button mat-icon-button disabled></button>
+    {{node.filename}}:  {{node.type}}
+  </cdk-tree-node>
+  <cdk-tree-node *cdkTreeNodeDef="let node; when: hasChild" cdkTreeNodePadding class="demo-tree-node">
+    <button mat-icon-button [attr.aria-label]="'toggle ' + node.filename" cdkTreeNodeToggle>
+      <mat-icon class="mat-icon-rtl-mirror">
+        {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
+      </mat-icon>
+    </button>
+    {{node.filename}}:  {{node.type}}
+  </cdk-tree-node>
+</cdk-tree>

src/assets/angular-material-examples/cdk-tree-flat/cdk-tree-flat-example.ts

@@ -0,0 +1,160 @@
+import {Component, Injectable} from '@angular/core';
+import {FlatTreeControl} from '@angular/cdk/tree';
+import {MatTreeFlattener, MatTreeFlatDataSource} from '@angular/material/tree';
+import {of, Observable, BehaviorSubject} from 'rxjs';
+
+/**
+ * File node data with nested structure.
+ * Each node has a filename, and a type or a list of children.
+ */
+export class FileNode {
+  children: FileNode[];
+  filename: string;
+  type: any;
+}
+
+/** Flat node with expandable and level information */
+export class FileFlatNode {
+  filename: string;
+  type: any;
+  level: number;
+  expandable: boolean;
+}
+
+/**
+ * The file structure tree data in string. The data could be parsed into a Json object
+ */
+const TREE_DATA = `
+  {
+    "Documents": {
+      "angular": {
+        "src": {
+          "core": "ts",
+          "compiler": "ts"
+        }
+      },
+      "material2": {
+        "src": {
+          "button": "ts",
+          "checkbox": "ts",
+          "input": "ts"
+        }
+      }
+    },
+    "Downloads": {
+        "Tutorial": "html",
+        "November": "pdf",
+        "October": "pdf"
+    },
+    "Pictures": {
+        "Sun": "png",
+        "Woods": "jpg",
+        "Photo Booth Library": {
+          "Contents": "dir",
+          "Pictures": "dir"
+        }
+    },
+    "Applications": {
+        "Chrome": "app",
+        "Calendar": "app",
+        "Webstorm": "app"
+    }
+}`;
+
+/**
+ * File database, it can build a tree structured Json object from string.
+ * Each node in Json object represents a file or a directory. For a file, it has filename and type.
+ * For a directory, it has filename and children (a list of files or directories).
+ * The input will be a json object string, and the output is a list of `FileNode` with nested
+ * structure.
+ */
+@Injectable()
+export class FileDatabase {
+  dataChange: BehaviorSubject<FileNode[]> = new BehaviorSubject<FileNode[]>([]);
+
+  get data(): FileNode[] { return this.dataChange.value; }
+
+  constructor() {
+    this.initialize();
+  }
+
+  initialize() {
+    // Parse the string to json object.
+    const dataObject = JSON.parse(TREE_DATA);
+
+    // Build the tree nodes from Json object. The result is a list of `FileNode` with nested
+    //     file node as children.
+    const data = this.buildFileTree(dataObject, 0);
+
+    // Notify the change.
+    this.dataChange.next(data);
+  }
+
+  /**
+   * Build the file structure tree. The `value` is the Json object, or a sub-tree of a Json object.
+   * The return value is the list of `FileNode`.
+   */
+  buildFileTree(value: any, level: number): FileNode[] {
+    let data: any[] = [];
+    for (let k in value) {
+      let v = value[k];
+      let node = new FileNode();
+      node.filename = `${k}`;
+      if (v === null || v === undefined) {
+        // no action
+      } else if (typeof v === 'object') {
+        node.children = this.buildFileTree(v, level + 1);
+      } else {
+        node.type = v;
+      }
+      data.push(node);
+    }
+    return data;
+  }
+}
+
+/**
+ * @title Tree with flat nodes
+ */
+@Component({
+  selector: 'cdk-tree-flat-example',
+  templateUrl: 'cdk-tree-flat-example.html',
+  styleUrls: ['cdk-tree-flat-example.css'],
+  providers: [FileDatabase]
+})
+export class CdkTreeFlatExample {
+
+  treeControl: FlatTreeControl<FileFlatNode>;
+
+  treeFlattener: MatTreeFlattener<FileNode, FileFlatNode>;
+
+  dataSource: MatTreeFlatDataSource<FileNode, FileFlatNode>;
+
+  constructor(database: FileDatabase) {
+    this.treeFlattener = new MatTreeFlattener(this.transformer, this._getLevel,
+      this._isExpandable, this._getChildren);
+    this.treeControl = new FlatTreeControl<FileFlatNode>(this._getLevel, this._isExpandable);
+    this.dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener);
+
+    database.dataChange.subscribe(data => {
+      this.dataSource.data = data;
+    });
+  }
+
+  transformer = (node: FileNode, level: number) => {
+    let flatNode = new FileFlatNode();
+    flatNode.filename = node.filename;
+    flatNode.type = node.type;
+    flatNode.level = level;
+    flatNode.expandable = !!node.children;
+    return flatNode;
+  }
+
+  private _getLevel = (node: FileFlatNode) => { return node.level; };
+
+  private _isExpandable = (node: FileFlatNode) => { return node.expandable; };
+
+  private _getChildren = (node: FileNode): Observable<FileNode[]> => { return of(node.children); };
+
+  hasChild = (_: number, _nodeData: FileFlatNode) => { return _nodeData.expandable; };
+}

src/assets/angular-material-examples/cdk-tree-nested/cdk-tree-nested-example.css

@@ -0,0 +1,15 @@
+.example-tree-invisible {
+  display: none;
+}
+
+.example-tree ul,
+.example-tree li {
+  margin-top: 0;
+  margin-bottom: 0;
+  list-style-type: none;
+}
+
+.example-tree-node {
+  display: block;
+  padding-left: 40px;
+}

src/assets/angular-material-examples/cdk-tree-nested/cdk-tree-nested-example.html

@@ -0,0 +1,17 @@
+<cdk-tree [dataSource]="nestedDataSource" [treeControl]="nestedTreeControl">
+  <cdk-nested-tree-node *cdkTreeNodeDef="let node" class="example-tree-node">
+    <button mat-icon-button disabled></button>
+    {{node.filename}}:  {{node.type}}
+  </cdk-nested-tree-node>
+  <cdk-nested-tree-node *cdkTreeNodeDef="let node; when: hasNestedChild" class="example-tree-node">
+    <button mat-icon-button [attr.aria-label]="'toggle ' + node.filename" cdkTreeNodeToggle>
+      <mat-icon class="mat-icon-rtl-mirror">
+        {{nestedTreeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
+      </mat-icon>
+    </button>
+    {{node.filename}}:  {{node.type}}
+    <div [class.example-tree-invisible]="!nestedTreeControl.isExpanded(node)">
+      <ng-container cdkTreeNodeOutlet></ng-container>
+    </div>
+  </cdk-nested-tree-node>
+</cdk-tree>

src/assets/angular-material-examples/cdk-tree-nested/cdk-tree-nested-example.ts

@@ -0,0 +1,131 @@
+import {Component, Injectable} from '@angular/core';
+import {NestedTreeControl} from '@angular/cdk/tree';
+import {MatTreeNestedDataSource} from '@angular/material/tree';
+import {of, BehaviorSubject} from 'rxjs';
+
+/**
+ * Json node data with nested structure. Each node has a filename and a value or a list of children
+ */
+export class FileNode {
+  children: FileNode[];
+  filename: string;
+  type: any;
+}
+
+/**
+ * The Json tree data in string. The data could be parsed into Json object
+ */
+const TREE_DATA = `
+  {
+    "Documents": {
+      "angular": {
+        "src": {
+          "core": "ts",
+          "compiler": "ts"
+        }
+      },
+      "material2": {
+        "src": {
+          "button": "ts",
+          "checkbox": "ts",
+          "input": "ts"
+        }
+      }
+    },
+    "Downloads": {
+        "Tutorial": "html",
+        "November": "pdf",
+        "October": "pdf"
+    },
+    "Pictures": {
+        "Sun": "png",
+        "Woods": "jpg",
+        "Photo Booth Library": {
+          "Contents": "dir",
+          "Pictures": "dir"
+        }
+    },
+    "Applications": {
+        "Chrome": "app",
+        "Calendar": "app",
+        "Webstorm": "app"
+    }
+  }`;
+
+/**
+ * File database, it can build a tree structured Json object from string.
+ * Each node in Json object represents a file or a directory. For a file, it has filename and type.
+ * For a directory, it has filename and children (a list of files or directories).
+ * The input will be a json object string, and the output is a list of `FileNode` with nested
+ * structure.
+ */
+@Injectable()
+export class FileDatabase {
+  dataChange: BehaviorSubject<FileNode[]> = new BehaviorSubject<FileNode[]>([]);
+
+  get data(): FileNode[] { return this.dataChange.value; }
+
+  constructor() {
+    this.initialize();
+  }
+
+  initialize() {
+    // Parse the string to json object.
+    const dataObject = JSON.parse(TREE_DATA);
+
+    // Build the tree nodes from Json object. The result is a list of `FileNode` with nested
+    //     file node as children.
+    const data = this.buildFileTree(dataObject, 0);
+
+    // Notify the change.
+    this.dataChange.next(data);
+  }
+
+  /**
+   * Build the file structure tree. The `value` is the Json object, or a sub-tree of a Json object.
+   * The return value is the list of `FileNode`.
+   */
+  buildFileTree(value: any, level: number): FileNode[] {
+    let data: any[] = [];
+    for (let k in value) {
+      let v = value[k];
+      let node = new FileNode();
+      node.filename = `${k}`;
+      if (v === null || v === undefined) {
+        // no action
+      } else if (typeof v === 'object') {
+        node.children = this.buildFileTree(v, level + 1);
+      } else {
+        node.type = v;
+      }
+      data.push(node);
+    }
+    return data;
+  }
+}
+
+/**
+ * @title Tree with nested nodes
+ */
+@Component({
+  selector: 'cdk-tree-nested-example',
+  templateUrl: 'cdk-tree-nested-example.html',
+  styleUrls: ['cdk-tree-nested-example.css'],
+  providers: [FileDatabase]
+})
+export class CdkTreeNestedExample {
+  nestedTreeControl: NestedTreeControl<FileNode>;
+
+  nestedDataSource: MatTreeNestedDataSource<FileNode>;
+
+  constructor(database: FileDatabase) {
+    this.nestedTreeControl = new NestedTreeControl<FileNode>(this._getChildren);
+    this.nestedDataSource = new MatTreeNestedDataSource();
+
+    database.dataChange.subscribe(data => this.nestedDataSource.data = data);
+  }
+
+  private _getChildren = (node: FileNode) => { return of(node.children); };
+
+  hasNestedChild = (_: number, nodeData: FileNode) => {return !(nodeData.type); };
+}

src/assets/angular-material-examples/checkbox-configurable/checkbox-configurable-example.html

@@ -9,9 +9,9 @@
 
     <section class="example-section">
       <label class="example-margin">Align:</label>
-            <mat-radio-group [(ngModel)]="align">
+      <mat-radio-group [(ngModel)]="labelPosition">
-                <mat-radio-button class="example-margin" value="start">Start</mat-radio-button>
+        <mat-radio-button class="example-margin" value="after">After</mat-radio-button>
-                <mat-radio-button class="example-margin" value="end">End</mat-radio-button>
+        <mat-radio-button class="example-margin" value="before">Before</mat-radio-button>
       </mat-radio-group>
     </section>
 
@@ -30,7 +30,7 @@
           class="example-margin"
           [(ngModel)]="checked"
           [(indeterminate)]="indeterminate"
-                [align]="align"
+          [labelPosition]="labelPosition"
           [disabled]="disabled">
         I'm a checkbox
       </mat-checkbox>

src/assets/angular-material-examples/checkbox-configurable/checkbox-configurable-example.ts

@@ -6,12 +6,11 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'checkbox-configurable-example',
   templateUrl: 'checkbox-configurable-example.html',
-    styleUrls  : ['checkbox-configurable-example.css']
+  styleUrls: ['checkbox-configurable-example.css'],
 })
-export class CheckboxConfigurableExample
+export class CheckboxConfigurableExample {
-{
   checked = false;
   indeterminate = false;
-    align = 'start';
+  labelPosition = 'after';
   disabled = false;
 }

src/assets/angular-material-examples/checkbox-overview/checkbox-overview-example.ts

@@ -5,8 +5,7 @@ import { Component } from '@angular/core';
  */
 @Component({
   selector: 'checkbox-overview-example',
-    templateUrl: 'checkbox-overview-example.html'
+  templateUrl: 'checkbox-overview-example.html',
+  styleUrls: ['checkbox-overview-example.css'],
 })
-export class CheckboxOverviewExample
+export class CheckboxOverviewExample {}
-{
-}

src/assets/angular-material-examples/chips-autocomplete/chips-autocomplete-example.css

@@ -0,0 +1,3 @@
+.demo-chip-list {
+  width: 100%;
+}

src/assets/angular-material-examples/chips-autocomplete/chips-autocomplete-example.html

@@ -0,0 +1,27 @@
+<mat-form-field class="demo-chip-list">
+  <mat-chip-list #chipList>
+    <mat-chip
+      *ngFor="let fruit of fruits"
+      [selectable]="selectable"
+      [removable]="removable"
+      (remove)="remove(fruit)">
+      {{fruit.name}}
+      <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
+    </mat-chip>
+    <input
+      placeholder="New fruit..."
+      #fruitInput
+      [formControl]="fruitCtrl"
+      [matAutocomplete]="auto"
+      [matChipInputFor]="chipList"
+      [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
+      [matChipInputAddOnBlur]="addOnBlur"
+      (matChipInputTokenEnd)="add($event)"
+    />
+  </mat-chip-list>
+  <mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)">
+    <mat-option *ngFor="let fruit of filteredFruits | async" [value]="fruit">
+      {{ fruit }}
+    </mat-option>
+  </mat-autocomplete>
+</mat-form-field>

src/assets/angular-material-examples/chips-autocomplete/chips-autocomplete-example.ts

@@ -0,0 +1,79 @@
+import {COMMA, ENTER} from '@angular/cdk/keycodes';
+import {Component, ElementRef, ViewChild} from '@angular/core';
+import {FormControl} from '@angular/forms';
+import {MatAutocompleteSelectedEvent, MatChipInputEvent} from '@angular/material';
+import {Observable} from 'rxjs';
+import {map, startWith} from 'rxjs/operators';
+
+/**
+ * @title Chips Autocomplete
+ */
+@Component({
+  selector: 'chips-autocomplete-example',
+  templateUrl: 'chips-autocomplete-example.html',
+  styleUrls: ['chips-autocomplete-example.css']
+})
+export class ChipsAutocompleteExample {
+  visible: boolean = true;
+  selectable: boolean = true;
+  removable: boolean = true;
+  addOnBlur: boolean = false;
+
+  separatorKeysCodes = [ENTER, COMMA];
+
+  fruitCtrl = new FormControl();
+
+  filteredFruits: Observable<any[]>;
+
+  fruits = [
+    { name: 'Lemon' },
+  ];
+
+  allFruits = [
+    'Orange',
+    'Strawberry',
+    'Lime',
+    'Apple',
+  ];
+
+  @ViewChild('fruitInput') fruitInput: ElementRef;
+
+  constructor() {
+    this.filteredFruits = this.fruitCtrl.valueChanges.pipe(
+        startWith(null),
+        map((fruit: string | null) => fruit ? this.filter(fruit) : this.allFruits.slice()));
+  }
+
+  add(event: MatChipInputEvent): void {
+    const input = event.input;
+    const value = event.value;
+
+    // Add our fruit
+    if ((value || '').trim()) {
+      this.fruits.push({ name: value.trim() });
+    }
+
+    // Reset the input value
+    if (input) {
+      input.value = '';
+    }
+  }
+
+  remove(fruit: any): void {
+    const index = this.fruits.indexOf(fruit);
+
+    if (index >= 0) {
+      this.fruits.splice(index, 1);
+    }
+  }
+
+  filter(name: string) {
+    return this.allFruits.filter(fruit =>
+        fruit.toLowerCase().indexOf(name.toLowerCase()) === 0);
+  }
+
+  selected(event: MatAutocompleteSelectedEvent): void {
+    this.fruits.push({ name: event.option.viewValue });
+    this.fruitInput.nativeElement.value = '';
+  }
+}

src/assets/angular-material-examples/chips-input/chips-input-example.html

@@ -1,7 +1,7 @@
 <mat-form-field class="demo-chip-list">
   <mat-chip-list #chipList>
     <mat-chip *ngFor="let fruit of fruits" [selectable]="selectable"
-                  [removable]="removable" (remove)="remove(fruit)">
+             [removable]="removable" (removed)="remove(fruit)">
       {{fruit.name}}
       <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
     </mat-chip>

src/assets/angular-material-examples/chips-input/chips-input-example.ts

@@ -10,8 +10,7 @@ import { ENTER, COMMA } from '@angular/cdk/keycodes';
   templateUrl: 'chips-input-example.html',
   styleUrls: ['chips-input-example.css']
 })
-export class ChipsInputExample
+export class ChipsInputExample {
-{
   visible: boolean = true;
   selectable: boolean = true;
   removable: boolean = true;
@@ -23,33 +22,29 @@ export class ChipsInputExample
   fruits = [
     { name: 'Lemon' },
     { name: 'Lime' },
-        {name: 'Apple'}
+    { name: 'Apple' },
   ];
 
-    add(event: MatChipInputEvent): void
+
-    {
+  add(event: MatChipInputEvent): void {
     let input = event.input;
     let value = event.value;
 
-        // Add our person
+    // Add our fruit
-        if ( (value || '').trim() )
+    if ((value || '').trim()) {
-        {
       this.fruits.push({ name: value.trim() });
     }
 
     // Reset the input value
-        if ( input )
+    if (input) {
-        {
       input.value = '';
     }
   }
 
-    remove(fruit: any): void
+  remove(fruit: any): void {
-    {
     let index = this.fruits.indexOf(fruit);
 
-        if ( index >= 0 )
+    if (index >= 0) {
-        {
       this.fruits.splice(index, 1);
     }
   }

src/assets/angular-material-examples/chips-overview/chips-overview-example.ts

@@ -6,8 +6,6 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'chips-overview-example',
   templateUrl: 'chips-overview-example.html',
-    styleUrls  : ['chips-overview-example.css']
+  styleUrls: ['chips-overview-example.css'],
 })
-export class ChipsOverviewExample
+export class ChipsOverviewExample {}
-{
-}

src/assets/angular-material-examples/chips-stacked/chips-stacked-example.ts

@@ -6,28 +6,15 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'chips-stacked-example',
   templateUrl: 'chips-stacked-example.html',
-    styleUrls  : ['chips-stacked-example.css']
+  styleUrls: ['chips-stacked-example.css'],
 })
-export class ChipsStackedExample
+export class ChipsStackedExample {
-{
   color: string;
 
   availableColors = [
-        {
+    { name: 'none', color: '' },
-            name : 'none',
+    { name: 'Primary', color: 'primary' },
-            color: ''
+    { name: 'Accent', color: 'accent' },
-        },
+    { name: 'Warn', color: 'warn' }
-        {
-            name : 'Primary',
-            color: 'primary'
-        },
-        {
-            name : 'Accent',
-            color: 'accent'
-        },
-        {
-            name : 'Warn',
-            color: 'warn'
-        }
   ];
 }

src/assets/angular-material-examples/datepicker-api/datepicker-api-example.ts

@@ -4,8 +4,6 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'datepicker-api-example',
   templateUrl: 'datepicker-api-example.html',
-    styleUrls  : ['datepicker-api-example.css']
+  styleUrls: ['datepicker-api-example.css'],
 })
-export class DatepickerApiExample
+export class DatepickerApiExample {}
-{
-}

src/assets/angular-material-examples/datepicker-color/datepicker-color-example.css

@@ -0,0 +1 @@
+/** No CSS for this example */

src/assets/angular-material-examples/datepicker-color/datepicker-color-example.html

@@ -0,0 +1,13 @@
+<mat-form-field color="accent">
+  <mat-label>Inherited calendar color</mat-label>
+  <input matInput [matDatepicker]="picker1">
+  <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
+  <mat-datepicker #picker1></mat-datepicker>
+</mat-form-field>
+
+<mat-form-field color="accent">
+  <mat-label>Custom calendar color</mat-label>
+  <input matInput [matDatepicker]="picker2">
+  <mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
+  <mat-datepicker #picker2 color="primary"></mat-datepicker>
+</mat-form-field>

src/assets/angular-material-examples/datepicker-color/datepicker-color-example.ts

@@ -0,0 +1,9 @@
+import {Component} from '@angular/core';
+
+/** @title Datepicker palette colors */
+@Component({
+  selector: 'datepicker-color-example',
+  templateUrl: 'datepicker-color-example.html',
+  styleUrls: ['datepicker-color-example.css'],
+})
+export class DatepickerColorExample {}

src/assets/angular-material-examples/datepicker-custom-header/datepicker-custom-header-example.css

@@ -0,0 +1,16 @@
+.example-header {
+  display: flex;
+  align-items: center;
+  padding: 0.5em;
+}
+
+.example-header-label {
+  flex: 1;
+  height: 1em;
+  font-weight: bold;
+  text-align: center;
+}
+
+.example-double-arrow .mat-icon {
+  margin: -22%;
+}

src/assets/angular-material-examples/datepicker-custom-header/datepicker-custom-header-example.html

@@ -0,0 +1,6 @@
+<mat-form-field>
+  <mat-label>Custom calendar header</mat-label>
+  <input matInput [matDatepicker]="picker">
+  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
+  <mat-datepicker #picker [calendarHeaderComponent]="exampleHeader"></mat-datepicker>
+</mat-form-field>

src/assets/angular-material-examples/datepicker-custom-header/datepicker-custom-header-example.ts

@@ -0,0 +1,86 @@
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  Host,
+  Inject,
+  OnDestroy,
+  ViewEncapsulation
+} from '@angular/core';
+import {MatCalendar} from '@angular/material';
+import {DateAdapter, MAT_DATE_FORMATS, MatDateFormats} from '@angular/material/core';
+import {Subject} from 'rxjs';
+import {takeUntil} from 'rxjs/operators';
+
+/** @title Datepicker with custom calendar header */
+@Component({
+  selector: 'datepicker-custom-header-example',
+  templateUrl: 'datepicker-custom-header-example.html',
+  styleUrls: ['datepicker-custom-header-example.css'],
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class DatepickerCustomHeaderExample {
+  exampleHeader = ExampleHeader;
+}
+
+/** Custom header component for datepicker. */
+@Component({
+  selector: 'example-header',
+  template: `
+    <div class="example-header">
+      <button mat-icon-button class="example-double-arrow" (click)="previousClicked('year')">
+        <mat-icon>keyboard_arrow_left</mat-icon>
+        <mat-icon>keyboard_arrow_left</mat-icon>
+      </button>
+      <button mat-icon-button (click)="previousClicked('month')">
+        <mat-icon>keyboard_arrow_left</mat-icon>
+      </button>
+      <span class="example-header-label">{{periodLabel}}</span>
+      <button mat-icon-button (click)="nextClicked('month')">
+        <mat-icon>keyboard_arrow_right</mat-icon>
+      </button>
+      <button mat-icon-button class="example-double-arrow" (click)="nextClicked('year')">
+        <mat-icon>keyboard_arrow_right</mat-icon>
+        <mat-icon>keyboard_arrow_right</mat-icon>
+      </button>
+    </div>
+  `,
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ExampleHeader<D> implements OnDestroy {
+  private destroyed = new Subject<void>();
+
+  constructor(@Host() private calendar: MatCalendar<D>,
+              private dateAdapter: DateAdapter<D>,
+              @Inject(MAT_DATE_FORMATS) private dateFormats: MatDateFormats,
+              cdr: ChangeDetectorRef) {
+    calendar.stateChanges
+        .pipe(takeUntil(this.destroyed))
+        .subscribe(() => cdr.markForCheck());
+  }
+
+  ngOnDestroy() {
+    this.destroyed.next();
+    this.destroyed.complete();
+  }
+
+  get periodLabel() {
+    return this.dateAdapter
+        .format(this.calendar.activeDate, this.dateFormats.display.monthYearLabel)
+        .toLocaleUpperCase();
+  }
+
+  previousClicked(mode: 'month' | 'year') {
+    this.calendar.activeDate = mode == 'month' ?
+        this.dateAdapter.addCalendarMonths(this.calendar.activeDate, -1) :
+        this.dateAdapter.addCalendarYears(this.calendar.activeDate, -1);
+  }
+
+  nextClicked(mode: 'month' | 'year') {
+    this.calendar.activeDate = mode == 'month' ?
+        this.dateAdapter.addCalendarMonths(this.calendar.activeDate, 1) :
+        this.dateAdapter.addCalendarYears(this.calendar.activeDate, 1);
+  }
+}

src/assets/angular-material-examples/datepicker-disabled/datepicker-disabled-example.ts

@@ -4,8 +4,6 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'datepicker-disabled-example',
   templateUrl: 'datepicker-disabled-example.html',
-    styleUrls  : ['datepicker-disabled-example.css']
+  styleUrls: ['datepicker-disabled-example.css'],
 })
-export class DatepickerDisabledExample
+export class DatepickerDisabledExample {}
-{
-}

src/assets/angular-material-examples/datepicker-events/datepicker-events-example.ts

@@ -5,14 +5,12 @@ import { MatDatepickerInputEvent } from '@angular/material/datepicker';
 @Component({
   selector: 'datepicker-events-example',
   templateUrl: 'datepicker-events-example.html',
-    styleUrls  : ['datepicker-events-example.css']
+  styleUrls: ['datepicker-events-example.css'],
 })
-export class DatepickerEventsExample
+export class DatepickerEventsExample {
-{
   events: string[] = [];
 
-    addEvent(type: string, event: MatDatepickerInputEvent<Date>)
+  addEvent(type: string, event: MatDatepickerInputEvent<Date>) {
-    {
     this.events.push(`${type}: ${event.value}`);
   }
 }