From 7ec117202da16a09270ae92bec41df5000a37623 Mon Sep 17 00:00:00 2001
From: sercan <sercanyemen@gmail.com>
Date: Thu, 30 May 2019 11:09:43 +0300
Subject: [PATCH] Updated existing Angular Material examples

---
 .../autocomplete-display-example.ts           |   2 +-
 .../autocomplete-optgroup-example.ts          |   4 +-
 .../badge-overview-example.html               |   4 +
 .../bottom-sheet-overview-example.ts          |  10 +-
 .../button-toggle-appearance-example.css      |   4 +-
 .../button-toggle-exclusive-example.html      |   8 +-
 .../button-types/button-types-example.html    |  28 +--
 .../chips-autocomplete-example.html           |   2 +-
 .../chips-autocomplete-example.ts             |   7 +-
 .../chips-input/chips-input-example.html      |   2 +-
 .../chips-input/chips-input-example.ts        |   2 +-
 .../chips-overview-example.html               |   2 +-
 .../chips-stacked/chips-stacked-example.html  |   2 +-
 .../datepicker-api/datepicker-api-example.css |   4 +-
 .../datepicker-color-example.css              |   4 +-
 .../datepicker-custom-header-example.ts       |  36 ++--
 .../datepicker-locale-example.css             |   4 +-
 .../datepicker-locale-example.ts              |   4 +-
 .../datepicker-value-example.css              |   4 +-
 .../datepicker-views-selection-example.ts     |   4 +-
 .../dialog-content/dialog-content-example.ts  |   2 +-
 .../dialog-data/dialog-data-example.ts        |   2 +-
 .../dialog-elements-example.ts                |   2 +-
 .../dialog-overview-example.ts                |   2 +-
 .../expansion-expand-collapse-all-example.ts  |   4 +-
 .../expansion-steps-example.css               |   4 +
 .../focus-monitor-directives-example.css      |   4 +
 .../focus-monitor-directives-example.ts       |   4 +-
 .../focus-monitor-focus-via-example.css       |   5 +
 .../focus-monitor-focus-via-example.ts        |  16 +-
 .../focus-monitor-overview-example.css        |   4 +
 .../focus-monitor-overview-example.ts         |  32 ++--
 .../example-tel-input-example.html            |   6 +-
 .../form-field-custom-control-example.ts      |  54 +++++-
 .../form-field-label-example.css              |   2 +-
 .../form-field-prefix-suffix-example.html     |   4 +-
 .../icon-overview/icon-overview-example.html  |   2 +-
 .../icon-svg/icon-svg-example.html            |   2 +-
 .../icon-svg/icon-svg-example.ts              |   2 +-
 .../input-form/input-form-example.css         |   4 +
 .../menu-icons/menu-icons-example.html        |   4 +-
 .../paginator-configurable-example.css        |   4 +-
 .../paginator-configurable-example.ts         |   2 +-
 .../radio-ng-model/radio-ng-model-example.css |   7 +-
 .../radio-ng-model-example.html               |   8 +-
 .../radio-overview/radio-overview-example.css |   2 +-
 .../radio-overview-example.html               |   2 +-
 .../select-disabled-example.html              |   8 +-
 .../select-error-state-matcher-example.html   |   6 +-
 .../select-form/select-form-example.html      |   8 +-
 .../select-hint-error-example.html            |   3 +-
 .../select-multiple-example.html              |   3 +-
 .../select-no-ripple-example.html             |   3 +-
 .../select-optgroup-example.html              |   4 +-
 .../select-overview-example.html              |   4 +-
 .../select-panel-class-example.css            |   6 +-
 .../select-panel-class-example.html           |   3 +-
 .../select-reset/select-reset-example.html    |   3 +-
 .../select-value-binding-example.html         |   1 +
 .../sidenav-backdrop-example.css              |   9 +-
 .../sidenav-disable-close-example.ts          |   2 +-
 .../snack-bar-component-example.css           |   1 +
 .../snack-bar-component-example.html          |   5 +
 .../snack-bar-component-example.ts            |  11 +-
 .../snack-bar-overview-example.css            |   4 +-
 .../snack-bar-overview-example.ts             |   6 +-
 .../snack-bar-position-example.css            |   3 +
 .../snack-bar-position-example.ts             |   7 +-
 .../sort-overview/sort-overview-example.ts    |   2 +-
 .../stepper-errors/stepper-errors-example.ts  |   4 +-
 .../stepper-states/stepper-states-example.ts  |   4 +-
 .../tab-group-async-example.ts                |   2 +-
 .../tab-group-dynamic-height-example.ts       |   2 +-
 .../table-expandable-rows-example.html        |   2 +-
 .../table-expandable-rows-example.ts          |   4 +-
 .../table-filtering-example.ts                |   2 +-
 .../table-http/table-http-example.css         |   1 +
 .../table-http/table-http-example.html        |   2 +-
 .../table-http/table-http-example.ts          |  27 +--
 .../table-overview/table-overview-example.ts  |  24 ++-
 .../table-pagination-example.ts               |   5 +-
 .../table-selection-example.html              |   6 +-
 .../table-selection-example.ts                |  10 +-
 .../table-simple-column-example.ts            |  17 +-
 .../table-sorting/table-sorting-example.ts    |   5 +-
 .../table-sticky-columns-example.ts           |   2 +-
 .../table-sticky-complex-flex-example.ts      |   2 +-
 .../table-sticky-complex-example.ts           |   2 +-
 .../table-wrapped/table-wrapped-example.ts    |  12 +-
 .../text-field-autofill-directive-example.css |   4 +-
 .../text-field-autofill-monitor-example.css   |   4 +-
 .../text-field-autofill-monitor-example.ts    |  20 +-
 .../text-field-autosize-textarea-example.css  |   4 +-
 .../text-field-autosize-textarea-example.html |   2 +-
 .../text-field-autosize-textarea-example.ts   |   6 +-
 .../toolbar-multirow-example.html             |   6 +-
 .../tooltip-auto-hide-example.ts              |   2 +-
 .../tooltip-manual-example.html               |  14 +-
 .../tooltip-modified-defaults-example.ts      |   2 +-
 .../tooltip-position-example.ts               |   2 +-
 .../tree-checklist/tree-checklist-example.ts  |   8 +-
 .../tree-dynamic/tree-dynamic-example.ts      |  12 +-
 .../tree-flat-overview-example.html           |  12 +-
 .../tree-flat-overview-example.ts             | 178 ++++++------------
 .../tree-loadmore/tree-loadmore-example.ts    |  10 +-
 .../tree-nested-overview-example.html         |  18 +-
 .../tree-nested-overview-example.ts           | 144 ++++----------
 107 files changed, 502 insertions(+), 506 deletions(-)
 create mode 100755 src/assets/angular-material-examples/snack-bar-component/snack-bar-component-example.css
 create mode 100755 src/assets/angular-material-examples/snack-bar-position/snack-bar-position-example.css

diff --git a/src/assets/angular-material-examples/autocomplete-display/autocomplete-display-example.ts b/src/assets/angular-material-examples/autocomplete-display/autocomplete-display-example.ts
index adf9aa23..89c6eb6e 100755
--- a/src/assets/angular-material-examples/autocomplete-display/autocomplete-display-example.ts
+++ b/src/assets/angular-material-examples/autocomplete-display/autocomplete-display-example.ts
@@ -27,7 +27,7 @@ export class AutocompleteDisplayExample implements OnInit {
   ngOnInit() {
     this.filteredOptions = this.myControl.valueChanges
       .pipe(
-        startWith<string | User>(''),
+        startWith(''),
         map(value => typeof value === 'string' ? value : value.name),
         map(name => name ? this._filter(name) : this.options.slice())
       );
diff --git a/src/assets/angular-material-examples/autocomplete-optgroup/autocomplete-optgroup-example.ts b/src/assets/angular-material-examples/autocomplete-optgroup/autocomplete-optgroup-example.ts
index 862f4009..a9cf8988 100755
--- a/src/assets/angular-material-examples/autocomplete-optgroup/autocomplete-optgroup-example.ts
+++ b/src/assets/angular-material-examples/autocomplete-optgroup/autocomplete-optgroup-example.ts
@@ -24,7 +24,7 @@ export const _filter = (opt: string[], value: string): string[] => {
 })
 
 export class AutocompleteOptgroupExample implements OnInit {
-  stateForm: FormGroup = this.fb.group({
+  stateForm: FormGroup = this._formBuilder.group({
     stateGroup: '',
   });
 
@@ -91,7 +91,7 @@ export class AutocompleteOptgroupExample implements OnInit {
 
   stateGroupOptions: Observable<StateGroup[]>;
 
-  constructor(private fb: FormBuilder) {}
+  constructor(private _formBuilder: FormBuilder) {}
 
   ngOnInit() {
     this.stateGroupOptions = this.stateForm.get('stateGroup')!.valueChanges
diff --git a/src/assets/angular-material-examples/badge-overview/badge-overview-example.html b/src/assets/angular-material-examples/badge-overview/badge-overview-example.html
index 41c180cf..90c76bae 100755
--- a/src/assets/angular-material-examples/badge-overview/badge-overview-example.html
+++ b/src/assets/angular-material-examples/badge-overview/badge-overview-example.html
@@ -13,5 +13,9 @@
 <p>
   Icon with a badge
   <mat-icon matBadge="15" matBadgeColor="warn">home</mat-icon>
+    <!-- Include text description of the icon's meaning for screen-readers -->
+    <span class="cdk-visually-hidden">
+      Example with a home icon with overlaid badge showing the number 15
+    </span>
 </p>
 
diff --git a/src/assets/angular-material-examples/bottom-sheet-overview/bottom-sheet-overview-example.ts b/src/assets/angular-material-examples/bottom-sheet-overview/bottom-sheet-overview-example.ts
index 1ca0cd42..1c465f4e 100755
--- a/src/assets/angular-material-examples/bottom-sheet-overview/bottom-sheet-overview-example.ts
+++ b/src/assets/angular-material-examples/bottom-sheet-overview/bottom-sheet-overview-example.ts
@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {MatBottomSheet, MatBottomSheetRef} from '@angular/material';
+import {MatBottomSheet, MatBottomSheetRef} from '@angular/material/bottom-sheet';
 
 /**
  * @title Bottom Sheet Overview
@@ -10,10 +10,10 @@ import {MatBottomSheet, MatBottomSheetRef} from '@angular/material';
   styleUrls: ['bottom-sheet-overview-example.css'],
 })
 export class BottomSheetOverviewExample {
-  constructor(private bottomSheet: MatBottomSheet) {}
+  constructor(private _bottomSheet: MatBottomSheet) {}
 
   openBottomSheet(): void {
-    this.bottomSheet.open(BottomSheetOverviewExampleSheet);
+    this._bottomSheet.open(BottomSheetOverviewExampleSheet);
   }
 }
 
@@ -22,10 +22,10 @@ export class BottomSheetOverviewExample {
   templateUrl: 'bottom-sheet-overview-example-sheet.html',
 })
 export class BottomSheetOverviewExampleSheet {
-  constructor(private bottomSheetRef: MatBottomSheetRef<BottomSheetOverviewExampleSheet>) {}
+  constructor(private _bottomSheetRef: MatBottomSheetRef<BottomSheetOverviewExampleSheet>) {}
 
   openLink(event: MouseEvent): void {
-    this.bottomSheetRef.dismiss();
+    this._bottomSheetRef.dismiss();
     event.preventDefault();
   }
 }
diff --git a/src/assets/angular-material-examples/button-toggle-appearance/button-toggle-appearance-example.css b/src/assets/angular-material-examples/button-toggle-appearance/button-toggle-appearance-example.css
index 74323087..1a1669a3 100755
--- a/src/assets/angular-material-examples/button-toggle-appearance/button-toggle-appearance-example.css
+++ b/src/assets/angular-material-examples/button-toggle-appearance/button-toggle-appearance-example.css
@@ -1 +1,3 @@
-/** No CSS for this example */
+mat-button-toggle-group {
+  margin-left: 12px;
+}
diff --git a/src/assets/angular-material-examples/button-toggle-exclusive/button-toggle-exclusive-example.html b/src/assets/angular-material-examples/button-toggle-exclusive/button-toggle-exclusive-example.html
index d6f123c2..26ca16ad 100755
--- a/src/assets/angular-material-examples/button-toggle-exclusive/button-toggle-exclusive-example.html
+++ b/src/assets/angular-material-examples/button-toggle-exclusive/button-toggle-exclusive-example.html
@@ -1,14 +1,14 @@
 <mat-button-toggle-group #group="matButtonToggleGroup">
-  <mat-button-toggle value="left">
+  <mat-button-toggle value="left" aria-label="Text align left">
     <mat-icon>format_align_left</mat-icon>
   </mat-button-toggle>
-  <mat-button-toggle value="center">
+  <mat-button-toggle value="center" aria-label="Text align center">
     <mat-icon>format_align_center</mat-icon>
   </mat-button-toggle>
-  <mat-button-toggle value="right">
+  <mat-button-toggle value="right" aria-label="Text align right">
     <mat-icon>format_align_right</mat-icon>
   </mat-button-toggle>
-  <mat-button-toggle value="justify" disabled>
+  <mat-button-toggle value="justify" disabled aria-label="Text align justify">
     <mat-icon>format_align_justify</mat-icon>
   </mat-button-toggle>
 </mat-button-toggle-group>
diff --git a/src/assets/angular-material-examples/button-types/button-types-example.html b/src/assets/angular-material-examples/button-types/button-types-example.html
index 829fd13f..574e47a9 100755
--- a/src/assets/angular-material-examples/button-types/button-types-example.html
+++ b/src/assets/angular-material-examples/button-types/button-types-example.html
@@ -40,20 +40,20 @@
 
 <h3>Icon Buttons</h3>
 <div class="example-button-row">
-  <button mat-icon-button>
-    <mat-icon aria-label="Example icon-button with a heart icon">favorite</mat-icon>
+  <button mat-icon-button aria-label="Example icon-button with a heart icon">
+    <mat-icon>favorite</mat-icon>
   </button>
-  <button mat-icon-button color="primary">
-    <mat-icon aria-label="Example icon-button with a heart icon">favorite</mat-icon>
+  <button mat-icon-button color="primary" aria-label="Example icon-button with a heart icon">
+    <mat-icon>favorite</mat-icon>
   </button>
-  <button mat-icon-button color="accent">
-    <mat-icon aria-label="Example icon-button with a heart icon">favorite</mat-icon>
+  <button mat-icon-button color="accent" aria-label="Example icon-button with a heart icon">
+    <mat-icon>favorite</mat-icon>
   </button>
-  <button mat-icon-button color="warn">
-    <mat-icon aria-label="Example icon-button with a heart icon">favorite</mat-icon>
+  <button mat-icon-button color="warn" aria-label="Example icon-button with a heart icon">
+    <mat-icon>favorite</mat-icon>
   </button>
-  <button mat-icon-button disabled>
-    <mat-icon aria-label="Example icon-button with a heart icon">favorite</mat-icon>
+  <button mat-icon-button disabled aria-label="Example icon-button with a heart icon">
+    <mat-icon>favorite</mat-icon>
   </button>
 </div>
 
@@ -64,8 +64,8 @@
   <button mat-fab color="accent">Accent</button>
   <button mat-fab color="warn">Warn</button>
   <button mat-fab disabled>Disabled</button>
-  <button mat-fab>
-    <mat-icon aria-label="Example icon-button with a heart icon">favorite</mat-icon>
+  <button mat-fab aria-label="Example icon-button with a heart icon">
+    <mat-icon>favorite</mat-icon>
   </button>
   <a mat-fab routerLink=".">Link</a>
 </div>
@@ -77,8 +77,8 @@
   <button mat-mini-fab color="accent">Accent</button>
   <button mat-mini-fab color="warn">Warn</button>
   <button mat-mini-fab disabled>Disabled</button>
-  <button mat-mini-fab>
-    <mat-icon aria-label="Example icon-button with a heart icon">favorite</mat-icon>
+  <button mat-mini-fab aria-label="Example icon-button with a heart icon">
+    <mat-icon>favorite</mat-icon>
   </button>
   <a mat-mini-fab routerLink=".">Link</a>
 </div>
diff --git a/src/assets/angular-material-examples/chips-autocomplete/chips-autocomplete-example.html b/src/assets/angular-material-examples/chips-autocomplete/chips-autocomplete-example.html
index 9477edb3..01007113 100755
--- a/src/assets/angular-material-examples/chips-autocomplete/chips-autocomplete-example.html
+++ b/src/assets/angular-material-examples/chips-autocomplete/chips-autocomplete-example.html
@@ -1,5 +1,5 @@
 <mat-form-field class="example-chip-list">
-  <mat-chip-list #chipList>
+  <mat-chip-list #chipList aria-label="Fruit selection">
     <mat-chip
       *ngFor="let fruit of fruits"
       [selectable]="selectable"
diff --git a/src/assets/angular-material-examples/chips-autocomplete/chips-autocomplete-example.ts b/src/assets/angular-material-examples/chips-autocomplete/chips-autocomplete-example.ts
index 56169ef8..623cf273 100755
--- a/src/assets/angular-material-examples/chips-autocomplete/chips-autocomplete-example.ts
+++ b/src/assets/angular-material-examples/chips-autocomplete/chips-autocomplete-example.ts
@@ -1,7 +1,8 @@
 import {COMMA, ENTER} from '@angular/cdk/keycodes';
 import {Component, ElementRef, ViewChild} from '@angular/core';
 import {FormControl} from '@angular/forms';
-import {MatAutocompleteSelectedEvent, MatChipInputEvent, MatAutocomplete} from '@angular/material';
+import {MatAutocompleteSelectedEvent, MatAutocomplete} from '@angular/material/autocomplete';
+import {MatChipInputEvent} from '@angular/material/chips';
 import {Observable} from 'rxjs';
 import {map, startWith} from 'rxjs/operators';
 
@@ -24,8 +25,8 @@ export class ChipsAutocompleteExample {
   fruits: string[] = ['Lemon'];
   allFruits: string[] = ['Apple', 'Lemon', 'Lime', 'Orange', 'Strawberry'];
 
-  @ViewChild('fruitInput') fruitInput: ElementRef<HTMLInputElement>;
-  @ViewChild('auto') matAutocomplete: MatAutocomplete;
+  @ViewChild('fruitInput', {static: false}) fruitInput: ElementRef<HTMLInputElement>;
+  @ViewChild('auto', {static: false}) matAutocomplete: MatAutocomplete;
 
   constructor() {
     this.filteredFruits = this.fruitCtrl.valueChanges.pipe(
diff --git a/src/assets/angular-material-examples/chips-input/chips-input-example.html b/src/assets/angular-material-examples/chips-input/chips-input-example.html
index af72c317..f25a237e 100755
--- a/src/assets/angular-material-examples/chips-input/chips-input-example.html
+++ b/src/assets/angular-material-examples/chips-input/chips-input-example.html
@@ -1,5 +1,5 @@
 <mat-form-field class="example-chip-list">
-  <mat-chip-list #chipList>
+  <mat-chip-list #chipList aria-label="Fruit selection">
     <mat-chip *ngFor="let fruit of fruits" [selectable]="selectable"
              [removable]="removable" (removed)="remove(fruit)">
       {{fruit.name}}
diff --git a/src/assets/angular-material-examples/chips-input/chips-input-example.ts b/src/assets/angular-material-examples/chips-input/chips-input-example.ts
index 9c293017..eaedd510 100755
--- a/src/assets/angular-material-examples/chips-input/chips-input-example.ts
+++ b/src/assets/angular-material-examples/chips-input/chips-input-example.ts
@@ -1,6 +1,6 @@
 import {COMMA, ENTER} from '@angular/cdk/keycodes';
 import {Component} from '@angular/core';
-import {MatChipInputEvent} from '@angular/material';
+import {MatChipInputEvent} from '@angular/material/chips';
 
 export interface Fruit {
   name: string;
diff --git a/src/assets/angular-material-examples/chips-overview/chips-overview-example.html b/src/assets/angular-material-examples/chips-overview/chips-overview-example.html
index 8ca14537..6a4477de 100755
--- a/src/assets/angular-material-examples/chips-overview/chips-overview-example.html
+++ b/src/assets/angular-material-examples/chips-overview/chips-overview-example.html
@@ -1,4 +1,4 @@
-<mat-chip-list>
+<mat-chip-list aria-label="Fish selection">
   <mat-chip>One fish</mat-chip>
   <mat-chip>Two fish</mat-chip>
   <mat-chip color="primary" selected>Primary fish</mat-chip>
diff --git a/src/assets/angular-material-examples/chips-stacked/chips-stacked-example.html b/src/assets/angular-material-examples/chips-stacked/chips-stacked-example.html
index 1c6832f6..82acf18a 100755
--- a/src/assets/angular-material-examples/chips-stacked/chips-stacked-example.html
+++ b/src/assets/angular-material-examples/chips-stacked/chips-stacked-example.html
@@ -1,4 +1,4 @@
-<mat-chip-list class="mat-chip-list-stacked">
+<mat-chip-list class="mat-chip-list-stacked" aria-label="Color selection">
   <mat-chip *ngFor="let chip of availableColors" selected [color]="chip.color">
     {{chip.name}}
   </mat-chip>
diff --git a/src/assets/angular-material-examples/datepicker-api/datepicker-api-example.css b/src/assets/angular-material-examples/datepicker-api/datepicker-api-example.css
index 74323087..ece1d0db 100755
--- a/src/assets/angular-material-examples/datepicker-api/datepicker-api-example.css
+++ b/src/assets/angular-material-examples/datepicker-api/datepicker-api-example.css
@@ -1 +1,3 @@
-/** No CSS for this example */
+mat-form-field {
+  margin-right: 12px;
+}
diff --git a/src/assets/angular-material-examples/datepicker-color/datepicker-color-example.css b/src/assets/angular-material-examples/datepicker-color/datepicker-color-example.css
index 74323087..ece1d0db 100755
--- a/src/assets/angular-material-examples/datepicker-color/datepicker-color-example.css
+++ b/src/assets/angular-material-examples/datepicker-color/datepicker-color-example.css
@@ -1 +1,3 @@
-/** No CSS for this example */
+mat-form-field {
+  margin-right: 12px;
+}
diff --git a/src/assets/angular-material-examples/datepicker-custom-header/datepicker-custom-header-example.ts b/src/assets/angular-material-examples/datepicker-custom-header/datepicker-custom-header-example.ts
index 3bdb396b..b42bef2e 100755
--- a/src/assets/angular-material-examples/datepicker-custom-header/datepicker-custom-header-example.ts
+++ b/src/assets/angular-material-examples/datepicker-custom-header/datepicker-custom-header-example.ts
@@ -2,11 +2,10 @@ import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
-  Host,
   Inject,
   OnDestroy
 } from '@angular/core';
-import {MatCalendar} from '@angular/material';
+import {MatCalendar} from '@angular/material/datepicker';
 import {DateAdapter, MAT_DATE_FORMATS, MatDateFormats} from '@angular/material/core';
 import {Subject} from 'rxjs';
 import {takeUntil} from 'rxjs/operators';
@@ -64,37 +63,36 @@ export class DatepickerCustomHeaderExample {
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ExampleHeader<D> implements OnDestroy {
-  private destroyed = new Subject<void>();
+  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))
+  constructor(
+      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();
+    this._destroyed.next();
+    this._destroyed.complete();
   }
 
   get periodLabel() {
-    return this.dateAdapter
-        .format(this.calendar.activeDate, this.dateFormats.display.monthYearLabel)
+    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);
+    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);
+    this._calendar.activeDate = mode === 'month' ?
+        this._dateAdapter.addCalendarMonths(this._calendar.activeDate, 1) :
+        this._dateAdapter.addCalendarYears(this._calendar.activeDate, 1);
   }
 }
diff --git a/src/assets/angular-material-examples/datepicker-locale/datepicker-locale-example.css b/src/assets/angular-material-examples/datepicker-locale/datepicker-locale-example.css
index 74323087..ece1d0db 100755
--- a/src/assets/angular-material-examples/datepicker-locale/datepicker-locale-example.css
+++ b/src/assets/angular-material-examples/datepicker-locale/datepicker-locale-example.css
@@ -1 +1,3 @@
-/** No CSS for this example */
+mat-form-field {
+  margin-right: 12px;
+}
diff --git a/src/assets/angular-material-examples/datepicker-locale/datepicker-locale-example.ts b/src/assets/angular-material-examples/datepicker-locale/datepicker-locale-example.ts
index c99ee56a..fc4af216 100755
--- a/src/assets/angular-material-examples/datepicker-locale/datepicker-locale-example.ts
+++ b/src/assets/angular-material-examples/datepicker-locale/datepicker-locale-example.ts
@@ -20,9 +20,9 @@ import {DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE} from '@angular/material/
   ],
 })
 export class DatepickerLocaleExample {
-  constructor(private adapter: DateAdapter<any>) {}
+  constructor(private _adapter: DateAdapter<any>) {}
 
   french() {
-    this.adapter.setLocale('fr');
+    this._adapter.setLocale('fr');
   }
 }
diff --git a/src/assets/angular-material-examples/datepicker-value/datepicker-value-example.css b/src/assets/angular-material-examples/datepicker-value/datepicker-value-example.css
index 74323087..ece1d0db 100755
--- a/src/assets/angular-material-examples/datepicker-value/datepicker-value-example.css
+++ b/src/assets/angular-material-examples/datepicker-value/datepicker-value-example.css
@@ -1 +1,3 @@
-/** No CSS for this example */
+mat-form-field {
+  margin-right: 12px;
+}
diff --git a/src/assets/angular-material-examples/datepicker-views-selection/datepicker-views-selection-example.ts b/src/assets/angular-material-examples/datepicker-views-selection/datepicker-views-selection-example.ts
index 8bda5f87..c51df1f3 100755
--- a/src/assets/angular-material-examples/datepicker-views-selection/datepicker-views-selection-example.ts
+++ b/src/assets/angular-material-examples/datepicker-views-selection/datepicker-views-selection-example.ts
@@ -53,9 +53,9 @@ export class DatepickerViewsSelectionExample {
     this.date.setValue(ctrlValue);
   }
 
-  chosenMonthHandler(normlizedMonth: Moment, datepicker: MatDatepicker<Moment>) {
+  chosenMonthHandler(normalizedMonth: Moment, datepicker: MatDatepicker<Moment>) {
     const ctrlValue = this.date.value;
-    ctrlValue.month(normlizedMonth.month());
+    ctrlValue.month(normalizedMonth.month());
     this.date.setValue(ctrlValue);
     datepicker.close();
   }
diff --git a/src/assets/angular-material-examples/dialog-content/dialog-content-example.ts b/src/assets/angular-material-examples/dialog-content/dialog-content-example.ts
index 85302e36..ec139f58 100755
--- a/src/assets/angular-material-examples/dialog-content/dialog-content-example.ts
+++ b/src/assets/angular-material-examples/dialog-content/dialog-content-example.ts
@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {MatDialog} from '@angular/material';
+import {MatDialog} from '@angular/material/dialog';
 
 /**
  * @title Dialog with header, scrollable content and actions
diff --git a/src/assets/angular-material-examples/dialog-data/dialog-data-example.ts b/src/assets/angular-material-examples/dialog-data/dialog-data-example.ts
index e1499f16..0d3e7ec1 100755
--- a/src/assets/angular-material-examples/dialog-data/dialog-data-example.ts
+++ b/src/assets/angular-material-examples/dialog-data/dialog-data-example.ts
@@ -1,5 +1,5 @@
 import {Component, Inject} from '@angular/core';
-import {MatDialog, MAT_DIALOG_DATA} from '@angular/material';
+import {MatDialog, MAT_DIALOG_DATA} from '@angular/material/dialog';
 
 export interface DialogData {
   animal: 'panda' | 'unicorn' | 'lion';
diff --git a/src/assets/angular-material-examples/dialog-elements/dialog-elements-example.ts b/src/assets/angular-material-examples/dialog-elements/dialog-elements-example.ts
index 29183b25..26309b92 100755
--- a/src/assets/angular-material-examples/dialog-elements/dialog-elements-example.ts
+++ b/src/assets/angular-material-examples/dialog-elements/dialog-elements-example.ts
@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {MatDialog} from '@angular/material';
+import {MatDialog} from '@angular/material/dialog';
 
 /**
  * @title Dialog elements
diff --git a/src/assets/angular-material-examples/dialog-overview/dialog-overview-example.ts b/src/assets/angular-material-examples/dialog-overview/dialog-overview-example.ts
index 29c60705..63b86d76 100755
--- a/src/assets/angular-material-examples/dialog-overview/dialog-overview-example.ts
+++ b/src/assets/angular-material-examples/dialog-overview/dialog-overview-example.ts
@@ -1,5 +1,5 @@
 import {Component, Inject} from '@angular/core';
-import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material';
+import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog';
 
 export interface DialogData {
   animal: string;
diff --git a/src/assets/angular-material-examples/expansion-expand-collapse-all/expansion-expand-collapse-all-example.ts b/src/assets/angular-material-examples/expansion-expand-collapse-all/expansion-expand-collapse-all-example.ts
index eb628cce..955e955c 100755
--- a/src/assets/angular-material-examples/expansion-expand-collapse-all/expansion-expand-collapse-all-example.ts
+++ b/src/assets/angular-material-examples/expansion-expand-collapse-all/expansion-expand-collapse-all-example.ts
@@ -1,5 +1,5 @@
 import {Component, ViewChild} from '@angular/core';
-import {MatAccordion} from '@angular/material';
+import {MatAccordion} from '@angular/material/expansion';
 
 /**
  * @title Accordion with expand/collapse all toggles
@@ -10,5 +10,5 @@ import {MatAccordion} from '@angular/material';
   styleUrls: ['expansion-expand-collapse-all-example.css'],
 })
 export class ExpansionExpandCollapseAllExample {
-  @ViewChild(MatAccordion) accordion: MatAccordion;
+  @ViewChild(MatAccordion, {static: false}) accordion: MatAccordion;
 }
diff --git a/src/assets/angular-material-examples/expansion-steps/expansion-steps-example.css b/src/assets/angular-material-examples/expansion-steps/expansion-steps-example.css
index fb90e98d..dadd684f 100755
--- a/src/assets/angular-material-examples/expansion-steps/expansion-steps-example.css
+++ b/src/assets/angular-material-examples/expansion-steps/expansion-steps-example.css
@@ -7,3 +7,7 @@
   justify-content: space-between;
   align-items: center;
 }
+
+mat-form-field {
+  margin-right: 12px;
+}
diff --git a/src/assets/angular-material-examples/focus-monitor-directives/focus-monitor-directives-example.css b/src/assets/angular-material-examples/focus-monitor-directives/focus-monitor-directives-example.css
index f64065c6..9d351e7e 100755
--- a/src/assets/angular-material-examples/focus-monitor-directives/focus-monitor-directives-example.css
+++ b/src/assets/angular-material-examples/focus-monitor-directives/focus-monitor-directives-example.css
@@ -17,3 +17,7 @@
 .example-focus-monitor .cdk-program-focused {
   background: rgba(255, 0, 255, 0.5);
 }
+
+button {
+  margin-right: 12px;
+}
diff --git a/src/assets/angular-material-examples/focus-monitor-directives/focus-monitor-directives-example.ts b/src/assets/angular-material-examples/focus-monitor-directives/focus-monitor-directives-example.ts
index 35ce0309..682c174a 100755
--- a/src/assets/angular-material-examples/focus-monitor-directives/focus-monitor-directives-example.ts
+++ b/src/assets/angular-material-examples/focus-monitor-directives/focus-monitor-directives-example.ts
@@ -11,7 +11,7 @@ export class FocusMonitorDirectivesExample {
   elementOrigin = this.formatOrigin(null);
   subtreeOrigin = this.formatOrigin(null);
 
-  constructor(private ngZone: NgZone, private cdr: ChangeDetectorRef) {}
+  constructor(private _ngZone: NgZone, private _cdr: ChangeDetectorRef) {}
 
 
   formatOrigin(origin: FocusOrigin): string {
@@ -20,6 +20,6 @@ export class FocusMonitorDirectivesExample {
 
   // Workaround for the fact that (cdkFocusChange) emits outside NgZone.
   markForCheck() {
-    this.ngZone.run(() => this.cdr.markForCheck());
+    this._ngZone.run(() => this._cdr.markForCheck());
   }
 }
diff --git a/src/assets/angular-material-examples/focus-monitor-focus-via/focus-monitor-focus-via-example.css b/src/assets/angular-material-examples/focus-monitor-focus-via/focus-monitor-focus-via-example.css
index 6c1a0481..d412e814 100755
--- a/src/assets/angular-material-examples/focus-monitor-focus-via/focus-monitor-focus-via-example.css
+++ b/src/assets/angular-material-examples/focus-monitor-focus-via/focus-monitor-focus-via-example.css
@@ -21,3 +21,8 @@
 .example-focus-monitor button:focus {
   box-shadow: 0 0 30px cyan;
 }
+
+mat-form-field,
+button {
+  margin-right: 12px;
+}
diff --git a/src/assets/angular-material-examples/focus-monitor-focus-via/focus-monitor-focus-via-example.ts b/src/assets/angular-material-examples/focus-monitor-focus-via/focus-monitor-focus-via-example.ts
index 3e08e041..65a01eb8 100755
--- a/src/assets/angular-material-examples/focus-monitor-focus-via/focus-monitor-focus-via-example.ts
+++ b/src/assets/angular-material-examples/focus-monitor-focus-via/focus-monitor-focus-via-example.ts
@@ -1,11 +1,11 @@
 import {FocusMonitor, FocusOrigin} from '@angular/cdk/a11y';
 import {
+  AfterViewInit,
   ChangeDetectorRef,
   Component,
   ElementRef,
   NgZone,
   OnDestroy,
-  OnInit,
   ViewChild
 } from '@angular/core';
 
@@ -15,20 +15,20 @@ import {
   templateUrl: 'focus-monitor-focus-via-example.html',
   styleUrls: ['focus-monitor-focus-via-example.css']
 })
-export class FocusMonitorFocusViaExample implements OnDestroy, OnInit {
-  @ViewChild('monitored') monitoredEl: ElementRef<HTMLElement>;
+export class FocusMonitorFocusViaExample implements OnDestroy, AfterViewInit {
+  @ViewChild('monitored', {static: false}) monitoredEl: ElementRef<HTMLElement>;
 
   origin = this.formatOrigin(null);
 
   constructor(public focusMonitor: FocusMonitor,
-              private cdr: ChangeDetectorRef,
-              private ngZone: NgZone) {}
+              private _cdr: ChangeDetectorRef,
+              private _ngZone: NgZone) {}
 
-  ngOnInit() {
+  ngAfterViewInit() {
     this.focusMonitor.monitor(this.monitoredEl)
-        .subscribe(origin => this.ngZone.run(() => {
+        .subscribe(origin => this._ngZone.run(() => {
           this.origin = this.formatOrigin(origin);
-          this.cdr.markForCheck();
+          this._cdr.markForCheck();
         }));
   }
 
diff --git a/src/assets/angular-material-examples/focus-monitor-overview/focus-monitor-overview-example.css b/src/assets/angular-material-examples/focus-monitor-overview/focus-monitor-overview-example.css
index f64065c6..9d351e7e 100755
--- a/src/assets/angular-material-examples/focus-monitor-overview/focus-monitor-overview-example.css
+++ b/src/assets/angular-material-examples/focus-monitor-overview/focus-monitor-overview-example.css
@@ -17,3 +17,7 @@
 .example-focus-monitor .cdk-program-focused {
   background: rgba(255, 0, 255, 0.5);
 }
+
+button {
+  margin-right: 12px;
+}
diff --git a/src/assets/angular-material-examples/focus-monitor-overview/focus-monitor-overview-example.ts b/src/assets/angular-material-examples/focus-monitor-overview/focus-monitor-overview-example.ts
index ed319e27..3290c507 100755
--- a/src/assets/angular-material-examples/focus-monitor-overview/focus-monitor-overview-example.ts
+++ b/src/assets/angular-material-examples/focus-monitor-overview/focus-monitor-overview-example.ts
@@ -1,11 +1,11 @@
 import {FocusMonitor, FocusOrigin} from '@angular/cdk/a11y';
 import {
+  AfterViewInit,
   ChangeDetectorRef,
   Component,
   ElementRef,
   NgZone,
   OnDestroy,
-  OnInit,
   ViewChild
 } from '@angular/core';
 
@@ -15,33 +15,33 @@ import {
   templateUrl: 'focus-monitor-overview-example.html',
   styleUrls: ['focus-monitor-overview-example.css']
 })
-export class FocusMonitorOverviewExample implements OnDestroy, OnInit {
-  @ViewChild('element') element: ElementRef<HTMLElement>;
-  @ViewChild('subtree') subtree: ElementRef<HTMLElement>;
+export class FocusMonitorOverviewExample implements OnDestroy, AfterViewInit {
+  @ViewChild('element', {static: false}) element: ElementRef<HTMLElement>;
+  @ViewChild('subtree', {static: false}) subtree: ElementRef<HTMLElement>;
 
   elementOrigin = this.formatOrigin(null);
   subtreeOrigin = this.formatOrigin(null);
 
-  constructor(private focusMonitor: FocusMonitor,
-              private cdr: ChangeDetectorRef,
-              private ngZone: NgZone) {}
+  constructor(private _focusMonitor: FocusMonitor,
+              private _cdr: ChangeDetectorRef,
+              private _ngZone: NgZone) {}
 
-  ngOnInit() {
-    this.focusMonitor.monitor(this.element)
-        .subscribe(origin => this.ngZone.run(() => {
+  ngAfterViewInit() {
+    this._focusMonitor.monitor(this.element)
+        .subscribe(origin => this._ngZone.run(() => {
           this.elementOrigin = this.formatOrigin(origin);
-          this.cdr.markForCheck();
+          this._cdr.markForCheck();
         }));
-    this.focusMonitor.monitor(this.subtree, true)
-        .subscribe(origin => this.ngZone.run(() => {
+    this._focusMonitor.monitor(this.subtree, true)
+        .subscribe(origin => this._ngZone.run(() => {
           this.subtreeOrigin = this.formatOrigin(origin);
-          this.cdr.markForCheck();
+          this._cdr.markForCheck();
         }));
   }
 
   ngOnDestroy() {
-    this.focusMonitor.stopMonitoring(this.element);
-    this.focusMonitor.stopMonitoring(this.subtree);
+    this._focusMonitor.stopMonitoring(this.element);
+    this._focusMonitor.stopMonitoring(this.subtree);
   }
 
   formatOrigin(origin: FocusOrigin): string {
diff --git a/src/assets/angular-material-examples/form-field-custom-control/example-tel-input-example.html b/src/assets/angular-material-examples/form-field-custom-control/example-tel-input-example.html
index c38f74f4..96299a8d 100755
--- a/src/assets/angular-material-examples/form-field-custom-control/example-tel-input-example.html
+++ b/src/assets/angular-material-examples/form-field-custom-control/example-tel-input-example.html
@@ -1,7 +1,7 @@
 <div [formGroup]="parts" class="example-tel-input-container">
-  <input class="example-tel-input-element" formControlName="area" size="3">
+  <input class="example-tel-input-element" formControlName="area" size="3" aria-label="Area code" (input)="_handleInput()">
   <span class="example-tel-input-spacer">&ndash;</span>
-  <input class="example-tel-input-element" formControlName="exchange" size="3">
+  <input class="example-tel-input-element" formControlName="exchange" size="3" aria-label="Exchange code" (input)="_handleInput()">
   <span class="example-tel-input-spacer">&ndash;</span>
-  <input class="example-tel-input-element" formControlName="subscriber" size="4">
+  <input class="example-tel-input-element" formControlName="subscriber" size="4" aria-label="Subscriber number" (input)="_handleInput()">
 </div>
diff --git a/src/assets/angular-material-examples/form-field-custom-control/form-field-custom-control-example.ts b/src/assets/angular-material-examples/form-field-custom-control/form-field-custom-control-example.ts
index 27ba34b0..8647782e 100755
--- a/src/assets/angular-material-examples/form-field-custom-control/form-field-custom-control-example.ts
+++ b/src/assets/angular-material-examples/form-field-custom-control/form-field-custom-control-example.ts
@@ -1,8 +1,8 @@
 import {FocusMonitor} from '@angular/cdk/a11y';
 import {coerceBooleanProperty} from '@angular/cdk/coercion';
-import {Component, ElementRef, Input, OnDestroy} from '@angular/core';
-import {FormBuilder, FormGroup} from '@angular/forms';
-import {MatFormFieldControl} from '@angular/material';
+import {Component, ElementRef, Input, OnDestroy, Optional, Self} from '@angular/core';
+import {FormBuilder, FormGroup, ControlValueAccessor, NgControl} from '@angular/forms';
+import {MatFormFieldControl} from '@angular/material/form-field';
 import {Subject} from 'rxjs';
 
 /** @title Form field with custom telephone number input control. */
@@ -30,17 +30,18 @@ export class MyTel {
     '[attr.aria-describedby]': 'describedBy',
   }
 })
-export class MyTelInput implements MatFormFieldControl<MyTel>, OnDestroy {
+export class MyTelInput implements ControlValueAccessor, MatFormFieldControl<MyTel>, OnDestroy {
   static nextId = 0;
 
   parts: FormGroup;
   stateChanges = new Subject<void>();
   focused = false;
-  ngControl = null;
   errorState = false;
   controlType = 'example-tel-input';
   id = `example-tel-input-${MyTelInput.nextId++}`;
   describedBy = '';
+  onChange = (_: any) => {};
+  onTouched = () => {};
 
   get empty() {
     const {value: {area, exchange, subscriber}} = this.parts;
@@ -70,6 +71,7 @@ export class MyTelInput implements MatFormFieldControl<MyTel>, OnDestroy {
   get disabled(): boolean { return this._disabled; }
   set disabled(value: boolean) {
     this._disabled = coerceBooleanProperty(value);
+    this._disabled ? this.parts.disable() : this.parts.enable();
     this.stateChanges.next();
   }
   private _disabled = false;
@@ -88,22 +90,34 @@ export class MyTelInput implements MatFormFieldControl<MyTel>, OnDestroy {
     this.stateChanges.next();
   }
 
-  constructor(fb: FormBuilder, private fm: FocusMonitor, private elRef: ElementRef<HTMLElement>) {
-    this.parts = fb.group({
+  constructor(
+    formBuilder: FormBuilder,
+    private _focusMonitor: FocusMonitor,
+    private _elementRef: ElementRef<HTMLElement>,
+    @Optional() @Self() public ngControl: NgControl) {
+
+    this.parts = formBuilder.group({
       area: '',
       exchange: '',
       subscriber: '',
     });
 
-    fm.monitor(elRef, true).subscribe(origin => {
+    _focusMonitor.monitor(_elementRef, true).subscribe(origin => {
+      if (this.focused && !origin) {
+        this.onTouched();
+      }
       this.focused = !!origin;
       this.stateChanges.next();
     });
+
+    if (this.ngControl != null) {
+      this.ngControl.valueAccessor = this;
+    }
   }
 
   ngOnDestroy() {
     this.stateChanges.complete();
-    this.fm.stopMonitoring(this.elRef);
+    this._focusMonitor.stopMonitoring(this._elementRef);
   }
 
   setDescribedByIds(ids: string[]) {
@@ -112,7 +126,27 @@ export class MyTelInput implements MatFormFieldControl<MyTel>, OnDestroy {
 
   onContainerClick(event: MouseEvent) {
     if ((event.target as Element).tagName.toLowerCase() != 'input') {
-      this.elRef.nativeElement.querySelector('input')!.focus();
+      this._elementRef.nativeElement.querySelector('input')!.focus();
     }
   }
+
+  writeValue(tel: MyTel | null): void {
+    this.value = tel;
+  }
+
+  registerOnChange(fn: any): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: any): void {
+    this.onTouched = fn;
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    this.disabled = isDisabled;
+  }
+
+  _handleInput(): void {
+    this.onChange(this.parts.value);
+  }
 }
diff --git a/src/assets/angular-material-examples/form-field-label/form-field-label-example.css b/src/assets/angular-material-examples/form-field-label/form-field-label-example.css
index 333087a4..dfe4240b 100755
--- a/src/assets/angular-material-examples/form-field-label/form-field-label-example.css
+++ b/src/assets/angular-material-examples/form-field-label/form-field-label-example.css
@@ -16,5 +16,5 @@
 }
 
 .example-container .mat-radio-button {
-  margin: 0 5px;
+  margin: 0 12px;
 }
diff --git a/src/assets/angular-material-examples/form-field-prefix-suffix/form-field-prefix-suffix-example.html b/src/assets/angular-material-examples/form-field-prefix-suffix/form-field-prefix-suffix-example.html
index bc4ef108..5edb2994 100755
--- a/src/assets/angular-material-examples/form-field-prefix-suffix/form-field-prefix-suffix-example.html
+++ b/src/assets/angular-material-examples/form-field-prefix-suffix/form-field-prefix-suffix-example.html
@@ -1,7 +1,9 @@
 <div class="example-container">
   <mat-form-field>
     <input matInput placeholder="Enter your password" [type]="hide ? 'password' : 'text'">
-    <mat-icon matSuffix (click)="hide = !hide">{{hide ? 'visibility_off' : 'visibility'}}</mat-icon>
+    <button mat-icon-button matSuffix (click)="hide = !hide" [attr.aria-label]="'Hide password'" [attr.aria-pressed]="hide">
+    <mat-icon>{{hide ? 'visibility_off' : 'visibility'}}</mat-icon>
+    </button>
   </mat-form-field>
 
   <mat-form-field>
diff --git a/src/assets/angular-material-examples/icon-overview/icon-overview-example.html b/src/assets/angular-material-examples/icon-overview/icon-overview-example.html
index 7afdf57b..ac069bee 100755
--- a/src/assets/angular-material-examples/icon-overview/icon-overview-example.html
+++ b/src/assets/angular-material-examples/icon-overview/icon-overview-example.html
@@ -1 +1 @@
-<mat-icon>home</mat-icon>
+<mat-icon aria-hidden="false" aria-label="Example home icon">home</mat-icon>
diff --git a/src/assets/angular-material-examples/icon-svg/icon-svg-example.html b/src/assets/angular-material-examples/icon-svg/icon-svg-example.html
index ed7e8eb9..1559771e 100755
--- a/src/assets/angular-material-examples/icon-svg/icon-svg-example.html
+++ b/src/assets/angular-material-examples/icon-svg/icon-svg-example.html
@@ -1 +1 @@
-<mat-icon svgIcon="thumbs-up"></mat-icon>
+<mat-icon svgIcon="thumbs-up" aria-hidden="false" aria-label="Example thumbs up SVG icon"></mat-icon>
diff --git a/src/assets/angular-material-examples/icon-svg/icon-svg-example.ts b/src/assets/angular-material-examples/icon-svg/icon-svg-example.ts
index f931d302..89de47f5 100755
--- a/src/assets/angular-material-examples/icon-svg/icon-svg-example.ts
+++ b/src/assets/angular-material-examples/icon-svg/icon-svg-example.ts
@@ -1,6 +1,6 @@
 import {Component} from '@angular/core';
 import {DomSanitizer} from '@angular/platform-browser';
-import {MatIconRegistry} from '@angular/material';
+import {MatIconRegistry} from '@angular/material/icon';
 
 /**
  * @title SVG icons
diff --git a/src/assets/angular-material-examples/input-form/input-form-example.css b/src/assets/angular-material-examples/input-form/input-form-example.css
index 08fa6753..3615ac07 100755
--- a/src/assets/angular-material-examples/input-form/input-form-example.css
+++ b/src/assets/angular-material-examples/input-form/input-form-example.css
@@ -7,3 +7,7 @@
 .example-full-width {
   width: 100%;
 }
+
+td {
+  padding-right: 8px;
+}
diff --git a/src/assets/angular-material-examples/menu-icons/menu-icons-example.html b/src/assets/angular-material-examples/menu-icons/menu-icons-example.html
index a5ea164c..fb66054d 100755
--- a/src/assets/angular-material-examples/menu-icons/menu-icons-example.html
+++ b/src/assets/angular-material-examples/menu-icons/menu-icons-example.html
@@ -1,4 +1,4 @@
-<button mat-icon-button [matMenuTriggerFor]="menu">
+<button mat-icon-button [matMenuTriggerFor]="menu" aria-label="Example icon-button with a menu">
   <mat-icon>more_vert</mat-icon>
 </button>
 <mat-menu #menu="matMenu">
@@ -8,7 +8,7 @@
   </button>
   <button mat-menu-item disabled>
     <mat-icon>voicemail</mat-icon>
-    <span>Check voicemail</span>
+    <span>Check voice mail</span>
   </button>
   <button mat-menu-item>
     <mat-icon>notifications_off</mat-icon>
diff --git a/src/assets/angular-material-examples/paginator-configurable/paginator-configurable-example.css b/src/assets/angular-material-examples/paginator-configurable/paginator-configurable-example.css
index 74323087..ece1d0db 100755
--- a/src/assets/angular-material-examples/paginator-configurable/paginator-configurable-example.css
+++ b/src/assets/angular-material-examples/paginator-configurable/paginator-configurable-example.css
@@ -1 +1,3 @@
-/** No CSS for this example */
+mat-form-field {
+  margin-right: 12px;
+}
diff --git a/src/assets/angular-material-examples/paginator-configurable/paginator-configurable-example.ts b/src/assets/angular-material-examples/paginator-configurable/paginator-configurable-example.ts
index 10d102bb..a02b6a1d 100755
--- a/src/assets/angular-material-examples/paginator-configurable/paginator-configurable-example.ts
+++ b/src/assets/angular-material-examples/paginator-configurable/paginator-configurable-example.ts
@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {PageEvent} from '@angular/material';
+import {PageEvent} from '@angular/material/paginator';
 
 /**
  * @title Configurable paginator
diff --git a/src/assets/angular-material-examples/radio-ng-model/radio-ng-model-example.css b/src/assets/angular-material-examples/radio-ng-model/radio-ng-model-example.css
index f70c1b3b..16638741 100755
--- a/src/assets/angular-material-examples/radio-ng-model/radio-ng-model-example.css
+++ b/src/assets/angular-material-examples/radio-ng-model/radio-ng-model-example.css
@@ -1,12 +1,9 @@
 .example-radio-group {
-  display: inline-flex;
+  display: flex;
   flex-direction: column;
+  margin: 15px 0;
 }
 
 .example-radio-button {
   margin: 5px;
 }
-
-.example-selected-value {
-  margin: 15px 0;
-}
diff --git a/src/assets/angular-material-examples/radio-ng-model/radio-ng-model-example.html b/src/assets/angular-material-examples/radio-ng-model/radio-ng-model-example.html
index 4dd92317..5369faa5 100755
--- a/src/assets/angular-material-examples/radio-ng-model/radio-ng-model-example.html
+++ b/src/assets/angular-material-examples/radio-ng-model/radio-ng-model-example.html
@@ -1,6 +1,10 @@
-<mat-radio-group class="example-radio-group" [(ngModel)]="favoriteSeason">
+<label id="example-radio-group-label">Pick your favorite season</label>
+<mat-radio-group
+  aria-labelledby="example-radio-group-label"
+  class="example-radio-group"
+  [(ngModel)]="favoriteSeason">
   <mat-radio-button class="example-radio-button" *ngFor="let season of seasons" [value]="season">
     {{season}}
   </mat-radio-button>
 </mat-radio-group>
-<div class="example-selected-value">Your favorite season is: {{favoriteSeason}}</div>
+<div>Your favorite season is: {{favoriteSeason}}</div>
diff --git a/src/assets/angular-material-examples/radio-overview/radio-overview-example.css b/src/assets/angular-material-examples/radio-overview/radio-overview-example.css
index 26280cf2..a4b97b37 100755
--- a/src/assets/angular-material-examples/radio-overview/radio-overview-example.css
+++ b/src/assets/angular-material-examples/radio-overview/radio-overview-example.css
@@ -1,3 +1,3 @@
 .mat-radio-button ~ .mat-radio-button {
-  padding-right: 16px;
+  margin-left: 16px;
 }
diff --git a/src/assets/angular-material-examples/radio-overview/radio-overview-example.html b/src/assets/angular-material-examples/radio-overview/radio-overview-example.html
index cadd1b6e..6e3bfae3 100755
--- a/src/assets/angular-material-examples/radio-overview/radio-overview-example.html
+++ b/src/assets/angular-material-examples/radio-overview/radio-overview-example.html
@@ -1,4 +1,4 @@
-<mat-radio-group>
+<mat-radio-group aria-label="Select an option">
   <mat-radio-button value="1">Option 1</mat-radio-button>
   <mat-radio-button value="2">Option 2</mat-radio-button>
 </mat-radio-group>
diff --git a/src/assets/angular-material-examples/select-disabled/select-disabled-example.html b/src/assets/angular-material-examples/select-disabled/select-disabled-example.html
index 774f878d..d436c80c 100755
--- a/src/assets/angular-material-examples/select-disabled/select-disabled-example.html
+++ b/src/assets/angular-material-examples/select-disabled/select-disabled-example.html
@@ -4,7 +4,8 @@
 
 <h4>mat-select</h4>
 <mat-form-field>
-  <mat-select placeholder="Choose an option" [disabled]="disableSelect.value">
+  <mat-label>Choose an option</mat-label>
+  <mat-select [disabled]="disableSelect.value">
     <mat-option value="option1">Option 1</mat-option>
     <mat-option value="option2" disabled>Option 2 (disabled)</mat-option>
     <mat-option value="option3">Option 3</mat-option>
@@ -13,8 +14,9 @@
 
 <h4>native html select</h4>
 <mat-form-field>
-  <select matNativeControl placeholder="Choose an option" [disabled]="disableSelect.value">
-    <option value="" disabled selected></option>
+  <mat-label>Choose an option</mat-label>
+  <select matNativeControl [disabled]="disableSelect.value">
+    <option value="" selected></option>
     <option value="volvo">Volvo</option>
     <option value="saab" disabled>Saab</option>
     <option value="mercedes">Mercedes</option>
diff --git a/src/assets/angular-material-examples/select-error-state-matcher/select-error-state-matcher-example.html b/src/assets/angular-material-examples/select-error-state-matcher/select-error-state-matcher-example.html
index ab8fcbb9..9e5f17b1 100755
--- a/src/assets/angular-material-examples/select-error-state-matcher/select-error-state-matcher-example.html
+++ b/src/assets/angular-material-examples/select-error-state-matcher/select-error-state-matcher-example.html
@@ -1,6 +1,7 @@
 <h4>mat-select</h4>
 <mat-form-field>
-  <mat-select placeholder="Choose one" [formControl]="selected" [errorStateMatcher]="matcher">
+  <mat-label>Choose one</mat-label>
+  <mat-select [formControl]="selected" [errorStateMatcher]="matcher">
     <mat-option>Clear</mat-option>
     <mat-option value="valid">Valid option</mat-option>
     <mat-option value="invalid">Invalid option</mat-option>
@@ -14,7 +15,8 @@
 
 <h4>native html select</h4>
 <mat-form-field class="demo-full-width">
-  <select matNativeControl placeholder="Choose one" [formControl]="nativeSelectFormControl" [errorStateMatcher]="matcher">
+  <mat-label>Choose one</mat-label>
+  <select matNativeControl [formControl]="nativeSelectFormControl" [errorStateMatcher]="matcher">
     <option value=""></option>
     <option value="valid" selected>Valid option</option>
     <option value="invalid">Invalid option</option>
diff --git a/src/assets/angular-material-examples/select-form/select-form-example.html b/src/assets/angular-material-examples/select-form/select-form-example.html
index 7f04d1f7..f2b02b6a 100755
--- a/src/assets/angular-material-examples/select-form/select-form-example.html
+++ b/src/assets/angular-material-examples/select-form/select-form-example.html
@@ -1,7 +1,8 @@
 <form>
   <h4>mat-select</h4>
   <mat-form-field>
-    <mat-select placeholder="Favorite food" [(ngModel)]="selectedValue" name="food">
+    <mat-label>Favorite food</mat-label>
+    <mat-select [(ngModel)]="selectedValue" name="food">
       <mat-option *ngFor="let food of foods" [value]="food.value">
         {{food.viewValue}}
       </mat-option>
@@ -10,8 +11,9 @@
   <p> Selected food: {{selectedValue}} </p>
   <h4>native html select</h4>
   <mat-form-field>
-    <select matNativeControl placeholder="Favorite car" [(ngModel)]="selectedCar" name="car">
-      <option value="" disabled selected></option>
+    <mat-label>Favorite car</mat-label>
+    <select matNativeControl [(ngModel)]="selectedCar" name="car">
+      <option value="" selected></option>
       <option *ngFor="let car of cars" [value]="car.value">
         {{car.viewValue}}
       </option>
diff --git a/src/assets/angular-material-examples/select-hint-error/select-hint-error-example.html b/src/assets/angular-material-examples/select-hint-error/select-hint-error-example.html
index d7c96537..d10b0d42 100755
--- a/src/assets/angular-material-examples/select-hint-error/select-hint-error-example.html
+++ b/src/assets/angular-material-examples/select-hint-error/select-hint-error-example.html
@@ -1,6 +1,7 @@
 <h4>mat select</h4>
 <mat-form-field>
-  <mat-select placeholder="Favorite animal" [formControl]="animalControl" required>
+  <mat-label>Favorite animal</mat-label>
+  <mat-select [formControl]="animalControl" required>
     <mat-option>--</mat-option>
     <mat-option *ngFor="let animal of animals" [value]="animal">
       {{animal.name}}
diff --git a/src/assets/angular-material-examples/select-multiple/select-multiple-example.html b/src/assets/angular-material-examples/select-multiple/select-multiple-example.html
index 916ae396..2f617c72 100755
--- a/src/assets/angular-material-examples/select-multiple/select-multiple-example.html
+++ b/src/assets/angular-material-examples/select-multiple/select-multiple-example.html
@@ -1,5 +1,6 @@
 <mat-form-field>
-  <mat-select placeholder="Toppings" [formControl]="toppings" multiple>
+  <mat-label>Toppings</mat-label>
+  <mat-select [formControl]="toppings" multiple>
     <mat-option *ngFor="let topping of toppingList" [value]="topping">{{topping}}</mat-option>
   </mat-select>
 </mat-form-field>
diff --git a/src/assets/angular-material-examples/select-no-ripple/select-no-ripple-example.html b/src/assets/angular-material-examples/select-no-ripple/select-no-ripple-example.html
index a0b0ad4d..4c722ae6 100755
--- a/src/assets/angular-material-examples/select-no-ripple/select-no-ripple-example.html
+++ b/src/assets/angular-material-examples/select-no-ripple/select-no-ripple-example.html
@@ -1,5 +1,6 @@
 <mat-form-field>
-  <mat-select placeholder="Select an option" disableRipple>
+  <mat-label>Select an option</mat-label>
+  <mat-select disableRipple>
     <mat-option value="1">Option 1</mat-option>
     <mat-option value="2">Option 2</mat-option>
     <mat-option value="3">Option 3</mat-option>
diff --git a/src/assets/angular-material-examples/select-optgroup/select-optgroup-example.html b/src/assets/angular-material-examples/select-optgroup/select-optgroup-example.html
index 74bb7cad..64827208 100755
--- a/src/assets/angular-material-examples/select-optgroup/select-optgroup-example.html
+++ b/src/assets/angular-material-examples/select-optgroup/select-optgroup-example.html
@@ -1,6 +1,7 @@
 <h4>mat-select</h4>
 <mat-form-field>
-  <mat-select placeholder="Pokemon" [formControl]="pokemonControl">
+  <mat-label>Pokemon</mat-label>
+  <mat-select [formControl]="pokemonControl">
     <mat-option>-- None --</mat-option>
     <mat-optgroup *ngFor="let group of pokemonGroups" [label]="group.name"
                   [disabled]="group.disabled">
@@ -13,6 +14,7 @@
 
 <h4>native html select</h4>
 <mat-form-field>
+  <mat-label>Cars</mat-label>
   <select matNativeControl>
     <optgroup label="Swedish Cars">
       <option value="volvo">volvo</option>
diff --git a/src/assets/angular-material-examples/select-overview/select-overview-example.html b/src/assets/angular-material-examples/select-overview/select-overview-example.html
index 5e6f1387..d7df8280 100755
--- a/src/assets/angular-material-examples/select-overview/select-overview-example.html
+++ b/src/assets/angular-material-examples/select-overview/select-overview-example.html
@@ -1,6 +1,7 @@
 <h4>Basic mat-select</h4>
 <mat-form-field>
-  <mat-select placeholder="Favorite food">
+  <mat-label>Favorite food</mat-label>
+  <mat-select>
     <mat-option *ngFor="let food of foods" [value]="food.value">
       {{food.viewValue}}
     </mat-option>
@@ -9,6 +10,7 @@
 
 <h4>Basic native select</h4>
 <mat-form-field>
+  <mat-label>Cars</mat-label>
   <select matNativeControl required>
     <option value="volvo">Volvo</option>
     <option value="saab">Saab</option>
diff --git a/src/assets/angular-material-examples/select-panel-class/select-panel-class-example.css b/src/assets/angular-material-examples/select-panel-class/select-panel-class-example.css
index 090739db..5e9cac9d 100755
--- a/src/assets/angular-material-examples/select-panel-class/select-panel-class-example.css
+++ b/src/assets/angular-material-examples/select-panel-class/select-panel-class-example.css
@@ -1,11 +1,11 @@
-.example-panel-red .mat-select-panel {
+.example-panel-red.mat-select-panel {
   background: rgba(255, 0, 0, 0.5);
 }
 
-.example-panel-green .mat-select-panel {
+.example-panel-green.mat-select-panel {
   background: rgba(0, 255, 0, 0.5);
 }
 
-.example-panel-blue .mat-select-panel {
+.example-panel-blue.mat-select-panel {
   background: rgba(0, 0, 255, 0.5);
 }
diff --git a/src/assets/angular-material-examples/select-panel-class/select-panel-class-example.html b/src/assets/angular-material-examples/select-panel-class/select-panel-class-example.html
index c3e560aa..1e48e43b 100755
--- a/src/assets/angular-material-examples/select-panel-class/select-panel-class-example.html
+++ b/src/assets/angular-material-examples/select-panel-class/select-panel-class-example.html
@@ -1,5 +1,6 @@
 <mat-form-field>
-  <mat-select placeholder="Panel color" [formControl]="panelColor"
+  <mat-label>Panel color</mat-label>
+  <mat-select [formControl]="panelColor"
               panelClass="example-panel-{{panelColor.value}}">
     <mat-option value="red">Red</mat-option>
     <mat-option value="green">Green</mat-option>
diff --git a/src/assets/angular-material-examples/select-reset/select-reset-example.html b/src/assets/angular-material-examples/select-reset/select-reset-example.html
index 235939f9..e0f73450 100755
--- a/src/assets/angular-material-examples/select-reset/select-reset-example.html
+++ b/src/assets/angular-material-examples/select-reset/select-reset-example.html
@@ -1,6 +1,7 @@
 <h4>mat-select</h4>
 <mat-form-field>
-  <mat-select placeholder="State">
+  <mat-label>State</mat-label>
+  <mat-select>
     <mat-option>None</mat-option>
     <mat-option *ngFor="let state of states" [value]="state">{{state}}</mat-option>
   </mat-select>
diff --git a/src/assets/angular-material-examples/select-value-binding/select-value-binding-example.html b/src/assets/angular-material-examples/select-value-binding/select-value-binding-example.html
index aa3e93b4..061c1851 100755
--- a/src/assets/angular-material-examples/select-value-binding/select-value-binding-example.html
+++ b/src/assets/angular-material-examples/select-value-binding/select-value-binding-example.html
@@ -1,4 +1,5 @@
 <mat-form-field>
+  <mat-label>Select an option</mat-label>
   <mat-select [(value)]="selected">
     <mat-option>None</mat-option>
     <mat-option value="option1">Option 1</mat-option>
diff --git a/src/assets/angular-material-examples/sidenav-backdrop/sidenav-backdrop-example.css b/src/assets/angular-material-examples/sidenav-backdrop/sidenav-backdrop-example.css
index d0bcca98..f83c40dd 100755
--- a/src/assets/angular-material-examples/sidenav-backdrop/sidenav-backdrop-example.css
+++ b/src/assets/angular-material-examples/sidenav-backdrop/sidenav-backdrop-example.css
@@ -1,6 +1,13 @@
 .example-container {
   width: 400px;
   height: 200px;
-  margin: 10px;
+  margin: 12px;
   border: 1px solid #555;
 }
+
+mat-drawer-content {
+  padding: 12px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
diff --git a/src/assets/angular-material-examples/sidenav-disable-close/sidenav-disable-close-example.ts b/src/assets/angular-material-examples/sidenav-disable-close/sidenav-disable-close-example.ts
index db846639..ed5ccda0 100755
--- a/src/assets/angular-material-examples/sidenav-disable-close/sidenav-disable-close-example.ts
+++ b/src/assets/angular-material-examples/sidenav-disable-close/sidenav-disable-close-example.ts
@@ -8,7 +8,7 @@ import {MatSidenav} from '@angular/material/sidenav';
   styleUrls: ['sidenav-disable-close-example.css'],
 })
 export class SidenavDisableCloseExample {
-  @ViewChild('sidenav') sidenav: MatSidenav;
+  @ViewChild('sidenav', {static: false}) sidenav: MatSidenav;
 
   reason = '';
 
diff --git a/src/assets/angular-material-examples/snack-bar-component/snack-bar-component-example.css b/src/assets/angular-material-examples/snack-bar-component/snack-bar-component-example.css
new file mode 100755
index 00000000..74323087
--- /dev/null
+++ b/src/assets/angular-material-examples/snack-bar-component/snack-bar-component-example.css
@@ -0,0 +1 @@
+/** No CSS for this example */
diff --git a/src/assets/angular-material-examples/snack-bar-component/snack-bar-component-example.html b/src/assets/angular-material-examples/snack-bar-component/snack-bar-component-example.html
index 3c8c74b3..c54dfc64 100755
--- a/src/assets/angular-material-examples/snack-bar-component/snack-bar-component-example.html
+++ b/src/assets/angular-material-examples/snack-bar-component/snack-bar-component-example.html
@@ -1,3 +1,8 @@
+<mat-form-field>
+  <mat-label>Snack bar duration (seconds)</mat-label>
+  <input type="number" [(ngModel)]="durationInSeconds" matInput>
+</mat-form-field>
+
 <button mat-button (click)="openSnackBar()" aria-label="Show an example snack-bar">
   Pizza party
 </button>
diff --git a/src/assets/angular-material-examples/snack-bar-component/snack-bar-component-example.ts b/src/assets/angular-material-examples/snack-bar-component/snack-bar-component-example.ts
index bd121c38..892c52f5 100755
--- a/src/assets/angular-material-examples/snack-bar-component/snack-bar-component-example.ts
+++ b/src/assets/angular-material-examples/snack-bar-component/snack-bar-component-example.ts
@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {MatSnackBar} from '@angular/material';
+import {MatSnackBar} from '@angular/material/snack-bar';
 
 /**
  * @title Snack-bar with a custom component
@@ -7,13 +7,16 @@ import {MatSnackBar} from '@angular/material';
 @Component({
   selector: 'snack-bar-component-example',
   templateUrl: 'snack-bar-component-example.html',
+  styleUrls: ['snack-bar-component-example.css'],
 })
 export class SnackBarComponentExample {
-  constructor(public snackBar: MatSnackBar) {}
+  durationInSeconds = 5;
+
+  constructor(private _snackBar: MatSnackBar) {}
 
   openSnackBar() {
-    this.snackBar.openFromComponent(PizzaPartyComponent, {
-      duration: 500,
+    this._snackBar.openFromComponent(PizzaPartyComponent, {
+      duration: this.durationInSeconds * 1000,
     });
   }
 }
diff --git a/src/assets/angular-material-examples/snack-bar-overview/snack-bar-overview-example.css b/src/assets/angular-material-examples/snack-bar-overview/snack-bar-overview-example.css
index 74323087..ece1d0db 100755
--- a/src/assets/angular-material-examples/snack-bar-overview/snack-bar-overview-example.css
+++ b/src/assets/angular-material-examples/snack-bar-overview/snack-bar-overview-example.css
@@ -1 +1,3 @@
-/** No CSS for this example */
+mat-form-field {
+  margin-right: 12px;
+}
diff --git a/src/assets/angular-material-examples/snack-bar-overview/snack-bar-overview-example.ts b/src/assets/angular-material-examples/snack-bar-overview/snack-bar-overview-example.ts
index 1dcbbc82..e4c9c30b 100755
--- a/src/assets/angular-material-examples/snack-bar-overview/snack-bar-overview-example.ts
+++ b/src/assets/angular-material-examples/snack-bar-overview/snack-bar-overview-example.ts
@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {MatSnackBar} from '@angular/material';
+import {MatSnackBar} from '@angular/material/snack-bar';
 
 /**
  * @title Basic snack-bar
@@ -10,10 +10,10 @@ import {MatSnackBar} from '@angular/material';
   styleUrls: ['snack-bar-overview-example.css'],
 })
 export class SnackBarOverviewExample {
-  constructor(public snackBar: MatSnackBar) {}
+  constructor(private _snackBar: MatSnackBar) {}
 
   openSnackBar(message: string, action: string) {
-    this.snackBar.open(message, action, {
+    this._snackBar.open(message, action, {
       duration: 2000,
     });
   }
diff --git a/src/assets/angular-material-examples/snack-bar-position/snack-bar-position-example.css b/src/assets/angular-material-examples/snack-bar-position/snack-bar-position-example.css
new file mode 100755
index 00000000..ece1d0db
--- /dev/null
+++ b/src/assets/angular-material-examples/snack-bar-position/snack-bar-position-example.css
@@ -0,0 +1,3 @@
+mat-form-field {
+  margin-right: 12px;
+}
diff --git a/src/assets/angular-material-examples/snack-bar-position/snack-bar-position-example.ts b/src/assets/angular-material-examples/snack-bar-position/snack-bar-position-example.ts
index f18d10fe..c3faff23 100755
--- a/src/assets/angular-material-examples/snack-bar-position/snack-bar-position-example.ts
+++ b/src/assets/angular-material-examples/snack-bar-position/snack-bar-position-example.ts
@@ -3,7 +3,7 @@ import {
   MatSnackBar,
   MatSnackBarHorizontalPosition,
   MatSnackBarVerticalPosition,
-} from '@angular/material';
+} from '@angular/material/snack-bar';
 
 /**
  * @title Snack-bar with configurable position
@@ -11,16 +11,17 @@ import {
 @Component({
   selector: 'snack-bar-position-example',
   templateUrl: 'snack-bar-position-example.html',
+  styleUrls: ['snack-bar-position-example.css'],
 })
 export class SnackBarPositionExample {
 
   horizontalPosition: MatSnackBarHorizontalPosition = 'start';
   verticalPosition: MatSnackBarVerticalPosition = 'bottom';
 
-  constructor(public snackBar: MatSnackBar) {}
+  constructor(private _snackBar: MatSnackBar) {}
 
   openSnackBar() {
-    this.snackBar.open('Canonball!!', 'End now', {
+    this._snackBar.open('Canonball!!', 'End now', {
       duration: 500,
       horizontalPosition: this.horizontalPosition,
       verticalPosition: this.verticalPosition,
diff --git a/src/assets/angular-material-examples/sort-overview/sort-overview-example.ts b/src/assets/angular-material-examples/sort-overview/sort-overview-example.ts
index b249f03f..65712c61 100755
--- a/src/assets/angular-material-examples/sort-overview/sort-overview-example.ts
+++ b/src/assets/angular-material-examples/sort-overview/sort-overview-example.ts
@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {Sort} from '@angular/material';
+import {Sort} from '@angular/material/sort';
 
 export interface Dessert {
   calories: number;
diff --git a/src/assets/angular-material-examples/stepper-errors/stepper-errors-example.ts b/src/assets/angular-material-examples/stepper-errors/stepper-errors-example.ts
index 22e89d43..d164ccfb 100755
--- a/src/assets/angular-material-examples/stepper-errors/stepper-errors-example.ts
+++ b/src/assets/angular-material-examples/stepper-errors/stepper-errors-example.ts
@@ -1,6 +1,6 @@
 import {Component, OnInit} from '@angular/core';
 import {FormBuilder, FormGroup, Validators} from '@angular/forms';
-import {MAT_STEPPER_GLOBAL_OPTIONS} from '@angular/cdk/stepper';
+import {STEPPER_GLOBAL_OPTIONS} from '@angular/cdk/stepper';
 
 /**
  * @title Stepper that displays errors in the steps
@@ -10,7 +10,7 @@ import {MAT_STEPPER_GLOBAL_OPTIONS} from '@angular/cdk/stepper';
   templateUrl: 'stepper-errors-example.html',
   styleUrls: ['stepper-errors-example.css'],
   providers: [{
-    provide: MAT_STEPPER_GLOBAL_OPTIONS, useValue: {showError: true}
+    provide: STEPPER_GLOBAL_OPTIONS, useValue: {showError: true}
   }]
 })
 export class StepperErrorsExample implements OnInit {
diff --git a/src/assets/angular-material-examples/stepper-states/stepper-states-example.ts b/src/assets/angular-material-examples/stepper-states/stepper-states-example.ts
index bce0d1f2..f472e5e5 100755
--- a/src/assets/angular-material-examples/stepper-states/stepper-states-example.ts
+++ b/src/assets/angular-material-examples/stepper-states/stepper-states-example.ts
@@ -1,6 +1,6 @@
 import {Component, OnInit} from '@angular/core';
 import {FormBuilder, FormGroup, Validators} from '@angular/forms';
-import {MAT_STEPPER_GLOBAL_OPTIONS} from '@angular/cdk/stepper';
+import {STEPPER_GLOBAL_OPTIONS} from '@angular/cdk/stepper';
 
 /**
  * @title Stepper with customized states
@@ -10,7 +10,7 @@ import {MAT_STEPPER_GLOBAL_OPTIONS} from '@angular/cdk/stepper';
   templateUrl: 'stepper-states-example.html',
   styleUrls: ['stepper-states-example.css'],
   providers: [{
-    provide: MAT_STEPPER_GLOBAL_OPTIONS, useValue: {displayDefaultIndicatorType: false}
+    provide: STEPPER_GLOBAL_OPTIONS, useValue: {displayDefaultIndicatorType: false}
   }]
 })
 export class StepperStatesExample implements OnInit {
diff --git a/src/assets/angular-material-examples/tab-group-async/tab-group-async-example.ts b/src/assets/angular-material-examples/tab-group-async/tab-group-async-example.ts
index 8ae32569..7a6bbd1e 100755
--- a/src/assets/angular-material-examples/tab-group-async/tab-group-async-example.ts
+++ b/src/assets/angular-material-examples/tab-group-async/tab-group-async-example.ts
@@ -18,7 +18,7 @@ export class TabGroupAsyncExample {
   asyncTabs: Observable<ExampleTab[]>;
 
   constructor() {
-    this.asyncTabs = Observable.create((observer: Observer<ExampleTab[]>) => {
+    this.asyncTabs = new Observable((observer: Observer<ExampleTab[]>) => {
       setTimeout(() => {
         observer.next([
           {label: 'First', content: 'Content 1'},
diff --git a/src/assets/angular-material-examples/tab-group-dynamic-height/tab-group-dynamic-height-example.ts b/src/assets/angular-material-examples/tab-group-dynamic-height/tab-group-dynamic-height-example.ts
index 6ae7b50f..c2b9c3d5 100755
--- a/src/assets/angular-material-examples/tab-group-dynamic-height/tab-group-dynamic-height-example.ts
+++ b/src/assets/angular-material-examples/tab-group-dynamic-height/tab-group-dynamic-height-example.ts
@@ -1,7 +1,7 @@
 import {Component} from '@angular/core';
 
 /**
- * @title Tag group with dynamic height based on tab contents
+ * @title Tab group with dynamic height based on tab contents
  */
 @Component({
   selector: 'tab-group-dynamic-height-example',
diff --git a/src/assets/angular-material-examples/table-expandable-rows/table-expandable-rows-example.html b/src/assets/angular-material-examples/table-expandable-rows/table-expandable-rows-example.html
index bf38ae1c..d3a22b11 100755
--- a/src/assets/angular-material-examples/table-expandable-rows/table-expandable-rows-example.html
+++ b/src/assets/angular-material-examples/table-expandable-rows/table-expandable-rows-example.html
@@ -29,7 +29,7 @@
   <tr mat-row *matRowDef="let element; columns: columnsToDisplay;"
       class="example-element-row"
       [class.example-expanded-row]="expandedElement === element"
-      (click)="expandedElement = element">
+      (click)="expandedElement = expandedElement === element ? null : element">
   </tr>
   <tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="example-detail-row"></tr>
 </table>
diff --git a/src/assets/angular-material-examples/table-expandable-rows/table-expandable-rows-example.ts b/src/assets/angular-material-examples/table-expandable-rows/table-expandable-rows-example.ts
index 9d2b3b81..bf35aa64 100755
--- a/src/assets/angular-material-examples/table-expandable-rows/table-expandable-rows-example.ts
+++ b/src/assets/angular-material-examples/table-expandable-rows/table-expandable-rows-example.ts
@@ -10,7 +10,7 @@ import {animate, state, style, transition, trigger} from '@angular/animations';
   templateUrl: 'table-expandable-rows-example.html',
   animations: [
     trigger('detailExpand', [
-      state('collapsed', style({height: '0px', minHeight: '0', display: 'none'})),
+      state('collapsed', style({height: '0px', minHeight: '0'})),
       state('expanded', style({height: '*'})),
       transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
     ]),
@@ -19,7 +19,7 @@ import {animate, state, style, transition, trigger} from '@angular/animations';
 export class TableExpandableRowsExample {
   dataSource = ELEMENT_DATA;
   columnsToDisplay = ['name', 'weight', 'symbol', 'position'];
-  expandedElement: PeriodicElement;
+  expandedElement: PeriodicElement | null;
 }
 
 export interface PeriodicElement {
diff --git a/src/assets/angular-material-examples/table-filtering/table-filtering-example.ts b/src/assets/angular-material-examples/table-filtering/table-filtering-example.ts
index e1b572b5..bb849863 100755
--- a/src/assets/angular-material-examples/table-filtering/table-filtering-example.ts
+++ b/src/assets/angular-material-examples/table-filtering/table-filtering-example.ts
@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {MatTableDataSource} from '@angular/material';
+import {MatTableDataSource} from '@angular/material/table';
 
 export interface PeriodicElement {
   name: string;
diff --git a/src/assets/angular-material-examples/table-http/table-http-example.css b/src/assets/angular-material-examples/table-http/table-http-example.css
index 256f8028..a318654f 100755
--- a/src/assets/angular-material-examples/table-http/table-http-example.css
+++ b/src/assets/angular-material-examples/table-http/table-http-example.css
@@ -1,6 +1,7 @@
 /* Structure */
 .example-container {
   position: relative;
+  min-height: 200px;
 }
 
 .example-table-container {
diff --git a/src/assets/angular-material-examples/table-http/table-http-example.html b/src/assets/angular-material-examples/table-http/table-http-example.html
index acdc824d..9c88d204 100755
--- a/src/assets/angular-material-examples/table-http/table-http-example.html
+++ b/src/assets/angular-material-examples/table-http/table-http-example.html
@@ -10,7 +10,7 @@
   <div class="example-table-container">
 
     <table mat-table [dataSource]="data" class="example-table"
-           matSort matSortActive="created" matSortDisableClear matSortDirection="asc">
+           matSort matSortActive="created" matSortDisableClear matSortDirection="desc">
       <!-- Number Column -->
       <ng-container matColumnDef="number">
         <th mat-header-cell *matHeaderCellDef>#</th>
diff --git a/src/assets/angular-material-examples/table-http/table-http-example.ts b/src/assets/angular-material-examples/table-http/table-http-example.ts
index aeab6437..96f6321e 100755
--- a/src/assets/angular-material-examples/table-http/table-http-example.ts
+++ b/src/assets/angular-material-examples/table-http/table-http-example.ts
@@ -1,6 +1,7 @@
 import {HttpClient} from '@angular/common/http';
-import {Component, OnInit, ViewChild} from '@angular/core';
-import {MatPaginator, MatSort} from '@angular/material';
+import {Component, ViewChild, AfterViewInit} from '@angular/core';
+import {MatPaginator} from '@angular/material/paginator';
+import {MatSort} from '@angular/material/sort';
 import {merge, Observable, of as observableOf} from 'rxjs';
 import {catchError, map, startWith, switchMap} from 'rxjs/operators';
 
@@ -12,22 +13,22 @@ import {catchError, map, startWith, switchMap} from 'rxjs/operators';
   styleUrls: ['table-http-example.css'],
   templateUrl: 'table-http-example.html',
 })
-export class TableHttpExample implements OnInit {
+export class TableHttpExample implements AfterViewInit {
   displayedColumns: string[] = ['created', 'state', 'number', 'title'];
-  exampleDatabase: ExampleHttpDao | null;
+  exampleDatabase: ExampleHttpDatabase | null;
   data: GithubIssue[] = [];
 
   resultsLength = 0;
   isLoadingResults = true;
   isRateLimitReached = false;
 
-  @ViewChild(MatPaginator) paginator: MatPaginator;
-  @ViewChild(MatSort) sort: MatSort;
+  @ViewChild(MatPaginator, {static: false}) paginator: MatPaginator;
+  @ViewChild(MatSort, {static: false}) sort: MatSort;
 
-  constructor(private http: HttpClient) {}
+  constructor(private _httpClient: HttpClient) {}
 
-  ngOnInit() {
-    this.exampleDatabase = new ExampleHttpDao(this.http);
+  ngAfterViewInit() {
+    this.exampleDatabase = new ExampleHttpDatabase(this._httpClient);
 
     // If the user changes the sort order, reset back to the first page.
     this.sort.sortChange.subscribe(() => this.paginator.pageIndex = 0);
@@ -71,14 +72,14 @@ export interface GithubIssue {
 }
 
 /** An example database that the data source uses to retrieve data for the table. */
-export class ExampleHttpDao {
-  constructor(private http: HttpClient) {}
+export class ExampleHttpDatabase {
+  constructor(private _httpClient: HttpClient) {}
 
   getRepoIssues(sort: string, order: string, page: number): Observable<GithubApi> {
     const href = 'https://api.github.com/search/issues';
     const requestUrl =
-        `${href}?q=repo:angular/material2&sort=${sort}&order=${order}&page=${page + 1}`;
+        `${href}?q=repo:angular/components&sort=${sort}&order=${order}&page=${page + 1}`;
 
-    return this.http.get<GithubApi>(requestUrl);
+    return this._httpClient.get<GithubApi>(requestUrl);
   }
 }
diff --git a/src/assets/angular-material-examples/table-overview/table-overview-example.ts b/src/assets/angular-material-examples/table-overview/table-overview-example.ts
index 62eec1ce..1ef9ab99 100755
--- a/src/assets/angular-material-examples/table-overview/table-overview-example.ts
+++ b/src/assets/angular-material-examples/table-overview/table-overview-example.ts
@@ -1,5 +1,7 @@
 import {Component, OnInit, ViewChild} from '@angular/core';
-import {MatPaginator, MatSort, MatTableDataSource} from '@angular/material';
+import {MatPaginator} from '@angular/material/paginator';
+import {MatSort} from '@angular/material/sort';
+import {MatTableDataSource} from '@angular/material/table';
 
 export interface UserData {
   id: string;
@@ -9,11 +11,14 @@ export interface UserData {
 }
 
 /** Constants used to fill up our data base. */
-const COLORS: string[] = ['maroon', 'red', 'orange', 'yellow', 'olive', 'green', 'purple',
-  'fuchsia', 'lime', 'teal', 'aqua', 'blue', 'navy', 'black', 'gray'];
-const NAMES: string[] = ['Maia', 'Asher', 'Olivia', 'Atticus', 'Amelia', 'Jack',
-  'Charlotte', 'Theodore', 'Isla', 'Oliver', 'Isabella', 'Jasper',
-  'Cora', 'Levi', 'Violet', 'Arthur', 'Mia', 'Thomas', 'Elizabeth'];
+const COLORS: string[] = [
+  'maroon', 'red', 'orange', 'yellow', 'olive', 'green', 'purple', 'fuchsia', 'lime', 'teal',
+  'aqua', 'blue', 'navy', 'black', 'gray'
+];
+const NAMES: string[] = [
+  'Maia', 'Asher', 'Olivia', 'Atticus', 'Amelia', 'Jack', 'Charlotte', 'Theodore', 'Isla', 'Oliver',
+  'Isabella', 'Jasper', 'Cora', 'Levi', 'Violet', 'Arthur', 'Mia', 'Thomas', 'Elizabeth'
+];
 
 /**
  * @title Data table with sorting, pagination, and filtering.
@@ -27,8 +32,8 @@ export class TableOverviewExample implements OnInit {
   displayedColumns: string[] = ['id', 'name', 'progress', 'color'];
   dataSource: MatTableDataSource<UserData>;
 
-  @ViewChild(MatPaginator) paginator: MatPaginator;
-  @ViewChild(MatSort) sort: MatSort;
+  @ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;
+  @ViewChild(MatSort, {static: true}) sort: MatSort;
 
   constructor() {
     // Create 100 users
@@ -54,8 +59,7 @@ export class TableOverviewExample implements OnInit {
 
 /** Builds and returns a new User. */
 function createNewUser(id: number): UserData {
-  const name =
-      NAMES[Math.round(Math.random() * (NAMES.length - 1))] + ' ' +
+  const name = NAMES[Math.round(Math.random() * (NAMES.length - 1))] + ' ' +
       NAMES[Math.round(Math.random() * (NAMES.length - 1))].charAt(0) + '.';
 
   return {
diff --git a/src/assets/angular-material-examples/table-pagination/table-pagination-example.ts b/src/assets/angular-material-examples/table-pagination/table-pagination-example.ts
index e4cad373..42e36faf 100755
--- a/src/assets/angular-material-examples/table-pagination/table-pagination-example.ts
+++ b/src/assets/angular-material-examples/table-pagination/table-pagination-example.ts
@@ -1,5 +1,6 @@
 import {Component, OnInit, ViewChild} from '@angular/core';
-import {MatPaginator, MatTableDataSource} from '@angular/material';
+import {MatPaginator} from '@angular/material/paginator';
+import {MatTableDataSource} from '@angular/material/table';
 
 /**
  * @title Table with pagination
@@ -13,7 +14,7 @@ export class TablePaginationExample implements OnInit {
   displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
   dataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);
 
-  @ViewChild(MatPaginator) paginator: MatPaginator;
+  @ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;
 
   ngOnInit() {
     this.dataSource.paginator = this.paginator;
diff --git a/src/assets/angular-material-examples/table-selection/table-selection-example.html b/src/assets/angular-material-examples/table-selection/table-selection-example.html
index a22d5626..9bf76f15 100755
--- a/src/assets/angular-material-examples/table-selection/table-selection-example.html
+++ b/src/assets/angular-material-examples/table-selection/table-selection-example.html
@@ -5,13 +5,15 @@
     <th mat-header-cell *matHeaderCellDef>
       <mat-checkbox (change)="$event ? masterToggle() : null"
                     [checked]="selection.hasValue() && isAllSelected()"
-                    [indeterminate]="selection.hasValue() && !isAllSelected()">
+                    [indeterminate]="selection.hasValue() && !isAllSelected()"
+                    [aria-label]="checkboxLabel()">
       </mat-checkbox>
     </th>
     <td mat-cell *matCellDef="let row">
       <mat-checkbox (click)="$event.stopPropagation()"
                     (change)="$event ? selection.toggle(row) : null"
-                    [checked]="selection.isSelected(row)">
+                    [checked]="selection.isSelected(row)"
+                    [aria-label]="checkboxLabel(row)">
       </mat-checkbox>
     </td>
   </ng-container>
diff --git a/src/assets/angular-material-examples/table-selection/table-selection-example.ts b/src/assets/angular-material-examples/table-selection/table-selection-example.ts
index 15336737..8aa13f5a 100755
--- a/src/assets/angular-material-examples/table-selection/table-selection-example.ts
+++ b/src/assets/angular-material-examples/table-selection/table-selection-example.ts
@@ -1,6 +1,6 @@
 import {SelectionModel} from '@angular/cdk/collections';
 import {Component} from '@angular/core';
-import {MatTableDataSource} from '@angular/material';
+import {MatTableDataSource} from '@angular/material/table';
 
 export interface PeriodicElement {
   name: string;
@@ -48,4 +48,12 @@ export class TableSelectionExample {
         this.selection.clear() :
         this.dataSource.data.forEach(row => this.selection.select(row));
   }
+
+  /** The label for the checkbox on the passed row */
+  checkboxLabel(row?: PeriodicElement): string {
+    if (!row) {
+      return `${this.isAllSelected() ? 'select' : 'deselect'} all`;
+    }
+    return `${this.selection.isSelected(row) ? 'deselect' : 'select'} row ${row.position + 1}`;
+  }
 }
diff --git a/src/assets/angular-material-examples/table-simple-column/table-simple-column-example.ts b/src/assets/angular-material-examples/table-simple-column/table-simple-column-example.ts
index 05c53f89..dddbea40 100755
--- a/src/assets/angular-material-examples/table-simple-column/table-simple-column-example.ts
+++ b/src/assets/angular-material-examples/table-simple-column/table-simple-column-example.ts
@@ -1,12 +1,7 @@
 import {Component, Input, OnDestroy, OnInit, Optional, ViewChild} from '@angular/core';
 import {coerceBooleanProperty} from '@angular/cdk/coercion';
-import {
-    MatColumnDef,
-    MatSort,
-    MatSortHeader,
-    MatTable,
-    MatTableDataSource
-} from '@angular/material';
+import { MatSort, MatSortHeader } from '@angular/material/sort';
+import { MatColumnDef, MatTable, MatTableDataSource } from '@angular/material/table';
 
 export interface PeriodicElement {
   name: string;
@@ -39,9 +34,9 @@ const ELEMENT_DATA: PeriodicElement[] = [
 export class TableSimpleColumnExample implements OnInit {
   displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
   dataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);
-  getWeight = (data: PeriodicElement) => '~' + data.weight;
 
-  @ViewChild('sort') sort: MatSort;
+  @ViewChild('sort', {static: true}) sort: MatSort;
+  getWeight = (data: PeriodicElement) => '~' + data.weight;
 
   ngOnInit() {
     this.dataSource.sort = this.sort;
@@ -106,9 +101,9 @@ export class SimpleColumn<T> implements OnDestroy, OnInit {
   }
   _sortable: boolean;
 
-  @ViewChild(MatColumnDef) columnDef: MatColumnDef;
+  @ViewChild(MatColumnDef, {static: true}) columnDef: MatColumnDef;
 
-  @ViewChild(MatSortHeader) sortHeader: MatSortHeader;
+  @ViewChild(MatSortHeader, {static: true}) sortHeader: MatSortHeader;
 
   constructor(@Optional() public table: MatTable<any>) { }
 
diff --git a/src/assets/angular-material-examples/table-sorting/table-sorting-example.ts b/src/assets/angular-material-examples/table-sorting/table-sorting-example.ts
index cc992b0e..8d6b6d4b 100755
--- a/src/assets/angular-material-examples/table-sorting/table-sorting-example.ts
+++ b/src/assets/angular-material-examples/table-sorting/table-sorting-example.ts
@@ -1,5 +1,6 @@
 import {Component, OnInit, ViewChild} from '@angular/core';
-import {MatSort, MatTableDataSource} from '@angular/material';
+import {MatSort} from '@angular/material/sort';
+import {MatTableDataSource} from '@angular/material/table';
 
 export interface PeriodicElement {
   name: string;
@@ -33,7 +34,7 @@ export class TableSortingExample implements OnInit {
   displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
   dataSource = new MatTableDataSource(ELEMENT_DATA);
 
-  @ViewChild(MatSort) sort: MatSort;
+  @ViewChild(MatSort, {static: true}) sort: MatSort;
 
   ngOnInit() {
     this.dataSource.sort = this.sort;
diff --git a/src/assets/angular-material-examples/table-sticky-columns/table-sticky-columns-example.ts b/src/assets/angular-material-examples/table-sticky-columns/table-sticky-columns-example.ts
index 7b1c84b4..2ff3d00c 100755
--- a/src/assets/angular-material-examples/table-sticky-columns/table-sticky-columns-example.ts
+++ b/src/assets/angular-material-examples/table-sticky-columns/table-sticky-columns-example.ts
@@ -1,7 +1,7 @@
 import {Component} from '@angular/core';
 
 /**
- * @title Table with a sticky columns
+ * @title Table with sticky columns
  */
 @Component({
   selector: 'table-sticky-columns-example',
diff --git a/src/assets/angular-material-examples/table-sticky-complex-flex/table-sticky-complex-flex-example.ts b/src/assets/angular-material-examples/table-sticky-complex-flex/table-sticky-complex-flex-example.ts
index 8882ca5e..d52196e4 100755
--- a/src/assets/angular-material-examples/table-sticky-complex-flex/table-sticky-complex-flex-example.ts
+++ b/src/assets/angular-material-examples/table-sticky-complex-flex/table-sticky-complex-flex-example.ts
@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {MatButtonToggleGroup} from '@angular/material';
+import {MatButtonToggleGroup} from '@angular/material/button-toggle';
 
 /**
  * @title Flex-layout tables with toggle-able sticky headers, footers, and columns
diff --git a/src/assets/angular-material-examples/table-sticky-complex/table-sticky-complex-example.ts b/src/assets/angular-material-examples/table-sticky-complex/table-sticky-complex-example.ts
index 912d9ad9..49665293 100755
--- a/src/assets/angular-material-examples/table-sticky-complex/table-sticky-complex-example.ts
+++ b/src/assets/angular-material-examples/table-sticky-complex/table-sticky-complex-example.ts
@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {MatButtonToggleGroup} from '@angular/material';
+import {MatButtonToggleGroup} from '@angular/material/button-toggle';
 
 /**
  * @title Tables with toggle-able sticky headers, footers, and columns
diff --git a/src/assets/angular-material-examples/table-wrapped/table-wrapped-example.ts b/src/assets/angular-material-examples/table-wrapped/table-wrapped-example.ts
index 38e95d63..ac604539 100755
--- a/src/assets/angular-material-examples/table-wrapped/table-wrapped-example.ts
+++ b/src/assets/angular-material-examples/table-wrapped/table-wrapped-example.ts
@@ -1,3 +1,4 @@
+import {DataSource} from '@angular/cdk/collections';
 import {
   AfterContentInit,
   Component,
@@ -7,15 +8,14 @@ import {
   QueryList,
   ViewChild
 } from '@angular/core';
+import {MatSort} from '@angular/material/sort';
 import {
   MatColumnDef,
   MatHeaderRowDef,
   MatRowDef,
-  MatSort,
   MatTable,
   MatTableDataSource
-} from '@angular/material';
-import {DataSource} from '@angular/cdk/collections';
+} from '@angular/material/table';
 
 export interface PeriodicElement {
   name: string;
@@ -49,7 +49,7 @@ export class TableWrappedExample implements OnInit {
   displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
   dataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);
 
-  @ViewChild('sort') sort: MatSort;
+  @ViewChild('sort', {static: true}) sort: MatSort;
 
   ngOnInit() {
     this.dataSource.sort = this.sort;
@@ -70,11 +70,11 @@ export class TableWrappedExample implements OnInit {
   `]
 })
 export class WrapperTable<T> implements AfterContentInit {
-  @ContentChildren(MatHeaderRowDef) headerRowDefs:  QueryList<MatHeaderRowDef>;
+  @ContentChildren(MatHeaderRowDef) headerRowDefs: QueryList<MatHeaderRowDef>;
   @ContentChildren(MatRowDef) rowDefs: QueryList<MatRowDef<T>>;
   @ContentChildren(MatColumnDef) columnDefs: QueryList<MatColumnDef>;
 
-  @ViewChild(MatTable) table: MatTable<T>;
+  @ViewChild(MatTable, {static: true}) table: MatTable<T>;
 
   @Input() columns: string[];
 
diff --git a/src/assets/angular-material-examples/text-field-autofill-directive/text-field-autofill-directive-example.css b/src/assets/angular-material-examples/text-field-autofill-directive/text-field-autofill-directive-example.css
index 74323087..ece1d0db 100755
--- a/src/assets/angular-material-examples/text-field-autofill-directive/text-field-autofill-directive-example.css
+++ b/src/assets/angular-material-examples/text-field-autofill-directive/text-field-autofill-directive-example.css
@@ -1 +1,3 @@
-/** No CSS for this example */
+mat-form-field {
+  margin-right: 12px;
+}
diff --git a/src/assets/angular-material-examples/text-field-autofill-monitor/text-field-autofill-monitor-example.css b/src/assets/angular-material-examples/text-field-autofill-monitor/text-field-autofill-monitor-example.css
index 74323087..ece1d0db 100755
--- a/src/assets/angular-material-examples/text-field-autofill-monitor/text-field-autofill-monitor-example.css
+++ b/src/assets/angular-material-examples/text-field-autofill-monitor/text-field-autofill-monitor-example.css
@@ -1 +1,3 @@
-/** No CSS for this example */
+mat-form-field {
+  margin-right: 12px;
+}
diff --git a/src/assets/angular-material-examples/text-field-autofill-monitor/text-field-autofill-monitor-example.ts b/src/assets/angular-material-examples/text-field-autofill-monitor/text-field-autofill-monitor-example.ts
index 12831678..6d8f5713 100755
--- a/src/assets/angular-material-examples/text-field-autofill-monitor/text-field-autofill-monitor-example.ts
+++ b/src/assets/angular-material-examples/text-field-autofill-monitor/text-field-autofill-monitor-example.ts
@@ -1,5 +1,5 @@
 import {AutofillMonitor} from '@angular/cdk/text-field';
-import {Component, ElementRef, OnDestroy, OnInit, ViewChild} from '@angular/core';
+import {AfterViewInit, Component, ElementRef, OnDestroy, ViewChild} from '@angular/core';
 
 /** @title Monitoring autofill state with AutofillMonitor */
 @Component({
@@ -7,23 +7,23 @@ import {Component, ElementRef, OnDestroy, OnInit, ViewChild} from '@angular/core
   templateUrl: './text-field-autofill-monitor-example.html',
   styleUrls: ['./text-field-autofill-monitor-example.css'],
 })
-export class TextFieldAutofillMonitorExample implements OnDestroy, OnInit {
-  @ViewChild('first', {read: ElementRef}) firstName: ElementRef<HTMLElement>;
-  @ViewChild('last', {read: ElementRef}) lastName: ElementRef<HTMLElement>;
+export class TextFieldAutofillMonitorExample implements AfterViewInit, OnDestroy {
+  @ViewChild('first', { read: ElementRef, static: false }) firstName: ElementRef<HTMLElement>;
+  @ViewChild('last', { read: ElementRef, static: false }) lastName: ElementRef<HTMLElement>;
   firstNameAutofilled: boolean;
   lastNameAutofilled: boolean;
 
-  constructor(private autofill: AutofillMonitor) {}
+  constructor(private _autofill: AutofillMonitor) {}
 
-  ngOnInit() {
-    this.autofill.monitor(this.firstName)
+  ngAfterViewInit() {
+    this._autofill.monitor(this.firstName)
         .subscribe(e => this.firstNameAutofilled = e.isAutofilled);
-    this.autofill.monitor(this.lastName)
+    this._autofill.monitor(this.lastName)
         .subscribe(e => this.lastNameAutofilled = e.isAutofilled);
   }
 
   ngOnDestroy() {
-    this.autofill.stopMonitoring(this.firstName);
-    this.autofill.stopMonitoring(this.lastName);
+    this._autofill.stopMonitoring(this.firstName);
+    this._autofill.stopMonitoring(this.lastName);
   }
 }
diff --git a/src/assets/angular-material-examples/text-field-autosize-textarea/text-field-autosize-textarea-example.css b/src/assets/angular-material-examples/text-field-autosize-textarea/text-field-autosize-textarea-example.css
index 74323087..ece1d0db 100755
--- a/src/assets/angular-material-examples/text-field-autosize-textarea/text-field-autosize-textarea-example.css
+++ b/src/assets/angular-material-examples/text-field-autosize-textarea/text-field-autosize-textarea-example.css
@@ -1 +1,3 @@
-/** No CSS for this example */
+mat-form-field {
+  margin-right: 12px;
+}
diff --git a/src/assets/angular-material-examples/text-field-autosize-textarea/text-field-autosize-textarea-example.html b/src/assets/angular-material-examples/text-field-autosize-textarea/text-field-autosize-textarea-example.html
index 761214c4..9a52e1e5 100755
--- a/src/assets/angular-material-examples/text-field-autosize-textarea/text-field-autosize-textarea-example.html
+++ b/src/assets/angular-material-examples/text-field-autosize-textarea/text-field-autosize-textarea-example.html
@@ -15,6 +15,6 @@
   <textarea matInput
             cdkTextareaAutosize
             #autosize="cdkTextareaAutosize"
-            cdkAutosizeMinRows="2"
+            cdkAutosizeMinRows="1"
             cdkAutosizeMaxRows="5"></textarea>
 </mat-form-field>
diff --git a/src/assets/angular-material-examples/text-field-autosize-textarea/text-field-autosize-textarea-example.ts b/src/assets/angular-material-examples/text-field-autosize-textarea/text-field-autosize-textarea-example.ts
index a3154fbd..bd03fd26 100755
--- a/src/assets/angular-material-examples/text-field-autosize-textarea/text-field-autosize-textarea-example.ts
+++ b/src/assets/angular-material-examples/text-field-autosize-textarea/text-field-autosize-textarea-example.ts
@@ -9,13 +9,13 @@ import {take} from 'rxjs/operators';
   styleUrls: ['./text-field-autosize-textarea-example.css'],
 })
 export class TextFieldAutosizeTextareaExample {
-  constructor(private ngZone: NgZone) {}
+  constructor(private _ngZone: NgZone) {}
 
-  @ViewChild('autosize') autosize: CdkTextareaAutosize;
+  @ViewChild('autosize', {static: false}) autosize: CdkTextareaAutosize;
 
   triggerResize() {
     // Wait for changes to be applied, then trigger textarea resize.
-    this.ngZone.onStable.pipe(take(1))
+    this._ngZone.onStable.pipe(take(1))
         .subscribe(() => this.autosize.resizeToFitContent(true));
   }
 }
diff --git a/src/assets/angular-material-examples/toolbar-multirow/toolbar-multirow-example.html b/src/assets/angular-material-examples/toolbar-multirow/toolbar-multirow-example.html
index c1731969..4c2071c2 100755
--- a/src/assets/angular-material-examples/toolbar-multirow/toolbar-multirow-example.html
+++ b/src/assets/angular-material-examples/toolbar-multirow/toolbar-multirow-example.html
@@ -6,13 +6,13 @@
   <mat-toolbar-row>
     <span>Second Line</span>
     <span class="example-spacer"></span>
-    <mat-icon class="example-icon">verified_user</mat-icon>
+    <mat-icon class="example-icon" aria-hidden="false" aria-label="Example user verified icon">verified_user</mat-icon>
   </mat-toolbar-row>
 
   <mat-toolbar-row>
     <span>Third Line</span>
     <span class="example-spacer"></span>
-    <mat-icon class="example-icon">favorite</mat-icon>
-    <mat-icon class="example-icon">delete</mat-icon>
+    <mat-icon class="example-icon" aria-hidden="false" aria-label="Example heart icon">favorite</mat-icon>
+    <mat-icon class="example-icon" aria-hidden="false" aria-label="Example delete icon">delete</mat-icon>
   </mat-toolbar-row>
 </mat-toolbar>
diff --git a/src/assets/angular-material-examples/tooltip-auto-hide/tooltip-auto-hide-example.ts b/src/assets/angular-material-examples/tooltip-auto-hide/tooltip-auto-hide-example.ts
index 01267279..d5c7c9f3 100755
--- a/src/assets/angular-material-examples/tooltip-auto-hide/tooltip-auto-hide-example.ts
+++ b/src/assets/angular-material-examples/tooltip-auto-hide/tooltip-auto-hide-example.ts
@@ -1,6 +1,6 @@
 import {Component} from '@angular/core';
 import {FormControl} from '@angular/forms';
-import {TooltipPosition} from '@angular/material';
+import {TooltipPosition} from '@angular/material/tooltip';
 
 /**
  * @title Tooltip that demonstrates auto-hiding when it clips out of its scrolling container.
diff --git a/src/assets/angular-material-examples/tooltip-manual/tooltip-manual-example.html b/src/assets/angular-material-examples/tooltip-manual/tooltip-manual-example.html
index 11305dfc..d931b48e 100755
--- a/src/assets/angular-material-examples/tooltip-manual/tooltip-manual-example.html
+++ b/src/assets/angular-material-examples/tooltip-manual/tooltip-manual-example.html
@@ -1,20 +1,20 @@
 <div>
-  <span> Mouse over to </span>
+  <span> Click the following buttons to... </span>
   <button mat-button
-          (mouseenter)="tooltip.show()"
-          aria-label="Button that progamatically shows a tooltip on another button"
+          (click)="tooltip.show()"
+          aria-label="Show tooltip on the button at the end of this section"
           class="example-action-button">
     show
   </button>
   <button mat-button
-          (mouseenter)="tooltip.hide()"
-          aria-label="Button that progamatically hides a tooltip on another button"
+          (click)="tooltip.hide()"
+          aria-label="Hide tooltip on the button at the end of this section"
           class="example-action-button">
     hide
   </button>
   <button mat-button
-          (mouseenter)="tooltip.toggle()"
-          aria-label="Button that progamatically toggles a tooltip on another button to show/hide"
+          (click)="tooltip.toggle()"
+          aria-label="Show/Hide tooltip on the button at the end of this section"
           class="example-action-button">
     toggle show/hide
   </button>
diff --git a/src/assets/angular-material-examples/tooltip-modified-defaults/tooltip-modified-defaults-example.ts b/src/assets/angular-material-examples/tooltip-modified-defaults/tooltip-modified-defaults-example.ts
index 53cd3bc2..ba77fd4a 100755
--- a/src/assets/angular-material-examples/tooltip-modified-defaults/tooltip-modified-defaults-example.ts
+++ b/src/assets/angular-material-examples/tooltip-modified-defaults/tooltip-modified-defaults-example.ts
@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {MAT_TOOLTIP_DEFAULT_OPTIONS, MatTooltipDefaultOptions} from '@angular/material';
+import {MAT_TOOLTIP_DEFAULT_OPTIONS, MatTooltipDefaultOptions} from '@angular/material/tooltip';
 
 /** Custom options the configure the tooltip's default show/hide delays. */
 export const myCustomTooltipDefaults: MatTooltipDefaultOptions = {
diff --git a/src/assets/angular-material-examples/tooltip-position/tooltip-position-example.ts b/src/assets/angular-material-examples/tooltip-position/tooltip-position-example.ts
index 89ad5a16..6f0a05cd 100755
--- a/src/assets/angular-material-examples/tooltip-position/tooltip-position-example.ts
+++ b/src/assets/angular-material-examples/tooltip-position/tooltip-position-example.ts
@@ -1,6 +1,6 @@
 import {Component} from '@angular/core';
 import {FormControl} from '@angular/forms';
-import {TooltipPosition} from '@angular/material';
+import {TooltipPosition} from '@angular/material/tooltip';
 
 /**
  * @title Tooltip with a custom position
diff --git a/src/assets/angular-material-examples/tree-checklist/tree-checklist-example.ts b/src/assets/angular-material-examples/tree-checklist/tree-checklist-example.ts
index b3c1461c..6e5f1d1c 100755
--- a/src/assets/angular-material-examples/tree-checklist/tree-checklist-example.ts
+++ b/src/assets/angular-material-examples/tree-checklist/tree-checklist-example.ts
@@ -131,13 +131,13 @@ export class TreeChecklistExample {
   /** The selection for checklist */
   checklistSelection = new SelectionModel<TodoItemFlatNode>(true /* multiple */);
 
-  constructor(private database: ChecklistDatabase) {
+  constructor(private _database: ChecklistDatabase) {
     this.treeFlattener = new MatTreeFlattener(this.transformer, this.getLevel,
       this.isExpandable, this.getChildren);
     this.treeControl = new FlatTreeControl<TodoItemFlatNode>(this.getLevel, this.isExpandable);
     this.dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener);
 
-    database.dataChange.subscribe(data => {
+    _database.dataChange.subscribe(data => {
       this.dataSource.data = data;
     });
   }
@@ -251,13 +251,13 @@ export class TreeChecklistExample {
   /** Select the category so we can insert the new item. */
   addNewItem(node: TodoItemFlatNode) {
     const parentNode = this.flatNodeMap.get(node);
-    this.database.insertItem(parentNode!, '');
+    this._database.insertItem(parentNode!, '');
     this.treeControl.expand(node);
   }
 
   /** Save the node to database */
   saveNode(node: TodoItemFlatNode, itemValue: string) {
     const nestedNode = this.flatNodeMap.get(node);
-    this.database.updateItem(nestedNode!, itemValue);
+    this._database.updateItem(nestedNode!, itemValue);
   }
 }
diff --git a/src/assets/angular-material-examples/tree-dynamic/tree-dynamic-example.ts b/src/assets/angular-material-examples/tree-dynamic/tree-dynamic-example.ts
index 7933e19e..a00cdbbe 100755
--- a/src/assets/angular-material-examples/tree-dynamic/tree-dynamic-example.ts
+++ b/src/assets/angular-material-examples/tree-dynamic/tree-dynamic-example.ts
@@ -51,15 +51,15 @@ export class DynamicDataSource {
 
   get data(): DynamicFlatNode[] { return this.dataChange.value; }
   set data(value: DynamicFlatNode[]) {
-    this.treeControl.dataNodes = value;
+    this._treeControl.dataNodes = value;
     this.dataChange.next(value);
   }
 
-  constructor(private treeControl: FlatTreeControl<DynamicFlatNode>,
-              private database: DynamicDatabase) {}
+  constructor(private _treeControl: FlatTreeControl<DynamicFlatNode>,
+              private _database: DynamicDatabase) {}
 
   connect(collectionViewer: CollectionViewer): Observable<DynamicFlatNode[]> {
-    this.treeControl.expansionModel.onChange.subscribe(change => {
+    this._treeControl.expansionModel.onChange.subscribe(change => {
       if ((change as SelectionChange<DynamicFlatNode>).added ||
         (change as SelectionChange<DynamicFlatNode>).removed) {
         this.handleTreeControl(change as SelectionChange<DynamicFlatNode>);
@@ -83,7 +83,7 @@ export class DynamicDataSource {
    * Toggle the node, remove from display list
    */
   toggleNode(node: DynamicFlatNode, expand: boolean) {
-    const children = this.database.getChildren(node.item);
+    const children = this._database.getChildren(node.item);
     const index = this.data.indexOf(node);
     if (!children || index < 0) { // If no children, or cannot find the node, no op
       return;
@@ -94,7 +94,7 @@ export class DynamicDataSource {
     setTimeout(() => {
       if (expand) {
         const nodes = children.map(name =>
-          new DynamicFlatNode(name, node.level + 1, this.database.isExpandable(name)));
+          new DynamicFlatNode(name, node.level + 1, this._database.isExpandable(name)));
         this.data.splice(index + 1, 0, ...nodes);
       } else {
         let count = 0;
diff --git a/src/assets/angular-material-examples/tree-flat-overview/tree-flat-overview-example.html b/src/assets/angular-material-examples/tree-flat-overview/tree-flat-overview-example.html
index a4729f13..5a28c767 100755
--- a/src/assets/angular-material-examples/tree-flat-overview/tree-flat-overview-example.html
+++ b/src/assets/angular-material-examples/tree-flat-overview/tree-flat-overview-example.html
@@ -1,16 +1,18 @@
 <mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
-  <mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle matTreeNodePadding>
+  <!-- This is the tree node template for leaf nodes -->
+  <mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding>
+    <!-- use a disabled button to provide padding for tree leaf -->
     <button mat-icon-button disabled></button>
-    {{node.filename}} : {{node.type}}
+    {{node.name}}
   </mat-tree-node>
-
+  <!-- This is the tree node template for expandable nodes -->
   <mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding>
     <button mat-icon-button matTreeNodeToggle
-            [attr.aria-label]="'toggle ' + node.filename">
+            [attr.aria-label]="'toggle ' + node.name">
       <mat-icon class="mat-icon-rtl-mirror">
         {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
       </mat-icon>
     </button>
-    {{node.filename}} : {{node.type}}
+    {{node.name}}
   </mat-tree-node>
 </mat-tree>
diff --git a/src/assets/angular-material-examples/tree-flat-overview/tree-flat-overview-example.ts b/src/assets/angular-material-examples/tree-flat-overview/tree-flat-overview-example.ts
index 0e5155d1..fd610f20 100755
--- a/src/assets/angular-material-examples/tree-flat-overview/tree-flat-overview-example.ts
+++ b/src/assets/angular-material-examples/tree-flat-overview/tree-flat-overview-example.ts
@@ -1,113 +1,49 @@
 import {FlatTreeControl} from '@angular/cdk/tree';
-import {Component, Injectable} from '@angular/core';
+import {Component} from '@angular/core';
 import {MatTreeFlatDataSource, MatTreeFlattener} from '@angular/material/tree';
-import {BehaviorSubject, Observable, of as observableOf} from 'rxjs';
 
 /**
- * File node data with nested structure.
- * Each node has a filename, and a type or a list of children.
+ * Food data with nested structure.
+ * Each node has a name and an optiona list of children.
  */
-export class FileNode {
-  children: FileNode[];
-  filename: string;
-  type: any;
+interface FoodNode {
+  name: string;
+  children?: FoodNode[];
 }
 
+const TREE_DATA: FoodNode[] = [
+  {
+    name: 'Fruit',
+    children: [
+      {name: 'Apple'},
+      {name: 'Banana'},
+      {name: 'Fruit loops'},
+    ]
+  }, {
+    name: 'Vegetables',
+    children: [
+      {
+        name: 'Green',
+        children: [
+          {name: 'Broccoli'},
+          {name: 'Brussel sprouts'},
+        ]
+      }, {
+        name: 'Orange',
+        children: [
+          {name: 'Pumpkins'},
+          {name: 'Carrots'},
+        ]
+      },
+    ]
+  },
+];
+
 /** Flat node with expandable and level information */
-export class FileFlatNode {
-  constructor(
-    public expandable: boolean, public filename: string, public level: number, public type: any) {}
-}
-
-/**
- * The file structure tree data in string. The data could be parsed into a Json object
- */
-const TREE_DATA = JSON.stringify({
-  Applications: {
-    Calendar: 'app',
-    Chrome: 'app',
-    Webstorm: 'app'
-  },
-  Documents: {
-    angular: {
-      src: {
-        compiler: 'ts',
-        core: 'ts'
-      }
-    },
-    material2: {
-      src: {
-        button: 'ts',
-        checkbox: 'ts',
-        input: 'ts'
-      }
-    }
-  },
-  Downloads: {
-    October: 'pdf',
-    November: 'pdf',
-    Tutorial: 'html'
-  },
-  Pictures: {
-    'Photo Booth Library': {
-      Contents: 'dir',
-      Pictures: 'dir'
-    },
-    Sun: 'png',
-    Woods: 'jpg'
-  }
-});
-
-/**
- * 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 = 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(obj: {[key: string]: any}, level: number): FileNode[] {
-    return Object.keys(obj).reduce<FileNode[]>((accumulator, key) => {
-      const value = obj[key];
-      const node = new FileNode();
-      node.filename = key;
-
-      if (value != null) {
-        if (typeof value === 'object') {
-          node.children = this.buildFileTree(value, level + 1);
-        } else {
-          node.type = value;
-        }
-      }
-
-      return accumulator.concat(node);
-    }, []);
-  }
+interface ExampleFlatNode {
+  expandable: boolean;
+  name: string;
+  level: number;
 }
 
 /**
@@ -117,31 +53,27 @@ export class FileDatabase {
   selector: 'tree-flat-overview-example',
   templateUrl: 'tree-flat-overview-example.html',
   styleUrls: ['tree-flat-overview-example.css'],
-  providers: [FileDatabase]
 })
 export class TreeFlatOverviewExample {
-  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);
+  private _transformer = (node: FoodNode, level: number) => {
+    return {
+      expandable: !!node.children && node.children.length > 0,
+      name: node.name,
+      level: level,
+    };
   }
 
-  transformer = (node: FileNode, level: number) => {
-    return new FileFlatNode(!!node.children, node.filename, level, node.type);
+  treeControl = new FlatTreeControl<ExampleFlatNode>(
+      node => node.level, node => node.expandable);
+
+  treeFlattener = new MatTreeFlattener(
+      this._transformer, node => node.level, node => node.expandable, node => node.children);
+
+  dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener);
+
+  constructor() {
+    this.dataSource.data = TREE_DATA;
   }
 
-  private _getLevel = (node: FileFlatNode) => node.level;
-
-  private _isExpandable = (node: FileFlatNode) => node.expandable;
-
-  private _getChildren = (node: FileNode): Observable<FileNode[]> => observableOf(node.children);
-
-  hasChild = (_: number, _nodeData: FileFlatNode) => _nodeData.expandable;
+  hasChild = (_: number, node: ExampleFlatNode) => node.expandable;
 }
diff --git a/src/assets/angular-material-examples/tree-loadmore/tree-loadmore-example.ts b/src/assets/angular-material-examples/tree-loadmore/tree-loadmore-example.ts
index 0c958a8a..de7bc685 100755
--- a/src/assets/angular-material-examples/tree-loadmore/tree-loadmore-example.ts
+++ b/src/assets/angular-material-examples/tree-loadmore/tree-loadmore-example.ts
@@ -105,7 +105,7 @@ export class TreeLoadmoreExample {
   // Flat tree data source
   dataSource: MatTreeFlatDataSource<LoadmoreNode, LoadmoreFlatNode>;
 
-  constructor(private database: LoadmoreDatabase) {
+  constructor(private _database: LoadmoreDatabase) {
     this.treeFlattener = new MatTreeFlattener(this.transformer, this.getLevel,
       this.isExpandable, this.getChildren);
 
@@ -113,11 +113,11 @@ export class TreeLoadmoreExample {
 
     this.dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener);
 
-    database.dataChange.subscribe(data => {
+    _database.dataChange.subscribe(data => {
       this.dataSource.data = data;
     });
 
-    database.initialize();
+    _database.initialize();
   }
 
   getChildren = (node: LoadmoreNode): Observable<LoadmoreNode[]> => node.childrenChange;
@@ -145,10 +145,10 @@ export class TreeLoadmoreExample {
 
   /** Load more nodes from data source */
   loadMore(item: string) {
-    this.database.loadMore(item);
+    this._database.loadMore(item);
   }
 
   loadChildren(node: LoadmoreFlatNode) {
-    this.database.loadMore(node.item, true);
+    this._database.loadMore(node.item, true);
   }
 }
diff --git a/src/assets/angular-material-examples/tree-nested-overview/tree-nested-overview-example.html b/src/assets/angular-material-examples/tree-nested-overview/tree-nested-overview-example.html
index 646b4268..b1d3cd00 100755
--- a/src/assets/angular-material-examples/tree-nested-overview/tree-nested-overview-example.html
+++ b/src/assets/angular-material-examples/tree-nested-overview/tree-nested-overview-example.html
@@ -1,23 +1,25 @@
-<mat-tree [dataSource]="nestedDataSource" [treeControl]="nestedTreeControl" class="example-tree">
+<mat-tree [dataSource]="dataSource" [treeControl]="treeControl" class="example-tree">
+  <!-- This is the tree node template for leaf nodes -->
   <mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle>
     <li class="mat-tree-node">
+      <!-- use a disabled button to provide padding for tree leaf -->
       <button mat-icon-button disabled></button>
-      {{node.filename}}:  {{node.type}}
+      {{node.name}}
     </li>
   </mat-tree-node>
-
-  <mat-nested-tree-node *matTreeNodeDef="let node; when: hasNestedChild">
+  <!-- This is the tree node template for expandable nodes -->
+  <mat-nested-tree-node *matTreeNodeDef="let node; when: hasChild">
     <li>
       <div class="mat-tree-node">
         <button mat-icon-button matTreeNodeToggle
-                [attr.aria-label]="'toggle ' + node.filename">
+                [attr.aria-label]="'toggle ' + node.name">
           <mat-icon class="mat-icon-rtl-mirror">
-            {{nestedTreeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
+            {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
           </mat-icon>
         </button>
-        {{node.filename}}
+        {{node.name}}
       </div>
-      <ul [class.example-tree-invisible]="!nestedTreeControl.isExpanded(node)">
+      <ul [class.example-tree-invisible]="!treeControl.isExpanded(node)">
         <ng-container matTreeNodeOutlet></ng-container>
       </ul>
     </li>
diff --git a/src/assets/angular-material-examples/tree-nested-overview/tree-nested-overview-example.ts b/src/assets/angular-material-examples/tree-nested-overview/tree-nested-overview-example.ts
index 2e93cde5..2e8fb28d 100755
--- a/src/assets/angular-material-examples/tree-nested-overview/tree-nested-overview-example.ts
+++ b/src/assets/angular-material-examples/tree-nested-overview/tree-nested-overview-example.ts
@@ -1,107 +1,43 @@
 import {NestedTreeControl} from '@angular/cdk/tree';
-import {Component, Injectable} from '@angular/core';
+import {Component} from '@angular/core';
 import {MatTreeNestedDataSource} from '@angular/material/tree';
-import {BehaviorSubject} from 'rxjs';
 
 /**
- * Json node data with nested structure. Each node has a filename and a value or a list of children
+ * Food data with nested structure.
+ * Each node has a name and an optiona list of children.
  */
-export class FileNode {
-  children: FileNode[];
-  filename: string;
-  type: any;
+interface FoodNode {
+  name: string;
+  children?: FoodNode[];
 }
 
-/**
- * The Json tree data in string. The data could be parsed into Json object
- */
-const TREE_DATA = JSON.stringify({
-  Applications: {
-    Calendar: 'app',
-    Chrome: 'app',
-    Webstorm: 'app'
+const TREE_DATA: FoodNode[] = [
+  {
+    name: 'Fruit',
+    children: [
+      {name: 'Apple'},
+      {name: 'Banana'},
+      {name: 'Fruit loops'},
+    ]
+  }, {
+    name: 'Vegetables',
+    children: [
+      {
+        name: 'Green',
+        children: [
+          {name: 'Broccoli'},
+          {name: 'Brussel sprouts'},
+        ]
+      }, {
+        name: 'Orange',
+        children: [
+          {name: 'Pumpkins'},
+          {name: 'Carrots'},
+        ]
+      },
+    ]
   },
-  Documents: {
-    angular: {
-      src: {
-        compiler: 'ts',
-        core: 'ts'
-      }
-    },
-    material2: {
-      src: {
-        button: 'ts',
-        checkbox: 'ts',
-        input: 'ts'
-      }
-    }
-  },
-  Downloads: {
-    October: 'pdf',
-    November: 'pdf',
-    Tutorial: 'html'
-  },
-  Pictures: {
-    'Photo Booth Library': {
-      Contents: 'dir',
-      Pictures: 'dir'
-    },
-    Sun: 'png',
-    Woods: 'jpg'
-  }
-});
-
-/**
- * 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 = 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(obj: {[key: string]: any}, level: number): FileNode[] {
-    return Object.keys(obj).reduce<FileNode[]>((accumulator, key) => {
-      const value = obj[key];
-      const node = new FileNode();
-      node.filename = key;
-
-      if (value != null) {
-        if (typeof value === 'object') {
-          node.children = this.buildFileTree(value, level + 1);
-        } else {
-          node.type = value;
-        }
-      }
-
-      return accumulator.concat(node);
-    }, []);
-  }
-}
+];
 
 /**
  * @title Tree with nested nodes
@@ -110,20 +46,14 @@ export class FileDatabase {
   selector: 'tree-nested-overview-example',
   templateUrl: 'tree-nested-overview-example.html',
   styleUrls: ['tree-nested-overview-example.css'],
-  providers: [FileDatabase]
 })
 export class TreeNestedOverviewExample {
-  nestedTreeControl: NestedTreeControl<FileNode>;
-  nestedDataSource: MatTreeNestedDataSource<FileNode>;
+  treeControl = new NestedTreeControl<FoodNode>(node => node.children);
+  dataSource = new MatTreeNestedDataSource<FoodNode>();
 
-  constructor(database: FileDatabase) {
-    this.nestedTreeControl = new NestedTreeControl<FileNode>(this._getChildren);
-    this.nestedDataSource = new MatTreeNestedDataSource();
-
-    database.dataChange.subscribe(data => this.nestedDataSource.data = data);
+  constructor() {
+    this.dataSource.data = TREE_DATA;
   }
 
-  hasNestedChild = (_: number, nodeData: FileNode) => !nodeData.type;
-
-  private _getChildren = (node: FileNode) => node.children;
+  hasChild = (_: number, node: FoodNode) => !!node.children && node.children.length > 0;
 }