From 13746c2a7380f6372cbbdfef45ec6d7ca23b6fae Mon Sep 17 00:00:00 2001
From: Sercan Yemen <sercanyemen@gmail.com>
Date: Wed, 20 Jun 2018 16:16:02 +0300
Subject: [PATCH] Updated Angular Material examples

---
 .../example-components.ts                     | 204 ++++++++++++++++--
 ...mplete-auto-active-first-option-example.ts |   4 +-
 .../autocomplete-display-example.ts           |   4 +-
 .../autocomplete-filter-example.ts            |   4 +-
 .../cdk-table-basic-flex-example.css          |  10 +
 .../cdk-table-basic-flex-example.html         |  28 +++
 .../cdk-table-basic-flex-example.ts           |  55 +++++
 .../cdk-table-basic-example.css               |  40 +---
 .../cdk-table-basic-example.html              |  50 ++---
 .../cdk-table-basic-example.ts                |  79 ++-----
 .../cdk-tree-flat/cdk-tree-flat-example.ts    |  10 +-
 .../cdk-tree-nested-example.ts                |   6 +-
 .../chips-autocomplete-example.html           |   2 +-
 .../chips-autocomplete-example.ts             |  16 +-
 .../datepicker-formats-example.ts             |   5 +-
 .../datepicker-moment-example.ts              |   5 +-
 .../datepicker-views-selection-example.ts     |   6 +-
 .../icon-svg/icon-svg-example.ts              |   2 +-
 .../sidenav-responsive-example.ts             |   4 +-
 .../stepper-editable-example.ts               |   4 +-
 .../stepper-optional-example.ts               |   4 +-
 .../stepper-overview-example.ts               |   4 +-
 .../stepper-vertical-example.css}             |   0
 .../stepper-vertical-example.html             |  36 ++++
 .../stepper-vertical-example.ts               |  27 +++
 .../tab-group-async-example.css               |   1 +
 .../tab-group-async-example.html              |  10 +
 .../tab-group-async-example.ts                |  31 +++
 .../tab-group-basic-example.css               |   1 +
 .../tab-group-basic-example.html              |   5 +
 .../tab-group-basic-example.ts                |  11 +
 .../tab-group-custom-label-example.css        |   3 +
 .../tab-group-custom-label-example.html       |  26 +++
 .../tab-group-custom-label-example.ts         |  11 +
 .../tab-group-dynamic-height-example.css      |  18 ++
 .../tab-group-dynamic-height-example.html     |  12 ++
 .../tab-group-dynamic-height-example.ts       |  11 +
 .../tab-group-dynamic-example.css             |   5 +
 .../tab-group-dynamic-example.html            |  29 +++
 .../tab-group-dynamic-example.ts              |  27 +++
 .../tab-group-header-below-example.css        |   1 +
 .../tab-group-header-below-example.html       |   5 +
 .../tab-group-header-below-example.ts         |  11 +
 .../tab-group-lazy-loaded-example.css         |   1 +
 .../tab-group-lazy-loaded-example.html        |  17 ++
 .../tab-group-lazy-loaded-example.ts          |  21 ++
 .../tab-group-stretched-example.css           |   3 +
 .../tab-group-stretched-example.html          |   5 +
 .../tab-group-stretched-example.ts            |  11 +
 .../tab-group-theme-example.css               |   4 +
 .../tab-group-theme-example.html              |  25 +++
 .../tab-group-theme-example.ts                |  11 +
 .../tab-nav-bar-basic-example.css             |   3 +
 .../tab-nav-bar-basic-example.html            |  12 ++
 .../tab-nav-bar-basic-example.ts              |  19 ++
 .../table-basic-flex-example.css              |   3 +
 .../table-basic-flex-example.html             |  28 +++
 .../table-basic-flex-example.ts               |  34 +++
 .../table-basic/table-basic-example.css       |   8 +-
 .../table-basic/table-basic-example.html      |   5 +-
 .../table-basic/table-basic-example.ts        |  16 +-
 .../table-dynamic-columns-example.css         |   7 +
 .../table-dynamic-columns-example.html        |  13 ++
 .../table-dynamic-columns-example.ts          |  59 +++++
 .../table-expandable-rows-example.css         |  47 ++++
 .../table-expandable-rows-example.html        |  35 +++
 .../table-expandable-rows-example.ts          | 113 ++++++++++
 .../table-filtering-example.css               |  13 +-
 .../table-filtering-example.html              |   6 +-
 .../table-filtering-example.ts                |  14 +-
 .../table-footer-row-example.css              |  12 +-
 .../table-footer-row-example.html             |  25 +--
 .../table-http/table-http-example.css         |  17 +-
 .../table-http/table-http-example.html        |  16 +-
 .../table-http/table-http-example.ts          |  12 +-
 .../table-multiple-header-footer-example.css  |  19 ++
 .../table-multiple-header-footer-example.html |  45 ++++
 .../table-multiple-header-footer-example.ts   |  32 +++
 .../table-native-only-example.css             |   0
 .../table-native-only-example.html            |  18 --
 .../table-native-only-example.ts              |  19 --
 .../table-overview/table-overview-example.css |  16 +-
 .../table-overview-example.html               |   5 +-
 .../table-overview/table-overview-example.ts  |   7 +-
 .../table-pagination-example.css              |   9 +-
 .../table-pagination-example.html             |  10 +-
 .../table-pagination-example.ts               |  10 +-
 .../table-row-context-example.css             |   3 +
 .../table-row-context-example.html            |  46 ++++
 .../table-row-context-example.ts              |  14 ++
 .../table-selection-example.css               |  12 +-
 .../table-selection-example.html              |   4 +-
 .../table-selection-example.ts                |  18 +-
 .../table-sorting/table-sorting-example.css   |  10 +-
 .../table-sorting/table-sorting-example.html  |   4 +-
 .../table-sorting/table-sorting-example.ts    |  20 +-
 .../table-sticky-columns-example.css          |  26 +++
 .../table-sticky-columns-example.html         |  39 ++++
 .../table-sticky-columns-example.ts           |  35 +++
 .../table-sticky-complex-flex-example.css     |  28 +++
 .../table-sticky-complex-flex-example.html    |  78 +++++++
 .../table-sticky-complex-flex-example.ts      |  53 +++++
 .../table-sticky-complex-example.css          |  24 +++
 .../table-sticky-complex-example.html         |  78 +++++++
 .../table-sticky-complex-example.ts           |  53 +++++
 .../table-sticky-footer-example.css           |  16 ++
 .../table-sticky-footer-example.html          |  21 ++
 .../table-sticky-footer-example.ts            |  31 +++
 .../table-sticky-header-example.css           |   8 +
 .../table-sticky-header-example.html          |  31 +++
 .../table-sticky-header-example.ts            |  34 +++
 .../tabs-overview/tabs-overview-example.html  |   4 -
 .../tabs-overview/tabs-overview-example.ts    |  11 -
 .../tabs-template-label-example.css           |   7 -
 .../tabs-template-label-example.html          | 119 ----------
 .../tabs-template-label-example.ts            |  11 -
 .../tooltip-auto-hide-example.css             |  11 +
 .../tooltip-auto-hide-example.html            |  18 ++
 .../tooltip-auto-hide-example.ts              |  16 ++
 .../tooltip-custom-class-example.css          |   7 +
 .../tooltip-custom-class-example.html         |   7 +
 .../tooltip-custom-class-example.ts           |  14 ++
 .../tooltip-delay/tooltip-delay-example.css   |   5 +-
 .../tooltip-delay/tooltip-delay-example.html  |  24 ++-
 .../tooltip-delay/tooltip-delay-example.ts    |   6 +-
 .../tooltip-disabled-example.css              |   3 +
 .../tooltip-disabled-example.html             |  10 +
 .../tooltip-disabled-example.ts               |  14 ++
 .../tooltip-manual/tooltip-manual-example.css |   4 +-
 .../tooltip-manual-example.html               |  31 ++-
 .../tooltip-message-example.css               |   3 +
 .../tooltip-message-example.html              |   9 +
 .../tooltip-message-example.ts                |  14 ++
 .../tooltip-modified-defaults-example.html    |   4 +-
 .../tooltip-overview-example.html             |   6 +-
 .../tooltip-position-example.css              |  10 +-
 .../tooltip-position-example.html             |  23 +-
 .../tooltip-position-example.ts               |   7 +-
 138 files changed, 2124 insertions(+), 592 deletions(-)
 create mode 100755 src/assets/angular-material-examples/cdk-table-basic-flex/cdk-table-basic-flex-example.css
 create mode 100755 src/assets/angular-material-examples/cdk-table-basic-flex/cdk-table-basic-flex-example.html
 create mode 100755 src/assets/angular-material-examples/cdk-table-basic-flex/cdk-table-basic-flex-example.ts
 rename src/assets/angular-material-examples/{tabs-overview/tabs-overview-example.css => stepper-vertical/stepper-vertical-example.css} (100%)
 create mode 100755 src/assets/angular-material-examples/stepper-vertical/stepper-vertical-example.html
 create mode 100755 src/assets/angular-material-examples/stepper-vertical/stepper-vertical-example.ts
 create mode 100755 src/assets/angular-material-examples/tab-group-async/tab-group-async-example.css
 create mode 100755 src/assets/angular-material-examples/tab-group-async/tab-group-async-example.html
 create mode 100755 src/assets/angular-material-examples/tab-group-async/tab-group-async-example.ts
 create mode 100755 src/assets/angular-material-examples/tab-group-basic/tab-group-basic-example.css
 create mode 100755 src/assets/angular-material-examples/tab-group-basic/tab-group-basic-example.html
 create mode 100755 src/assets/angular-material-examples/tab-group-basic/tab-group-basic-example.ts
 create mode 100755 src/assets/angular-material-examples/tab-group-custom-label/tab-group-custom-label-example.css
 create mode 100755 src/assets/angular-material-examples/tab-group-custom-label/tab-group-custom-label-example.html
 create mode 100755 src/assets/angular-material-examples/tab-group-custom-label/tab-group-custom-label-example.ts
 create mode 100755 src/assets/angular-material-examples/tab-group-dynamic-height/tab-group-dynamic-height-example.css
 create mode 100755 src/assets/angular-material-examples/tab-group-dynamic-height/tab-group-dynamic-height-example.html
 create mode 100755 src/assets/angular-material-examples/tab-group-dynamic-height/tab-group-dynamic-height-example.ts
 create mode 100755 src/assets/angular-material-examples/tab-group-dynamic/tab-group-dynamic-example.css
 create mode 100755 src/assets/angular-material-examples/tab-group-dynamic/tab-group-dynamic-example.html
 create mode 100755 src/assets/angular-material-examples/tab-group-dynamic/tab-group-dynamic-example.ts
 create mode 100755 src/assets/angular-material-examples/tab-group-header-below/tab-group-header-below-example.css
 create mode 100755 src/assets/angular-material-examples/tab-group-header-below/tab-group-header-below-example.html
 create mode 100755 src/assets/angular-material-examples/tab-group-header-below/tab-group-header-below-example.ts
 create mode 100755 src/assets/angular-material-examples/tab-group-lazy-loaded/tab-group-lazy-loaded-example.css
 create mode 100755 src/assets/angular-material-examples/tab-group-lazy-loaded/tab-group-lazy-loaded-example.html
 create mode 100755 src/assets/angular-material-examples/tab-group-lazy-loaded/tab-group-lazy-loaded-example.ts
 create mode 100755 src/assets/angular-material-examples/tab-group-stretched/tab-group-stretched-example.css
 create mode 100755 src/assets/angular-material-examples/tab-group-stretched/tab-group-stretched-example.html
 create mode 100755 src/assets/angular-material-examples/tab-group-stretched/tab-group-stretched-example.ts
 create mode 100755 src/assets/angular-material-examples/tab-group-theme/tab-group-theme-example.css
 create mode 100755 src/assets/angular-material-examples/tab-group-theme/tab-group-theme-example.html
 create mode 100755 src/assets/angular-material-examples/tab-group-theme/tab-group-theme-example.ts
 create mode 100755 src/assets/angular-material-examples/tab-nav-bar-basic/tab-nav-bar-basic-example.css
 create mode 100755 src/assets/angular-material-examples/tab-nav-bar-basic/tab-nav-bar-basic-example.html
 create mode 100755 src/assets/angular-material-examples/tab-nav-bar-basic/tab-nav-bar-basic-example.ts
 create mode 100755 src/assets/angular-material-examples/table-basic-flex/table-basic-flex-example.css
 create mode 100755 src/assets/angular-material-examples/table-basic-flex/table-basic-flex-example.html
 create mode 100755 src/assets/angular-material-examples/table-basic-flex/table-basic-flex-example.ts
 create mode 100755 src/assets/angular-material-examples/table-dynamic-columns/table-dynamic-columns-example.css
 create mode 100755 src/assets/angular-material-examples/table-dynamic-columns/table-dynamic-columns-example.html
 create mode 100755 src/assets/angular-material-examples/table-dynamic-columns/table-dynamic-columns-example.ts
 create mode 100755 src/assets/angular-material-examples/table-expandable-rows/table-expandable-rows-example.css
 create mode 100755 src/assets/angular-material-examples/table-expandable-rows/table-expandable-rows-example.html
 create mode 100755 src/assets/angular-material-examples/table-expandable-rows/table-expandable-rows-example.ts
 create mode 100755 src/assets/angular-material-examples/table-multiple-header-footer/table-multiple-header-footer-example.css
 create mode 100755 src/assets/angular-material-examples/table-multiple-header-footer/table-multiple-header-footer-example.html
 create mode 100755 src/assets/angular-material-examples/table-multiple-header-footer/table-multiple-header-footer-example.ts
 delete mode 100755 src/assets/angular-material-examples/table-native-only/table-native-only-example.css
 delete mode 100755 src/assets/angular-material-examples/table-native-only/table-native-only-example.html
 delete mode 100755 src/assets/angular-material-examples/table-native-only/table-native-only-example.ts
 create mode 100755 src/assets/angular-material-examples/table-row-context/table-row-context-example.css
 create mode 100755 src/assets/angular-material-examples/table-row-context/table-row-context-example.html
 create mode 100755 src/assets/angular-material-examples/table-row-context/table-row-context-example.ts
 create mode 100755 src/assets/angular-material-examples/table-sticky-columns/table-sticky-columns-example.css
 create mode 100755 src/assets/angular-material-examples/table-sticky-columns/table-sticky-columns-example.html
 create mode 100755 src/assets/angular-material-examples/table-sticky-columns/table-sticky-columns-example.ts
 create mode 100755 src/assets/angular-material-examples/table-sticky-complex-flex/table-sticky-complex-flex-example.css
 create mode 100755 src/assets/angular-material-examples/table-sticky-complex-flex/table-sticky-complex-flex-example.html
 create mode 100755 src/assets/angular-material-examples/table-sticky-complex-flex/table-sticky-complex-flex-example.ts
 create mode 100755 src/assets/angular-material-examples/table-sticky-complex/table-sticky-complex-example.css
 create mode 100755 src/assets/angular-material-examples/table-sticky-complex/table-sticky-complex-example.html
 create mode 100755 src/assets/angular-material-examples/table-sticky-complex/table-sticky-complex-example.ts
 create mode 100755 src/assets/angular-material-examples/table-sticky-footer/table-sticky-footer-example.css
 create mode 100755 src/assets/angular-material-examples/table-sticky-footer/table-sticky-footer-example.html
 create mode 100755 src/assets/angular-material-examples/table-sticky-footer/table-sticky-footer-example.ts
 create mode 100755 src/assets/angular-material-examples/table-sticky-header/table-sticky-header-example.css
 create mode 100755 src/assets/angular-material-examples/table-sticky-header/table-sticky-header-example.html
 create mode 100755 src/assets/angular-material-examples/table-sticky-header/table-sticky-header-example.ts
 delete mode 100755 src/assets/angular-material-examples/tabs-overview/tabs-overview-example.html
 delete mode 100755 src/assets/angular-material-examples/tabs-overview/tabs-overview-example.ts
 delete mode 100755 src/assets/angular-material-examples/tabs-template-label/tabs-template-label-example.css
 delete mode 100755 src/assets/angular-material-examples/tabs-template-label/tabs-template-label-example.html
 delete mode 100755 src/assets/angular-material-examples/tabs-template-label/tabs-template-label-example.ts
 create mode 100755 src/assets/angular-material-examples/tooltip-auto-hide/tooltip-auto-hide-example.css
 create mode 100755 src/assets/angular-material-examples/tooltip-auto-hide/tooltip-auto-hide-example.html
 create mode 100755 src/assets/angular-material-examples/tooltip-auto-hide/tooltip-auto-hide-example.ts
 create mode 100755 src/assets/angular-material-examples/tooltip-custom-class/tooltip-custom-class-example.css
 create mode 100755 src/assets/angular-material-examples/tooltip-custom-class/tooltip-custom-class-example.html
 create mode 100755 src/assets/angular-material-examples/tooltip-custom-class/tooltip-custom-class-example.ts
 create mode 100755 src/assets/angular-material-examples/tooltip-disabled/tooltip-disabled-example.css
 create mode 100755 src/assets/angular-material-examples/tooltip-disabled/tooltip-disabled-example.html
 create mode 100755 src/assets/angular-material-examples/tooltip-disabled/tooltip-disabled-example.ts
 create mode 100755 src/assets/angular-material-examples/tooltip-message/tooltip-message-example.css
 create mode 100755 src/assets/angular-material-examples/tooltip-message/tooltip-message-example.html
 create mode 100755 src/assets/angular-material-examples/tooltip-message/tooltip-message-example.ts

diff --git a/src/app/main/angular-material-elements/example-components.ts b/src/app/main/angular-material-elements/example-components.ts
index 9bed821b..a8fdb614 100644
--- a/src/app/main/angular-material-elements/example-components.ts
+++ b/src/app/main/angular-material-elements/example-components.ts
@@ -95,8 +95,6 @@ import { TableHttpExample } from 'assets/angular-material-examples/table-http/ta
 import { TableOverviewExample } from 'assets/angular-material-examples/table-overview/table-overview-example';
 import { TablePaginationExample } from 'assets/angular-material-examples/table-pagination/table-pagination-example';
 import { TableSortingExample } from 'assets/angular-material-examples/table-sorting/table-sorting-example';
-import { TabsOverviewExample } from 'assets/angular-material-examples/tabs-overview/tabs-overview-example';
-import { TabsTemplateLabelExample } from 'assets/angular-material-examples/tabs-template-label/tabs-template-label-example';
 import { ToolbarMultirowExample } from 'assets/angular-material-examples/toolbar-multirow/toolbar-multirow-example';
 import { ToolbarOverviewExample } from 'assets/angular-material-examples/toolbar-overview/toolbar-overview-example';
 import { TooltipOverviewExample } from 'assets/angular-material-examples/tooltip-overview/tooltip-overview-example';
@@ -137,7 +135,6 @@ import { SliderFormattingExample } from 'assets/angular-material-examples/slider
 import { StepperEditableExample } from 'assets/angular-material-examples/stepper-editable/stepper-editable-example';
 import { StepperOptionalExample } from 'assets/angular-material-examples/stepper-optional/stepper-optional-example';
 import { TableFooterRowExample } from 'assets/angular-material-examples/table-footer-row/table-footer-row-example';
-import { TableNativeOnlyExample } from 'assets/angular-material-examples/table-native-only/table-native-only-example';
 import { TextFieldAutofillDirectiveExample } from 'assets/angular-material-examples/text-field-autofill-directive/text-field-autofill-directive-example';
 import { TextFieldAutofillMonitorExample } from 'assets/angular-material-examples/text-field-autofill-monitor/text-field-autofill-monitor-example';
 import { TextFieldAutosizeTextareaExample } from 'assets/angular-material-examples/text-field-autosize-textarea/text-field-autosize-textarea-example';
@@ -146,6 +143,32 @@ import { TreeDynamicExample } from 'assets/angular-material-examples/tree-dynami
 import { TreeFlatOverviewExample } from 'assets/angular-material-examples/tree-flat-overview/tree-flat-overview-example';
 import { TreeLoadmoreExample } from 'assets/angular-material-examples/tree-loadmore/tree-loadmore-example';
 import { TreeNestedOverviewExample } from 'assets/angular-material-examples/tree-nested-overview/tree-nested-overview-example';
+import { CdkTableBasicFlexExample } from 'assets/angular-material-examples/cdk-table-basic-flex/cdk-table-basic-flex-example';
+import { StepperVerticalExample } from 'assets/angular-material-examples/stepper-vertical/stepper-vertical-example';
+import { TabGroupBasicExample } from 'assets/angular-material-examples/tab-group-basic/tab-group-basic-example';
+import { TabGroupAsyncExample } from 'assets/angular-material-examples/tab-group-async/tab-group-async-example';
+import { TabGroupCustomLabelExample } from 'assets/angular-material-examples/tab-group-custom-label/tab-group-custom-label-example';
+import { TabGroupDynamicExample } from 'assets/angular-material-examples/tab-group-dynamic/tab-group-dynamic-example';
+import { TabGroupDynamicHeightExample } from 'assets/angular-material-examples/tab-group-dynamic-height/tab-group-dynamic-height-example';
+import { TabGroupHeaderBelowExample } from 'assets/angular-material-examples/tab-group-header-below/tab-group-header-below-example';
+import { TabGroupLazyLoadedExample } from 'assets/angular-material-examples/tab-group-lazy-loaded/tab-group-lazy-loaded-example';
+import { TabGroupStretchedExample } from 'assets/angular-material-examples/tab-group-stretched/tab-group-stretched-example';
+import { TabGroupThemeExample } from 'assets/angular-material-examples/tab-group-theme/tab-group-theme-example';
+import { TabNavBarBasicExample } from 'assets/angular-material-examples/tab-nav-bar-basic/tab-nav-bar-basic-example';
+import { TooltipAutoHideExample } from 'assets/angular-material-examples/tooltip-auto-hide/tooltip-auto-hide-example';
+import { TooltipCustomClassExample } from 'assets/angular-material-examples/tooltip-custom-class/tooltip-custom-class-example';
+import { TooltipDisabledExample } from 'assets/angular-material-examples/tooltip-disabled/tooltip-disabled-example';
+import { TooltipMessageExample } from 'assets/angular-material-examples/tooltip-message/tooltip-message-example';
+import { TableBasicFlexExample } from 'assets/angular-material-examples/table-basic-flex/table-basic-flex-example';
+import { TableDynamicColumnsExample } from 'assets/angular-material-examples/table-dynamic-columns/table-dynamic-columns-example';
+import { TableExpandableRowsExample } from 'assets/angular-material-examples/table-expandable-rows/table-expandable-rows-example';
+import { TableMultipleHeaderFooterExample } from 'assets/angular-material-examples/table-multiple-header-footer/table-multiple-header-footer-example';
+import { TableRowContextExample } from 'assets/angular-material-examples/table-row-context/table-row-context-example';
+import { TableStickyColumnsExample } from 'assets/angular-material-examples/table-sticky-columns/table-sticky-columns-example';
+import { TableStickyComplexExample } from 'assets/angular-material-examples/table-sticky-complex/table-sticky-complex-example';
+import { TableStickyComplexFlexExample } from 'assets/angular-material-examples/table-sticky-complex-flex/table-sticky-complex-flex-example';
+import { TableStickyFooterExample } from 'assets/angular-material-examples/table-sticky-footer/table-sticky-footer-example';
+import { TableStickyHeaderExample } from 'assets/angular-material-examples/table-sticky-header/table-sticky-header-example';
 
 export const COMPONENT_MAP = {
     'autocomplete'    : [
@@ -176,6 +199,7 @@ export const COMPONENT_MAP = {
     ],
     // 'cdk-table'       : [
     //     'cdk-table-basic',
+    //     'cdk-table-basic-flex',
     //     'cdk-table-flat'
     // ],
     // 'cdk-tree'        : [
@@ -333,22 +357,40 @@ export const COMPONENT_MAP = {
     'stepper'         : [
         'stepper-overview',
         'stepper-editable',
-        'stepper-optional'
+        'stepper-optional',
+        'stepper-vertical'
     ],
     'table'           : [
         'table-overview',
         'table-basic',
+        'table-basic-flex',
+        'table-dynamic-columns',
+        'table-expandable-rows',
         'table-filtering',
         'table-footer-row',
         'table-http',
-        'table-native-only',
+        'table-multiple-header-footer',
         'table-pagination',
+        'table-row-context',
         'table-selection',
-        'table-sorting'
+        'table-sorting',
+        'table-sticky-columns',
+        'table-sticky-complex',
+        'table-sticky-complex-flex',
+        'table-sticky-header',
+        'table-sticky-footer',
     ],
     'tabs'            : [
-        'tabs-overview',
-        'tabs-template-label'
+        'tab-group-basic',
+        'tab-group-async',
+        'tab-group-custom-label',
+        'tab-group-dynamic',
+        'tab-group-dynamic-height',
+        'tab-group-header-below',
+        'tab-group-lazy-loaded',
+        'tab-group-stretched',
+        'tab-group-theme',
+        'tab-nav-bar-basic'
     ],
     'text-field'      : [
         'text-field-autofill-directive',
@@ -361,8 +403,12 @@ export const COMPONENT_MAP = {
     ],
     'tooltip'         : [
         'tooltip-overview',
+        'tooltip-auto-hide',
+        'tooltip-custom-class',
         'tooltip-delay',
+        'tooltip-disabled',
         'tooltip-manual',
+        'tooltip-message',
         'tooltip-modified-defaults',
         'tooltip-position'
     ],
@@ -438,6 +484,10 @@ export const EXAMPLE_COMPONENTS = {
         title    : 'Basic CDK data-table',
         component: CdkTableBasicExample
     },
+    'cdk-table-basic-flex'                 : {
+        title    : 'Basic use of `<cdk-table>` (uses display flex)',
+        component: CdkTableBasicFlexExample
+    },
     'cdk-tree-flat'                        : {
         title    : 'Tree with flat nodes',
         component: CdkTreeFlatExample
@@ -879,10 +929,26 @@ export const EXAMPLE_COMPONENTS = {
         title    : 'Stepper overview',
         component: StepperOverviewExample
     },
+    'stepper-vertical'                     : {
+        title    : 'Stepper vertical',
+        component: StepperVerticalExample
+    },
     'table-basic'                          : {
         title    : 'Basic table',
         component: TableBasicExample
     },
+    'table-basic-flex'                          : {
+        title    : 'Basic use of `<mat-table>` (uses display flex)',
+        component: TableBasicFlexExample
+    },
+    'table-dynamic-columns'                          : {
+        title    : 'Table dynamically changing the columns displayed',
+        component: TableDynamicColumnsExample
+    },
+    'table-expandable-rows'                          : {
+        title    : 'Table with expandable rows',
+        component: TableExpandableRowsExample
+    },
     'table-filtering'                      : {
         title    : 'Table with filtering',
         component: TableFilteringExample
@@ -895,9 +961,9 @@ export const EXAMPLE_COMPONENTS = {
         title    : 'Table retrieving data through HTTP',
         component: TableHttpExample
     },
-    'table-native-only'                    : {
-        title    : 'Native `<table>` that only applies the Material styles',
-        component: TableNativeOnlyExample
+    'table-multiple-header-footer'                           : {
+        title    : 'Table with multiple header and footer rows',
+        component: TableMultipleHeaderFooterExample
     },
     'table-overview'                       : {
         title    : 'Data table with sorting, pagination, and filtering.',
@@ -907,6 +973,10 @@ export const EXAMPLE_COMPONENTS = {
         title    : 'Table with pagination',
         component: TablePaginationExample
     },
+    'table-row-context'                     : {
+        title    : 'Table showing each row context properties',
+        component: TableRowContextExample
+    },
     'table-selection'                      : {
         title    : 'Table with selection',
         component: TableSelectionExample
@@ -915,13 +985,65 @@ export const EXAMPLE_COMPONENTS = {
         title    : 'Table with sorting',
         component: TableSortingExample
     },
-    'tabs-overview'                        : {
-        title    : 'Basic tabs',
-        component: TabsOverviewExample
+    'table-sticky-columns'                        : {
+        title    : 'Table with a sticky columns',
+        component: TableStickyColumnsExample
     },
-    'tabs-template-label'                  : {
-        title    : 'Complex Example',
-        component: TabsTemplateLabelExample
+    'table-sticky-complex'                        : {
+        title    : 'Tables with toggle-able sticky headers, footers, and columns',
+        component: TableStickyComplexExample
+    },
+    'table-sticky-complex-flex'                        : {
+        title    : 'Flex-layout tables with toggle-able sticky headers, footers, and columns',
+        component: TableStickyComplexFlexExample
+    },
+    'table-sticky-footer'                        : {
+        title    : 'Table with a sticky footer',
+        component: TableStickyFooterExample
+    },
+    'table-sticky-header'                        : {
+        title    : 'Table with sticky header',
+        component: TableStickyHeaderExample
+    },
+    'tab-group-basic'                      : {
+        title    : 'Basic use of the tab group',
+        component: TabGroupBasicExample
+    },
+    'tab-group-async'                      : {
+        title    : 'Tab group with asynchronously loading tab contents',
+        component: TabGroupAsyncExample
+    },
+    'tab-group-custom-label'               : {
+        title    : 'Using tabs with a custom label template',
+        component: TabGroupCustomLabelExample
+    },
+    'tab-group-dynamic'                    : {
+        title    : 'Tab group with dynamically changing tabs',
+        component: TabGroupDynamicExample
+    },
+    'tab-group-dynamic-height'             : {
+        title    : 'Tab group with dynamic height based on tab contents',
+        component: TabGroupDynamicHeightExample
+    },
+    'tab-group-header-below'               : {
+        title    : 'Tab group with the headers on the bottom',
+        component: TabGroupHeaderBelowExample
+    },
+    'tab-group-lazy-loaded'                : {
+        title    : 'Tab group where the tab content is loaded lazily (when activated)',
+        component: TabGroupLazyLoadedExample
+    },
+    'tab-group-stretched'                  : {
+        title    : 'Tab group with stretched labels',
+        component: TabGroupStretchedExample
+    },
+    'tab-group-theme'                      : {
+        title    : 'Customizing the theme options on the tab group',
+        component: TabGroupThemeExample
+    },
+    'tab-nav-bar-basic'                    : {
+        title    : 'Basic use of the tab nav bar',
+        component: TabNavBarBasicExample
     },
     'text-field-autofill-directive'        : {
         title    : 'Monitoring autofill state with cdkAutofill',
@@ -943,14 +1065,30 @@ export const EXAMPLE_COMPONENTS = {
         title    : 'Basic toolbar',
         component: ToolbarOverviewExample
     },
+    'tooltip-auto-hide'                        : {
+        title    : 'Tooltip that demonstrates auto-hiding when it clips out of its scrolling container',
+        component: TooltipAutoHideExample
+    },
+    'tooltip-custom-class'                        : {
+        title    : 'Tooltip that can have a custom class applied',
+        component: TooltipCustomClassExample
+    },
     'tooltip-delay'                        : {
         title    : 'Tooltip with a show and hide delay',
         component: TooltipDelayExample
     },
+    'tooltip-disabled'                        : {
+        title    : 'Tooltip that can be disabled',
+        component: TooltipDisabledExample
+    },
     'tooltip-manual'                       : {
-        title    : 'Tooltip that can be manually shown/hidden.',
+        title    : 'Tooltip that can be manually shown/hidden',
         component: TooltipManualExample
     },
+    'tooltip-message'                       : {
+        title    : 'Tooltip with a changing message',
+        component: TooltipMessageExample
+    },
     'tooltip-modified-defaults'            : {
         title    : 'Tooltip with a show and hide delay',
         component: TooltipModifiedDefaultsExample
@@ -1001,6 +1139,7 @@ export const EXAMPLE_LIST = [
     CardFancyExample,
     CardOverviewExample,
     CdkTableBasicExample,
+    CdkTableBasicFlexExample,
     CdkTreeFlatExample,
     CdkTreeNestedExample,
     CheckboxConfigurableExample,
@@ -1108,24 +1247,47 @@ export const EXAMPLE_LIST = [
     StepperEditableExample,
     StepperOptionalExample,
     StepperOverviewExample,
+    StepperVerticalExample,
     TableBasicExample,
+    TableBasicFlexExample,
+    TableDynamicColumnsExample,
+    TableExpandableRowsExample,
     TableFilteringExample,
     TableFooterRowExample,
     TableHttpExample,
-    TableNativeOnlyExample,
+    TableMultipleHeaderFooterExample,
     TableOverviewExample,
     TablePaginationExample,
+    TableRowContextExample,
     TableSelectionExample,
     TableSortingExample,
-    TabsOverviewExample,
-    TabsTemplateLabelExample,
+    TableStickyColumnsExample,
+    TableStickyComplexExample,
+    TableStickyComplexFlexExample,
+    TableStickyFooterExample,
+    TableStickyHeaderExample,
+    TabGroupBasicExample,
+    TabGroupAsyncExample,
+    TabGroupCustomLabelExample,
+    TabGroupDynamicExample,
+    TabGroupDynamicHeightExample,
+    TabGroupHeaderBelowExample,
+    TabGroupLazyLoadedExample,
+    TabGroupStretchedExample,
+    TabGroupStretchedExample,
+    TabGroupThemeExample,
+    TabNavBarBasicExample,
     TextFieldAutofillDirectiveExample,
     TextFieldAutofillMonitorExample,
     TextFieldAutosizeTextareaExample,
     ToolbarMultirowExample,
     ToolbarOverviewExample,
+    TooltipAutoHideExample,
+    TooltipCustomClassExample,
     TooltipDelayExample,
+    TooltipDisabledExample,
     TooltipManualExample,
+    TooltipMessageExample,
     TooltipModifiedDefaultsExample,
     TooltipOverviewExample,
     TooltipPositionExample,
diff --git a/src/assets/angular-material-examples/autocomplete-auto-active-first-option/autocomplete-auto-active-first-option-example.ts b/src/assets/angular-material-examples/autocomplete-auto-active-first-option/autocomplete-auto-active-first-option-example.ts
index 6a933ec9..3a5adb69 100755
--- a/src/assets/angular-material-examples/autocomplete-auto-active-first-option/autocomplete-auto-active-first-option-example.ts
+++ b/src/assets/angular-material-examples/autocomplete-auto-active-first-option/autocomplete-auto-active-first-option-example.ts
@@ -1,4 +1,4 @@
-import {Component} from '@angular/core';
+import {Component, OnInit} from '@angular/core';
 import {FormControl} from '@angular/forms';
 import {Observable} from 'rxjs';
 import {map, startWith} from 'rxjs/operators';
@@ -11,7 +11,7 @@ import {map, startWith} from 'rxjs/operators';
   templateUrl: 'autocomplete-auto-active-first-option-example.html',
   styleUrls: ['autocomplete-auto-active-first-option-example.css']
 })
-export class AutocompleteAutoActiveFirstOptionExample {
+export class AutocompleteAutoActiveFirstOptionExample implements OnInit {
   myControl: FormControl = new FormControl();
   options = ['One', 'Two', 'Three'];
   filteredOptions: Observable<string[]>;
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 917e8459..eb530ade 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
@@ -1,4 +1,4 @@
-import {Component} from '@angular/core';
+import {Component, OnInit} from '@angular/core';
 import {FormControl} from '@angular/forms';
 import {Observable} from 'rxjs';
 import {map, startWith} from 'rxjs/operators';
@@ -15,7 +15,7 @@ export class User {
   templateUrl: 'autocomplete-display-example.html',
   styleUrls: ['autocomplete-display-example.css']
 })
-export class AutocompleteDisplayExample {
+export class AutocompleteDisplayExample implements OnInit {
 
   myControl = new FormControl();
 
diff --git a/src/assets/angular-material-examples/autocomplete-filter/autocomplete-filter-example.ts b/src/assets/angular-material-examples/autocomplete-filter/autocomplete-filter-example.ts
index a324849a..44f70a68 100755
--- a/src/assets/angular-material-examples/autocomplete-filter/autocomplete-filter-example.ts
+++ b/src/assets/angular-material-examples/autocomplete-filter/autocomplete-filter-example.ts
@@ -1,4 +1,4 @@
-import {Component} from '@angular/core';
+import {Component, OnInit} from '@angular/core';
 import {FormControl} from '@angular/forms';
 import {Observable} from 'rxjs';
 import {map, startWith} from 'rxjs/operators';
@@ -11,7 +11,7 @@ import {map, startWith} from 'rxjs/operators';
   templateUrl: 'autocomplete-filter-example.html',
   styleUrls: ['autocomplete-filter-example.css']
 })
-export class AutocompleteFilterExample {
+export class AutocompleteFilterExample implements OnInit {
 
   myControl: FormControl = new FormControl();
 
diff --git a/src/assets/angular-material-examples/cdk-table-basic-flex/cdk-table-basic-flex-example.css b/src/assets/angular-material-examples/cdk-table-basic-flex/cdk-table-basic-flex-example.css
new file mode 100755
index 00000000..f0d18e4f
--- /dev/null
+++ b/src/assets/angular-material-examples/cdk-table-basic-flex/cdk-table-basic-flex-example.css
@@ -0,0 +1,10 @@
+/**
+ * Add basic flex styling so that the cells evenly space themselves in the row.
+ */
+cdk-row, cdk-header-row, cdk-footer-row {
+  display: flex;
+}
+
+cdk-cell, cdk-header-cell, cdk-footer-cell {
+  flex: 1;
+}
diff --git a/src/assets/angular-material-examples/cdk-table-basic-flex/cdk-table-basic-flex-example.html b/src/assets/angular-material-examples/cdk-table-basic-flex/cdk-table-basic-flex-example.html
new file mode 100755
index 00000000..4f8f17a9
--- /dev/null
+++ b/src/assets/angular-material-examples/cdk-table-basic-flex/cdk-table-basic-flex-example.html
@@ -0,0 +1,28 @@
+<cdk-table [dataSource]="dataSource">
+  <!-- Position Column -->
+  <ng-container cdkColumnDef="position">
+    <cdk-header-cell *cdkHeaderCellDef> No. </cdk-header-cell>
+    <cdk-cell *cdkCellDef="let element"> {{element.position}} </cdk-cell>
+  </ng-container>
+
+  <!-- Name Column -->
+  <ng-container cdkColumnDef="name">
+    <cdk-header-cell *cdkHeaderCellDef> Name </cdk-header-cell>
+    <cdk-cell *cdkCellDef="let element"> {{element.name}} </cdk-cell>
+  </ng-container>
+
+  <!-- Weight Column -->
+  <ng-container cdkColumnDef="weight">
+    <cdk-header-cell *cdkHeaderCellDef> Weight </cdk-header-cell>
+    <cdk-cell *cdkCellDef="let element"> {{element.weight}} </cdk-cell>
+  </ng-container>
+
+  <!-- Symbol Column -->
+  <ng-container cdkColumnDef="symbol">
+    <cdk-header-cell *cdkHeaderCellDef> Symbol </cdk-header-cell>
+    <cdk-cell *cdkCellDef="let element"> {{element.symbol}} </cdk-cell>
+  </ng-container>
+
+  <cdk-header-row *cdkHeaderRowDef="displayedColumns"></cdk-header-row>
+  <cdk-row *cdkRowDef="let row; columns: displayedColumns;"></cdk-row>
+</cdk-table>
diff --git a/src/assets/angular-material-examples/cdk-table-basic-flex/cdk-table-basic-flex-example.ts b/src/assets/angular-material-examples/cdk-table-basic-flex/cdk-table-basic-flex-example.ts
new file mode 100755
index 00000000..b117d4de
--- /dev/null
+++ b/src/assets/angular-material-examples/cdk-table-basic-flex/cdk-table-basic-flex-example.ts
@@ -0,0 +1,55 @@
+import {DataSource} from '@angular/cdk/collections';
+import {Component} from '@angular/core';
+import {BehaviorSubject, Observable} from 'rxjs';
+
+/**
+ * @title Basic use of `<cdk-table>` (uses display flex)
+ */
+@Component({
+  selector: 'cdk-table-basic-flex-example',
+  styleUrls: ['cdk-table-basic-flex-example.css'],
+  templateUrl: 'cdk-table-basic-flex-example.html',
+})
+export class CdkTableBasicFlexExample {
+  displayedColumns = ['position', 'name', 'weight', 'symbol'];
+  dataSource = new ExampleDataSource();
+}
+
+export interface PeriodicElement {
+  name: string;
+  position: number;
+  weight: number;
+  symbol: string;
+}
+
+const ELEMENT_DATA: PeriodicElement[] = [
+  {position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
+  {position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
+  {position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
+  {position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'},
+  {position: 5, name: 'Boron', weight: 10.811, symbol: 'B'},
+  {position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C'},
+  {position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N'},
+  {position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O'},
+  {position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'},
+  {position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'},
+];
+
+/**
+ * Data source to provide what data should be rendered in the table. Note that the data source
+ * can retrieve its data in any way. In this case, the data source is provided a reference
+ * to a common data base, ExampleDatabase. It is not the data source's responsibility to manage
+ * the underlying data. Instead, it only needs to take the data and send the table exactly what
+ * should be rendered.
+ */
+export class ExampleDataSource extends DataSource<PeriodicElement> {
+  /** Stream of data that is provided to the table. */
+  data: BehaviorSubject<PeriodicElement[]> = new BehaviorSubject<PeriodicElement[]>(ELEMENT_DATA);
+
+  /** Connect function called by the table to retrieve one stream containing the data to render. */
+  connect(): Observable<PeriodicElement[]> {
+    return this.data;
+  }
+
+  disconnect() {}
+}
diff --git a/src/assets/angular-material-examples/cdk-table-basic/cdk-table-basic-example.css b/src/assets/angular-material-examples/cdk-table-basic/cdk-table-basic-example.css
index 527bb2a3..edaff91e 100755
--- a/src/assets/angular-material-examples/cdk-table-basic/cdk-table-basic-example.css
+++ b/src/assets/angular-material-examples/cdk-table-basic/cdk-table-basic-example.css
@@ -1,39 +1,7 @@
-/* Structure */
-.example-container {
-  display: flex;
-  flex-direction: column;
-  min-width: 300px;
+table {
+  width: 100%;
 }
 
-/*
- * Styles to make the demo's cdk-table match the material design spec
- * https://material.io/guidelines/components/data-tables.html
- */
-.example-table {
-  flex: 1 1 auto;
-  overflow: auto;
-  max-height: 500px;
-}
-
-.example-header-row, .example-row {
-  display: flex;
-  border-bottom: 1px solid #ccc;
-  align-items: center;
-  height: 32px;
-  padding: 0 8px;
-}
-
-.example-cell, .example-header-cell {
-  flex: 1;
-}
-
-.example-header-cell {
-  font-size: 12px;
-  font-weight: bold;
-  color: rgba(0, 0, 0, 0.54);
-}
-
-.example-cell {
-  font-size: 13px;
-  color: rgba(0, 0, 0, 0.87);
+th {
+  text-align: left;
 }
diff --git a/src/assets/angular-material-examples/cdk-table-basic/cdk-table-basic-example.html b/src/assets/angular-material-examples/cdk-table-basic/cdk-table-basic-example.html
index df20a4d1..9c411146 100755
--- a/src/assets/angular-material-examples/cdk-table-basic/cdk-table-basic-example.html
+++ b/src/assets/angular-material-examples/cdk-table-basic/cdk-table-basic-example.html
@@ -1,36 +1,28 @@
-<div class="example-container mat-elevation-z8">
-  <cdk-table #table [dataSource]="dataSource" class="example-table">
-    <!--- Note that these columns can be defined in any order.
-          The actual rendered columns are set as a property on the row definition" -->
-
-    <!-- ID Column -->
-    <ng-container cdkColumnDef="userId">
-      <cdk-header-cell *cdkHeaderCellDef class="example-header-cell"> ID </cdk-header-cell>
-      <cdk-cell *cdkCellDef="let row" class="example-cell"> {{row.id}} </cdk-cell>
-    </ng-container>
-
-    <!-- Progress Column -->
-    <ng-container cdkColumnDef="progress">
-      <cdk-header-cell *cdkHeaderCellDef class="example-header-cell"> Progress </cdk-header-cell>
-      <cdk-cell *cdkCellDef="let row" class="example-cell"> {{row.progress}}% </cdk-cell>
+<table cdk-table [dataSource]="dataSource">
+  <!-- Position Column -->
+  <ng-container cdkColumnDef="position">
+    <th cdk-header-cell *cdkHeaderCellDef> No. </th>
+    <td cdk-cell *cdkCellDef="let element"> {{element.position}} </td>
     </ng-container>
 
     <!-- Name Column -->
-    <ng-container cdkColumnDef="userName">
-      <cdk-header-cell *cdkHeaderCellDef class="example-header-cell"> Name </cdk-header-cell>
-      <cdk-cell *cdkCellDef="let row" class="example-cell"> {{row.name}} </cdk-cell>
+  <ng-container cdkColumnDef="name">
+    <th cdk-header-cell *cdkHeaderCellDef> Name </th>
+    <td cdk-cell *cdkCellDef="let element"> {{element.name}} </td>
     </ng-container>
 
-    <!-- Color Column -->
-    <ng-container cdkColumnDef="color">
-      <cdk-header-cell *cdkHeaderCellDef class="example-header-cell">Color</cdk-header-cell>
-      <cdk-cell *cdkCellDef="let row" class="example-cell"
-                [style.color]="row.color">
-        {{row.color}}
-      </cdk-cell>
+  <!-- Weight Column -->
+  <ng-container cdkColumnDef="weight">
+    <th cdk-header-cell *cdkHeaderCellDef> Weight </th>
+    <td cdk-cell *cdkCellDef="let element"> {{element.weight}} </td>
     </ng-container>
 
-    <cdk-header-row *cdkHeaderRowDef="displayedColumns" class="example-header-row"></cdk-header-row>
-    <cdk-row *cdkRowDef="let row; columns: displayedColumns;" class="example-row"></cdk-row>
-  </cdk-table>
-</div>
+  <!-- Symbol Column -->
+  <ng-container cdkColumnDef="symbol">
+    <th cdk-header-cell *cdkHeaderCellDef> Symbol </th>
+    <td cdk-cell *cdkCellDef="let element"> {{element.symbol}} </td>
+  </ng-container>
+
+  <tr cdk-header-row *cdkHeaderRowDef="displayedColumns"></tr>
+  <tr cdk-row *cdkRowDef="let row; columns: displayedColumns;"></tr>
+</table>
diff --git a/src/assets/angular-material-examples/cdk-table-basic/cdk-table-basic-example.ts b/src/assets/angular-material-examples/cdk-table-basic/cdk-table-basic-example.ts
index fe7338fb..344e04ce 100755
--- a/src/assets/angular-material-examples/cdk-table-basic/cdk-table-basic-example.ts
+++ b/src/assets/angular-material-examples/cdk-table-basic/cdk-table-basic-example.ts
@@ -11,61 +11,29 @@ import {BehaviorSubject, Observable} from 'rxjs';
   templateUrl: 'cdk-table-basic-example.html',
 })
 export class CdkTableBasicExample {
-  displayedColumns = ['userId', 'userName', 'progress', 'color'];
-  exampleDatabase = new ExampleDatabase();
-  dataSource: ExampleDataSource | null;
-
-  ngOnInit() {
-    this.dataSource = new ExampleDataSource(this.exampleDatabase);
-  }
+  displayedColumns = ['position', 'name', 'weight', 'symbol'];
+  dataSource = new ExampleDataSource();
 }
 
-/** Constants used to fill up our data base. */
-const COLORS = ['maroon', 'red', 'orange', 'yellow', 'olive', 'green', 'purple',
-  'fuchsia', 'lime', 'teal', 'aqua', 'blue', 'navy', 'black', 'gray'];
-const NAMES = ['Maia', 'Asher', 'Olivia', 'Atticus', 'Amelia', 'Jack',
-  'Charlotte', 'Theodore', 'Isla', 'Oliver', 'Isabella', 'Jasper',
-  'Cora', 'Levi', 'Violet', 'Arthur', 'Mia', 'Thomas', 'Elizabeth'];
-
-export interface UserData {
-  id: string;
+export interface PeriodicElement {
   name: string;
-  progress: string;
-  color: string;
-}
-
-/** An example database that the data source uses to retrieve data for the table. */
-export class ExampleDatabase {
-  /** Stream that emits whenever the data has been modified. */
-  dataChange: BehaviorSubject<UserData[]> = new BehaviorSubject<UserData[]>([]);
-  get data(): UserData[] { return this.dataChange.value; }
-
-  constructor() {
-    // Fill up the database with 100 users.
-    for (let i = 0; i < 100; i++) { this.addUser(); }
+  position: number;
+  weight: number;
+  symbol: string;
   }
 
-  /** Adds a new user to the database. */
-  addUser() {
-    const copiedData = this.data.slice();
-    copiedData.push(this.createNewUser());
-    this.dataChange.next(copiedData);
-  }
-
-  /** Builds and returns a new User. */
-  private createNewUser() {
-    const name =
-        NAMES[Math.round(Math.random() * (NAMES.length - 1))] + ' ' +
-        NAMES[Math.round(Math.random() * (NAMES.length - 1))].charAt(0) + '.';
-
-    return {
-      id: (this.data.length + 1).toString(),
-      name: name,
-      progress: Math.round(Math.random() * 100).toString(),
-      color: COLORS[Math.round(Math.random() * (COLORS.length - 1))]
-    };
-  }
-}
+const ELEMENT_DATA: PeriodicElement[] = [
+  {position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
+  {position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
+  {position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
+  {position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'},
+  {position: 5, name: 'Boron', weight: 10.811, symbol: 'B'},
+  {position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C'},
+  {position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N'},
+  {position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O'},
+  {position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'},
+  {position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'},
+];
 
 /**
  * Data source to provide what data should be rendered in the table. Note that the data source
@@ -74,14 +42,13 @@ export class ExampleDatabase {
  * the underlying data. Instead, it only needs to take the data and send the table exactly what
  * should be rendered.
  */
-export class ExampleDataSource extends DataSource<any> {
-  constructor(private _exampleDatabase: ExampleDatabase) {
-    super();
-  }
+export class ExampleDataSource extends DataSource<PeriodicElement> {
+  /** Stream of data that is provided to the table. */
+  data: BehaviorSubject<PeriodicElement[]> = new BehaviorSubject<PeriodicElement[]>(ELEMENT_DATA);
 
   /** Connect function called by the table to retrieve one stream containing the data to render. */
-  connect(): Observable<UserData[]> {
-    return this._exampleDatabase.dataChange;
+  connect(): Observable<PeriodicElement[]> {
+    return this.data;
   }
 
   disconnect() {}
diff --git a/src/assets/angular-material-examples/cdk-tree-flat/cdk-tree-flat-example.ts b/src/assets/angular-material-examples/cdk-tree-flat/cdk-tree-flat-example.ts
index a758e55a..ebfaad12 100755
--- a/src/assets/angular-material-examples/cdk-tree-flat/cdk-tree-flat-example.ts
+++ b/src/assets/angular-material-examples/cdk-tree-flat/cdk-tree-flat-example.ts
@@ -1,7 +1,7 @@
-import {Component, Injectable} from '@angular/core';
 import {FlatTreeControl} from '@angular/cdk/tree';
-import {MatTreeFlattener, MatTreeFlatDataSource} from '@angular/material/tree';
-import {of, Observable, BehaviorSubject} from 'rxjs';
+import {Component, Injectable} from '@angular/core';
+import {MatTreeFlatDataSource, MatTreeFlattener} from '@angular/material/tree';
+import {BehaviorSubject, Observable, of as observableOf} from 'rxjs';
 
 /**
  * File node data with nested structure.
@@ -154,7 +154,9 @@ export class CdkTreeFlatExample {
 
   private _isExpandable = (node: FileFlatNode) => { return node.expandable; };
 
-  private _getChildren = (node: FileNode): Observable<FileNode[]> => { return of(node.children); };
+  private _getChildren = (node: FileNode): Observable<FileNode[]> => {
+    return observableOf(node.children);
+  }
 
   hasChild = (_: number, _nodeData: FileFlatNode) => { return _nodeData.expandable; };
 }
diff --git a/src/assets/angular-material-examples/cdk-tree-nested/cdk-tree-nested-example.ts b/src/assets/angular-material-examples/cdk-tree-nested/cdk-tree-nested-example.ts
index 7e8c0689..cca891b3 100755
--- a/src/assets/angular-material-examples/cdk-tree-nested/cdk-tree-nested-example.ts
+++ b/src/assets/angular-material-examples/cdk-tree-nested/cdk-tree-nested-example.ts
@@ -1,7 +1,7 @@
-import {Component, Injectable} from '@angular/core';
 import {NestedTreeControl} from '@angular/cdk/tree';
+import {Component, Injectable} from '@angular/core';
 import {MatTreeNestedDataSource} from '@angular/material/tree';
-import {of, BehaviorSubject} from 'rxjs';
+import {BehaviorSubject, of as observableOf} from 'rxjs';
 
 /**
  * Json node data with nested structure. Each node has a filename and a value or a list of children
@@ -125,7 +125,7 @@ export class CdkTreeNestedExample {
     database.dataChange.subscribe(data => this.nestedDataSource.data = data);
   }
 
-  private _getChildren = (node: FileNode) => { return of(node.children); };
+  private _getChildren = (node: FileNode) => { return observableOf(node.children); };
 
   hasNestedChild = (_: number, nodeData: FileNode) => {return !(nodeData.type); };
 }
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 170df9ad..1099c6ca 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
@@ -5,7 +5,7 @@
       [selectable]="selectable"
       [removable]="removable"
       (removed)="remove(fruit)">
-      {{fruit.name}}
+      {{fruit}}
       <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
     </mat-chip>
     <input
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 b616e155..20c5f49e 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
@@ -26,14 +26,15 @@ export class ChipsAutocompleteExample {
   filteredFruits: Observable<any[]>;
 
   fruits = [
-    { name: 'Lemon' },
+    'Lemon',
   ];
 
   allFruits = [
-    'Orange',
-    'Strawberry',
-    'Lime',
     'Apple',
+    'Lemon',
+    'Lime',
+    'Orange',
+    'Strawberry'
   ];
 
   @ViewChild('fruitInput') fruitInput: ElementRef;
@@ -50,13 +51,15 @@ export class ChipsAutocompleteExample {
 
     // Add our fruit
     if ((value || '').trim()) {
-      this.fruits.push({ name: value.trim() });
+      this.fruits.push(value.trim());
     }
 
     // Reset the input value
     if (input) {
       input.value = '';
     }
+
+    this.fruitCtrl.setValue(null);
   }
 
   remove(fruit: any): void {
@@ -73,7 +76,8 @@ export class ChipsAutocompleteExample {
   }
 
   selected(event: MatAutocompleteSelectedEvent): void {
-    this.fruits.push({ name: event.option.viewValue });
+    this.fruits.push(event.option.viewValue);
     this.fruitInput.nativeElement.value = '';
+    this.fruitCtrl.setValue(null);
   }
 }
diff --git a/src/assets/angular-material-examples/datepicker-formats/datepicker-formats-example.ts b/src/assets/angular-material-examples/datepicker-formats/datepicker-formats-example.ts
index 0af48437..d529f3cc 100755
--- a/src/assets/angular-material-examples/datepicker-formats/datepicker-formats-example.ts
+++ b/src/assets/angular-material-examples/datepicker-formats/datepicker-formats-example.ts
@@ -9,10 +9,9 @@ import {DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE} from '@angular/material/
 // the `default as` syntax.
 import * as _moment from 'moment';
 // tslint:disable-next-line:no-duplicate-imports
-// import {default as _rollupMoment} from 'moment';
+import {default as _rollupMoment} from 'moment';
 
-// const moment = _rollupMoment || _moment;
-const moment = _moment;
+const moment = _rollupMoment || _moment;
 
 // See the Moment.js docs for the meaning of these formats:
 // https://momentjs.com/docs/#/displaying/format/
diff --git a/src/assets/angular-material-examples/datepicker-moment/datepicker-moment-example.ts b/src/assets/angular-material-examples/datepicker-moment/datepicker-moment-example.ts
index 8e5bd241..0684b090 100755
--- a/src/assets/angular-material-examples/datepicker-moment/datepicker-moment-example.ts
+++ b/src/assets/angular-material-examples/datepicker-moment/datepicker-moment-example.ts
@@ -9,10 +9,9 @@ import {DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE} from '@angular/material/
 // the `default as` syntax.
 import * as _moment from 'moment';
 // tslint:disable-next-line:no-duplicate-imports
-// import {default as _rollupMoment} from 'moment';
+import {default as _rollupMoment} from 'moment';
 
-// const moment = _rollupMoment || _moment;
-const moment = _moment;
+const moment = _rollupMoment || _moment;
 
 /** @title Datepicker that uses Moment.js dates */
 @Component({
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 f6660671..6a233667 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
@@ -9,12 +9,10 @@ import {MatDatepicker} from '@angular/material/datepicker';
 // syntax. However, rollup creates a synthetic default module and we thus need to import it using
 // the `default as` syntax.
 import * as _moment from 'moment';
-import { Moment } from 'moment';
 // tslint:disable-next-line:no-duplicate-imports
-// import {default as _rollupMoment, Moment} from 'moment';
+import {default as _rollupMoment, Moment} from 'moment';
 
-// const moment = _rollupMoment || _moment;
-const moment = _moment;
+const moment = _rollupMoment || _moment;
 
 // See the Moment.js docs for the meaning of these formats:
 // https://momentjs.com/docs/#/displaying/format/
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 21c4c03a..f931d302 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
@@ -14,6 +14,6 @@ export class IconSvgExample {
   constructor(iconRegistry: MatIconRegistry, sanitizer: DomSanitizer) {
     iconRegistry.addSvgIcon(
         'thumbs-up',
-        sanitizer.bypassSecurityTrustResourceUrl('assets/images/examples/thumbup-icon.svg'));
+        sanitizer.bypassSecurityTrustResourceUrl('assets/img/examples/thumbup-icon.svg'));
   }
 }
diff --git a/src/assets/angular-material-examples/sidenav-responsive/sidenav-responsive-example.ts b/src/assets/angular-material-examples/sidenav-responsive/sidenav-responsive-example.ts
index 964e3d05..9e84e9a4 100755
--- a/src/assets/angular-material-examples/sidenav-responsive/sidenav-responsive-example.ts
+++ b/src/assets/angular-material-examples/sidenav-responsive/sidenav-responsive-example.ts
@@ -1,5 +1,5 @@
 import {MediaMatcher} from '@angular/cdk/layout';
-import {ChangeDetectorRef, Component} from '@angular/core';
+import {ChangeDetectorRef, Component, OnDestroy} from '@angular/core';
 
 /** @title Responsive sidenav */
 @Component({
@@ -7,7 +7,7 @@ import {ChangeDetectorRef, Component} from '@angular/core';
   templateUrl: 'sidenav-responsive-example.html',
   styleUrls: ['sidenav-responsive-example.css'],
 })
-export class SidenavResponsiveExample {
+export class SidenavResponsiveExample implements OnDestroy {
   mobileQuery: MediaQueryList;
 
   fillerNav = Array(50).fill(0).map((_, i) => `Nav Item ${i + 1}`);
diff --git a/src/assets/angular-material-examples/stepper-editable/stepper-editable-example.ts b/src/assets/angular-material-examples/stepper-editable/stepper-editable-example.ts
index e2e78c0e..c70b275c 100755
--- a/src/assets/angular-material-examples/stepper-editable/stepper-editable-example.ts
+++ b/src/assets/angular-material-examples/stepper-editable/stepper-editable-example.ts
@@ -1,4 +1,4 @@
-import {Component} from '@angular/core';
+import {Component, OnInit} from '@angular/core';
 import {FormBuilder, FormGroup, Validators} from '@angular/forms';
 
 /**
@@ -9,7 +9,7 @@ import {FormBuilder, FormGroup, Validators} from '@angular/forms';
   templateUrl: 'stepper-editable-example.html',
   styleUrls: ['stepper-editable-example.css']
 })
-export class StepperEditableExample {
+export class StepperEditableExample implements OnInit {
   firstFormGroup: FormGroup;
   secondFormGroup: FormGroup;
   isEditable: boolean = false;
diff --git a/src/assets/angular-material-examples/stepper-optional/stepper-optional-example.ts b/src/assets/angular-material-examples/stepper-optional/stepper-optional-example.ts
index f2f56693..44935073 100755
--- a/src/assets/angular-material-examples/stepper-optional/stepper-optional-example.ts
+++ b/src/assets/angular-material-examples/stepper-optional/stepper-optional-example.ts
@@ -1,4 +1,4 @@
-import {Component} from '@angular/core';
+import {Component, OnInit} from '@angular/core';
 import {FormBuilder, FormGroup, Validators} from '@angular/forms';
 
 /**
@@ -9,7 +9,7 @@ import {FormBuilder, FormGroup, Validators} from '@angular/forms';
   templateUrl: 'stepper-optional-example.html',
   styleUrls: ['stepper-optional-example.css']
 })
-export class StepperOptionalExample {
+export class StepperOptionalExample implements OnInit {
   firstFormGroup: FormGroup;
   secondFormGroup: FormGroup;
   isOptional: boolean = false;
diff --git a/src/assets/angular-material-examples/stepper-overview/stepper-overview-example.ts b/src/assets/angular-material-examples/stepper-overview/stepper-overview-example.ts
index 717dcb5d..cd2c1829 100755
--- a/src/assets/angular-material-examples/stepper-overview/stepper-overview-example.ts
+++ b/src/assets/angular-material-examples/stepper-overview/stepper-overview-example.ts
@@ -1,4 +1,4 @@
-import {Component} from '@angular/core';
+import {Component, OnInit} from '@angular/core';
 import {FormBuilder, FormGroup, Validators} from '@angular/forms';
 
 /**
@@ -9,7 +9,7 @@ import {FormBuilder, FormGroup, Validators} from '@angular/forms';
   templateUrl: 'stepper-overview-example.html',
   styleUrls: ['stepper-overview-example.css']
 })
-export class StepperOverviewExample {
+export class StepperOverviewExample implements OnInit {
   isLinear = false;
   firstFormGroup: FormGroup;
   secondFormGroup: FormGroup;
diff --git a/src/assets/angular-material-examples/tabs-overview/tabs-overview-example.css b/src/assets/angular-material-examples/stepper-vertical/stepper-vertical-example.css
similarity index 100%
rename from src/assets/angular-material-examples/tabs-overview/tabs-overview-example.css
rename to src/assets/angular-material-examples/stepper-vertical/stepper-vertical-example.css
diff --git a/src/assets/angular-material-examples/stepper-vertical/stepper-vertical-example.html b/src/assets/angular-material-examples/stepper-vertical/stepper-vertical-example.html
new file mode 100755
index 00000000..422e28d8
--- /dev/null
+++ b/src/assets/angular-material-examples/stepper-vertical/stepper-vertical-example.html
@@ -0,0 +1,36 @@
+<button mat-raised-button (click)="isLinear = !isLinear" id="toggle-linear">
+  {{!isLinear ? 'Enable linear mode' : 'Disable linear mode'}}
+</button>
+<mat-vertical-stepper [linear]="isLinear" #stepper>
+  <mat-step [stepControl]="firstFormGroup">
+    <form [formGroup]="firstFormGroup">
+      <ng-template matStepLabel>Fill out your name</ng-template>
+      <mat-form-field>
+        <input matInput placeholder="Last name, First name" formControlName="firstCtrl" required>
+      </mat-form-field>
+      <div>
+        <button mat-button matStepperNext>Next</button>
+      </div>
+    </form>
+  </mat-step>
+  <mat-step [stepControl]="secondFormGroup">
+    <form [formGroup]="secondFormGroup">
+      <ng-template matStepLabel>Fill out your address</ng-template>
+      <mat-form-field>
+        <input matInput placeholder="Address" formControlName="secondCtrl" required>
+      </mat-form-field>
+      <div>
+        <button mat-button matStepperPrevious>Back</button>
+        <button mat-button matStepperNext>Next</button>
+      </div>
+    </form>
+  </mat-step>
+  <mat-step>
+    <ng-template matStepLabel>Done</ng-template>
+    You are now done.
+    <div>
+      <button mat-button matStepperPrevious>Back</button>
+      <button mat-button (click)="stepper.reset()">Reset</button>
+    </div>
+  </mat-step>
+</mat-vertical-stepper>
diff --git a/src/assets/angular-material-examples/stepper-vertical/stepper-vertical-example.ts b/src/assets/angular-material-examples/stepper-vertical/stepper-vertical-example.ts
new file mode 100755
index 00000000..13229872
--- /dev/null
+++ b/src/assets/angular-material-examples/stepper-vertical/stepper-vertical-example.ts
@@ -0,0 +1,27 @@
+import {Component, OnInit} from '@angular/core';
+import {FormBuilder, FormGroup, Validators} from '@angular/forms';
+
+/**
+ * @title Stepper vertical
+ */
+@Component({
+  selector: 'stepper-vertical',
+  templateUrl: 'stepper-vertical-example.html',
+  styleUrls: ['stepper-vertical-example.css']
+})
+export class StepperVerticalExample implements OnInit {
+  isLinear = false;
+  firstFormGroup: FormGroup;
+  secondFormGroup: FormGroup;
+
+  constructor(private _formBuilder: FormBuilder) { }
+
+  ngOnInit() {
+    this.firstFormGroup = this._formBuilder.group({
+      firstCtrl: ['', Validators.required]
+    });
+    this.secondFormGroup = this._formBuilder.group({
+      secondCtrl: ['', Validators.required]
+    });
+  }
+}
diff --git a/src/assets/angular-material-examples/tab-group-async/tab-group-async-example.css b/src/assets/angular-material-examples/tab-group-async/tab-group-async-example.css
new file mode 100755
index 00000000..74323087
--- /dev/null
+++ b/src/assets/angular-material-examples/tab-group-async/tab-group-async-example.css
@@ -0,0 +1 @@
+/** No CSS for this example */
diff --git a/src/assets/angular-material-examples/tab-group-async/tab-group-async-example.html b/src/assets/angular-material-examples/tab-group-async/tab-group-async-example.html
new file mode 100755
index 00000000..c1f93438
--- /dev/null
+++ b/src/assets/angular-material-examples/tab-group-async/tab-group-async-example.html
@@ -0,0 +1,10 @@
+<ng-container *ngIf="(asyncTabs | async) === null">
+  Loading tabs...
+</ng-container>
+
+<mat-tab-group>
+  <mat-tab *ngFor="let tab of asyncTabs | async">
+    <ng-template mat-tab-label>{{tab.label}}</ng-template>
+    {{tab.content}}
+  </mat-tab>
+</mat-tab-group>
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
new file mode 100755
index 00000000..8ae32569
--- /dev/null
+++ b/src/assets/angular-material-examples/tab-group-async/tab-group-async-example.ts
@@ -0,0 +1,31 @@
+import {Component} from '@angular/core';
+import {Observable, Observer} from 'rxjs';
+
+export interface ExampleTab {
+  label: string;
+  content: string;
+}
+
+/**
+ * @title Tab group with asynchronously loading tab contents
+ */
+@Component({
+  selector: 'tab-group-async-example',
+  templateUrl: 'tab-group-async-example.html',
+  styleUrls: ['tab-group-async-example.css'],
+})
+export class TabGroupAsyncExample {
+  asyncTabs: Observable<ExampleTab[]>;
+
+  constructor() {
+    this.asyncTabs = Observable.create((observer: Observer<ExampleTab[]>) => {
+      setTimeout(() => {
+        observer.next([
+          {label: 'First', content: 'Content 1'},
+          {label: 'Second', content: 'Content 2'},
+          {label: 'Third', content: 'Content 3'},
+        ]);
+      }, 1000);
+    });
+  }
+}
diff --git a/src/assets/angular-material-examples/tab-group-basic/tab-group-basic-example.css b/src/assets/angular-material-examples/tab-group-basic/tab-group-basic-example.css
new file mode 100755
index 00000000..74323087
--- /dev/null
+++ b/src/assets/angular-material-examples/tab-group-basic/tab-group-basic-example.css
@@ -0,0 +1 @@
+/** No CSS for this example */
diff --git a/src/assets/angular-material-examples/tab-group-basic/tab-group-basic-example.html b/src/assets/angular-material-examples/tab-group-basic/tab-group-basic-example.html
new file mode 100755
index 00000000..6002f245
--- /dev/null
+++ b/src/assets/angular-material-examples/tab-group-basic/tab-group-basic-example.html
@@ -0,0 +1,5 @@
+<mat-tab-group>
+  <mat-tab label="First"> Content 1 </mat-tab>
+  <mat-tab label="Second"> Content 2 </mat-tab>
+  <mat-tab label="Third"> Content 3 </mat-tab>
+</mat-tab-group>
diff --git a/src/assets/angular-material-examples/tab-group-basic/tab-group-basic-example.ts b/src/assets/angular-material-examples/tab-group-basic/tab-group-basic-example.ts
new file mode 100755
index 00000000..e27bd3c8
--- /dev/null
+++ b/src/assets/angular-material-examples/tab-group-basic/tab-group-basic-example.ts
@@ -0,0 +1,11 @@
+import {Component} from '@angular/core';
+
+/**
+ * @title Basic use of the tab group
+ */
+@Component({
+  selector: 'tab-group-basic-example',
+  templateUrl: 'tab-group-basic-example.html',
+  styleUrls: ['tab-group-basic-example.css'],
+})
+export class TabGroupBasicExample {}
diff --git a/src/assets/angular-material-examples/tab-group-custom-label/tab-group-custom-label-example.css b/src/assets/angular-material-examples/tab-group-custom-label/tab-group-custom-label-example.css
new file mode 100755
index 00000000..1f3769e1
--- /dev/null
+++ b/src/assets/angular-material-examples/tab-group-custom-label/tab-group-custom-label-example.css
@@ -0,0 +1,3 @@
+.example-tab-icon {
+  margin-right: 8px;
+}
diff --git a/src/assets/angular-material-examples/tab-group-custom-label/tab-group-custom-label-example.html b/src/assets/angular-material-examples/tab-group-custom-label/tab-group-custom-label-example.html
new file mode 100755
index 00000000..d70c34a4
--- /dev/null
+++ b/src/assets/angular-material-examples/tab-group-custom-label/tab-group-custom-label-example.html
@@ -0,0 +1,26 @@
+<mat-tab-group>
+  <mat-tab>
+    <ng-template mat-tab-label>
+      <mat-icon class="example-tab-icon">thumb_up</mat-icon>
+      First
+    </ng-template>
+    Content 1
+  </mat-tab>
+
+  <mat-tab>
+    <ng-template mat-tab-label>
+      <mat-icon class="example-tab-icon">thumb_up</mat-icon>
+      Second
+    </ng-template>
+    Content 2
+  </mat-tab>
+
+  <mat-tab>
+    <ng-template mat-tab-label>
+      <mat-icon class="example-tab-icon">thumb_up</mat-icon>
+      Third
+    </ng-template>
+
+    Content 3
+  </mat-tab>
+</mat-tab-group>
diff --git a/src/assets/angular-material-examples/tab-group-custom-label/tab-group-custom-label-example.ts b/src/assets/angular-material-examples/tab-group-custom-label/tab-group-custom-label-example.ts
new file mode 100755
index 00000000..f124cc83
--- /dev/null
+++ b/src/assets/angular-material-examples/tab-group-custom-label/tab-group-custom-label-example.ts
@@ -0,0 +1,11 @@
+import {Component} from '@angular/core';
+
+/**
+ * @title Using tabs with a custom label template
+ */
+@Component({
+  selector: 'tab-group-custom-label-example',
+  templateUrl: 'tab-group-custom-label-example.html',
+  styleUrls: ['tab-group-custom-label-example.css'],
+})
+export class TabGroupCustomLabelExample {}
diff --git a/src/assets/angular-material-examples/tab-group-dynamic-height/tab-group-dynamic-height-example.css b/src/assets/angular-material-examples/tab-group-dynamic-height/tab-group-dynamic-height-example.css
new file mode 100755
index 00000000..af5f0dac
--- /dev/null
+++ b/src/assets/angular-material-examples/tab-group-dynamic-height/tab-group-dynamic-height-example.css
@@ -0,0 +1,18 @@
+.example-small-box, .example-large-box {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 16px;
+  padding: 16px;
+  border-radius: 8px;
+}
+
+.example-small-box {
+  height: 100px;
+  width: 100px;
+}
+
+.example-large-box {
+  height: 300px;
+  width: 300px;
+}
diff --git a/src/assets/angular-material-examples/tab-group-dynamic-height/tab-group-dynamic-height-example.html b/src/assets/angular-material-examples/tab-group-dynamic-height/tab-group-dynamic-height-example.html
new file mode 100755
index 00000000..7b345298
--- /dev/null
+++ b/src/assets/angular-material-examples/tab-group-dynamic-height/tab-group-dynamic-height-example.html
@@ -0,0 +1,12 @@
+<mat-tab-group dynamicHeight>
+  <mat-tab label="Short tab">
+    <div class="example-small-box mat-elevation-z4">
+      Small content
+    </div>
+  </mat-tab>
+  <mat-tab label="Long tab">
+    <div class="example-large-box mat-elevation-z4">
+      Large content
+    </div>
+  </mat-tab>
+</mat-tab-group>
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
new file mode 100755
index 00000000..6ae7b50f
--- /dev/null
+++ b/src/assets/angular-material-examples/tab-group-dynamic-height/tab-group-dynamic-height-example.ts
@@ -0,0 +1,11 @@
+import {Component} from '@angular/core';
+
+/**
+ * @title Tag group with dynamic height based on tab contents
+ */
+@Component({
+  selector: 'tab-group-dynamic-height-example',
+  templateUrl: 'tab-group-dynamic-height-example.html',
+  styleUrls: ['tab-group-dynamic-height-example.css'],
+})
+export class TabGroupDynamicHeightExample {}
diff --git a/src/assets/angular-material-examples/tab-group-dynamic/tab-group-dynamic-example.css b/src/assets/angular-material-examples/tab-group-dynamic/tab-group-dynamic-example.css
new file mode 100755
index 00000000..a28708d8
--- /dev/null
+++ b/src/assets/angular-material-examples/tab-group-dynamic/tab-group-dynamic-example.css
@@ -0,0 +1,5 @@
+.example-input-label,
+.example-add-tab-button,
+.example-delete-tab-button {
+  margin: 8px;
+}
diff --git a/src/assets/angular-material-examples/tab-group-dynamic/tab-group-dynamic-example.html b/src/assets/angular-material-examples/tab-group-dynamic/tab-group-dynamic-example.html
new file mode 100755
index 00000000..d28c2a90
--- /dev/null
+++ b/src/assets/angular-material-examples/tab-group-dynamic/tab-group-dynamic-example.html
@@ -0,0 +1,29 @@
+<div>
+  <span class="example-input-label"> Selected tab index: </span>
+  <mat-form-field>
+    <input matInput type="number" [formControl]="selected">
+  </mat-form-field>
+</div>
+
+<div>
+  <button mat-raised-button
+          class="example-add-tab-button"
+          (click)="addTab(selectAfterAdding.checked)">
+    Add new tab
+  </button>
+  <mat-checkbox #selectAfterAdding> Select tab after adding </mat-checkbox>
+</div>
+
+<mat-tab-group [selectedIndex]="selected.value"
+               (selectedIndexChange)="selected.setValue($event)">
+  <mat-tab *ngFor="let tab of tabs; let index = index" [label]="tab">
+    Contents for {{tab}} tab
+
+    <button mat-raised-button
+            class="example-delete-tab-button"
+            [disabled]="tabs.length === 1"
+            (click)="removeTab(index)">
+      Delete Tab
+    </button>
+  </mat-tab>
+</mat-tab-group>
diff --git a/src/assets/angular-material-examples/tab-group-dynamic/tab-group-dynamic-example.ts b/src/assets/angular-material-examples/tab-group-dynamic/tab-group-dynamic-example.ts
new file mode 100755
index 00000000..ab5f3e8f
--- /dev/null
+++ b/src/assets/angular-material-examples/tab-group-dynamic/tab-group-dynamic-example.ts
@@ -0,0 +1,27 @@
+import {Component} from '@angular/core';
+import {FormControl} from '@angular/forms';
+
+/**
+ * @title Tag group with dynamically changing tabs
+ */
+@Component({
+  selector: 'tab-group-dynamic-example',
+  templateUrl: 'tab-group-dynamic-example.html',
+  styleUrls: ['tab-group-dynamic-example.css'],
+})
+export class TabGroupDynamicExample {
+  tabs = ['First', 'Second', 'Third'];
+  selected = new FormControl(0);
+
+  addTab(selectAfterAdding: boolean) {
+    this.tabs.push('New');
+
+    if (selectAfterAdding) {
+      this.selected.setValue(this.tabs.length - 1);
+    }
+  }
+
+  removeTab(index: number) {
+    this.tabs.splice(index, 1);
+  }
+}
diff --git a/src/assets/angular-material-examples/tab-group-header-below/tab-group-header-below-example.css b/src/assets/angular-material-examples/tab-group-header-below/tab-group-header-below-example.css
new file mode 100755
index 00000000..74323087
--- /dev/null
+++ b/src/assets/angular-material-examples/tab-group-header-below/tab-group-header-below-example.css
@@ -0,0 +1 @@
+/** No CSS for this example */
diff --git a/src/assets/angular-material-examples/tab-group-header-below/tab-group-header-below-example.html b/src/assets/angular-material-examples/tab-group-header-below/tab-group-header-below-example.html
new file mode 100755
index 00000000..a5871252
--- /dev/null
+++ b/src/assets/angular-material-examples/tab-group-header-below/tab-group-header-below-example.html
@@ -0,0 +1,5 @@
+<mat-tab-group headerPosition="below">
+  <mat-tab label="First"> Content 1 </mat-tab>
+  <mat-tab label="Second"> Content 2 </mat-tab>
+  <mat-tab label="Third"> Content 3 </mat-tab>
+</mat-tab-group>
diff --git a/src/assets/angular-material-examples/tab-group-header-below/tab-group-header-below-example.ts b/src/assets/angular-material-examples/tab-group-header-below/tab-group-header-below-example.ts
new file mode 100755
index 00000000..608f7f38
--- /dev/null
+++ b/src/assets/angular-material-examples/tab-group-header-below/tab-group-header-below-example.ts
@@ -0,0 +1,11 @@
+import {Component} from '@angular/core';
+
+/**
+ * @title Tab group with the headers on the bottom
+ */
+@Component({
+  selector: 'tab-group-header-below-example',
+  templateUrl: 'tab-group-header-below-example.html',
+  styleUrls: ['tab-group-header-below-example.css'],
+})
+export class TabGroupHeaderBelowExample {}
diff --git a/src/assets/angular-material-examples/tab-group-lazy-loaded/tab-group-lazy-loaded-example.css b/src/assets/angular-material-examples/tab-group-lazy-loaded/tab-group-lazy-loaded-example.css
new file mode 100755
index 00000000..74323087
--- /dev/null
+++ b/src/assets/angular-material-examples/tab-group-lazy-loaded/tab-group-lazy-loaded-example.css
@@ -0,0 +1 @@
+/** No CSS for this example */
diff --git a/src/assets/angular-material-examples/tab-group-lazy-loaded/tab-group-lazy-loaded-example.html b/src/assets/angular-material-examples/tab-group-lazy-loaded/tab-group-lazy-loaded-example.html
new file mode 100755
index 00000000..97f5c9b6
--- /dev/null
+++ b/src/assets/angular-material-examples/tab-group-lazy-loaded/tab-group-lazy-loaded-example.html
@@ -0,0 +1,17 @@
+<mat-tab-group>
+  <mat-tab label="First">
+    <ng-template matTabContent>
+      Content 1 - Loaded: {{getTimeLoaded(1) | date:'medium'}}
+    </ng-template>
+  </mat-tab>
+  <mat-tab label="Second">
+    <ng-template matTabContent>
+      Content 2 - Loaded: {{getTimeLoaded(2) | date:'medium'}}
+    </ng-template>
+  </mat-tab>
+  <mat-tab label="Third">
+    <ng-template matTabContent>
+      Content 3 - Loaded: {{getTimeLoaded(3) | date:'medium'}}
+    </ng-template>
+  </mat-tab>
+</mat-tab-group>
diff --git a/src/assets/angular-material-examples/tab-group-lazy-loaded/tab-group-lazy-loaded-example.ts b/src/assets/angular-material-examples/tab-group-lazy-loaded/tab-group-lazy-loaded-example.ts
new file mode 100755
index 00000000..de89df3c
--- /dev/null
+++ b/src/assets/angular-material-examples/tab-group-lazy-loaded/tab-group-lazy-loaded-example.ts
@@ -0,0 +1,21 @@
+import {Component} from '@angular/core';
+
+/**
+ * @title Tab group where the tab content is loaded lazily (when activated)
+ */
+@Component({
+  selector: 'tab-group-lazy-loaded-example',
+  templateUrl: 'tab-group-lazy-loaded-example.html',
+  styleUrls: ['tab-group-lazy-loaded-example.css'],
+})
+export class TabGroupLazyLoadedExample {
+  tabLoadTimes: Date[] = [];
+
+  getTimeLoaded(index: number) {
+    if (!this.tabLoadTimes[index]) {
+      this.tabLoadTimes[index] = new Date();
+    }
+
+    return this.tabLoadTimes[index];
+  }
+}
diff --git a/src/assets/angular-material-examples/tab-group-stretched/tab-group-stretched-example.css b/src/assets/angular-material-examples/tab-group-stretched/tab-group-stretched-example.css
new file mode 100755
index 00000000..50bc8b3b
--- /dev/null
+++ b/src/assets/angular-material-examples/tab-group-stretched/tab-group-stretched-example.css
@@ -0,0 +1,3 @@
+.example-stretched-tabs {
+  max-width: 800px;
+}
diff --git a/src/assets/angular-material-examples/tab-group-stretched/tab-group-stretched-example.html b/src/assets/angular-material-examples/tab-group-stretched/tab-group-stretched-example.html
new file mode 100755
index 00000000..048ae2c4
--- /dev/null
+++ b/src/assets/angular-material-examples/tab-group-stretched/tab-group-stretched-example.html
@@ -0,0 +1,5 @@
+<mat-tab-group mat-stretch-tabs class="example-stretched-tabs mat-elevation-z4">
+  <mat-tab label="First"> Content 1 </mat-tab>
+  <mat-tab label="Second"> Content 2 </mat-tab>
+  <mat-tab label="Third"> Content 3 </mat-tab>
+</mat-tab-group>
diff --git a/src/assets/angular-material-examples/tab-group-stretched/tab-group-stretched-example.ts b/src/assets/angular-material-examples/tab-group-stretched/tab-group-stretched-example.ts
new file mode 100755
index 00000000..99d4b37b
--- /dev/null
+++ b/src/assets/angular-material-examples/tab-group-stretched/tab-group-stretched-example.ts
@@ -0,0 +1,11 @@
+import {Component} from '@angular/core';
+
+/**
+ * @title Tab group with stretched labels
+ */
+@Component({
+  selector: 'tab-group-stretched-example',
+  templateUrl: 'tab-group-stretched-example.html',
+  styleUrls: ['tab-group-stretched-example.css'],
+})
+export class TabGroupStretchedExample {}
diff --git a/src/assets/angular-material-examples/tab-group-theme/tab-group-theme-example.css b/src/assets/angular-material-examples/tab-group-theme/tab-group-theme-example.css
new file mode 100755
index 00000000..f54020ca
--- /dev/null
+++ b/src/assets/angular-material-examples/tab-group-theme/tab-group-theme-example.css
@@ -0,0 +1,4 @@
+.example-button-toggle-label {
+  display: inline-block;
+  margin: 16px;
+}
diff --git a/src/assets/angular-material-examples/tab-group-theme/tab-group-theme-example.html b/src/assets/angular-material-examples/tab-group-theme/tab-group-theme-example.html
new file mode 100755
index 00000000..dbdb157a
--- /dev/null
+++ b/src/assets/angular-material-examples/tab-group-theme/tab-group-theme-example.html
@@ -0,0 +1,25 @@
+<div>
+  <mat-button-toggle-group #colorToggle="matButtonToggleGroup"
+                           value="primary"
+                           aria-label="Change color">
+    <mat-button-toggle value="primary"> Primary </mat-button-toggle>
+    <mat-button-toggle value="accent"> Accent </mat-button-toggle>
+  </mat-button-toggle-group>
+  <span class="example-button-toggle-label"> Color </span>
+</div>
+
+<div>
+  <mat-button-toggle-group #backgroundColorToggle="matButtonToggleGroup"
+                           value="primary"
+                           aria-label="Change color">
+    <mat-button-toggle value="primary"> Primary </mat-button-toggle>
+    <mat-button-toggle value="accent"> Accent </mat-button-toggle>
+  </mat-button-toggle-group>
+  <span class="example-button-toggle-label"> Background Color </span>
+</div>
+
+<mat-tab-group [color]="colorToggle.value" [backgroundColor]="backgroundColorToggle.value">
+  <mat-tab label="First"> Content 1 </mat-tab>
+  <mat-tab label="Second"> Content 2 </mat-tab>
+  <mat-tab label="Third"> Content 3 </mat-tab>
+</mat-tab-group>
diff --git a/src/assets/angular-material-examples/tab-group-theme/tab-group-theme-example.ts b/src/assets/angular-material-examples/tab-group-theme/tab-group-theme-example.ts
new file mode 100755
index 00000000..22a94854
--- /dev/null
+++ b/src/assets/angular-material-examples/tab-group-theme/tab-group-theme-example.ts
@@ -0,0 +1,11 @@
+import {Component} from '@angular/core';
+
+/**
+ * @title Customizing the theme options on the tab group
+ */
+@Component({
+  selector: 'tab-group-theme-example',
+  templateUrl: 'tab-group-theme-example.html',
+  styleUrls: ['tab-group-theme-example.css'],
+})
+export class TabGroupThemeExample {}
diff --git a/src/assets/angular-material-examples/tab-nav-bar-basic/tab-nav-bar-basic-example.css b/src/assets/angular-material-examples/tab-nav-bar-basic/tab-nav-bar-basic-example.css
new file mode 100755
index 00000000..b25726a6
--- /dev/null
+++ b/src/assets/angular-material-examples/tab-nav-bar-basic/tab-nav-bar-basic-example.css
@@ -0,0 +1,3 @@
+.example-action-button {
+  margin-bottom: 8px;
+}
diff --git a/src/assets/angular-material-examples/tab-nav-bar-basic/tab-nav-bar-basic-example.html b/src/assets/angular-material-examples/tab-nav-bar-basic/tab-nav-bar-basic-example.html
new file mode 100755
index 00000000..86d05003
--- /dev/null
+++ b/src/assets/angular-material-examples/tab-nav-bar-basic/tab-nav-bar-basic-example.html
@@ -0,0 +1,12 @@
+<button mat-raised-button
+        class="example-action-button"
+        (click)="toggleBackground()">
+  Toggle background
+</button>
+
+<nav mat-tab-nav-bar [backgroundColor]="background">
+  <a mat-tab-link *ngFor="let link of links"
+     (click)="activeLink = link"
+     [active]="activeLink == link"> {{ link }} </a>
+  <a mat-tab-link disabled>Disabled Link</a>
+</nav>
diff --git a/src/assets/angular-material-examples/tab-nav-bar-basic/tab-nav-bar-basic-example.ts b/src/assets/angular-material-examples/tab-nav-bar-basic/tab-nav-bar-basic-example.ts
new file mode 100755
index 00000000..330f3d54
--- /dev/null
+++ b/src/assets/angular-material-examples/tab-nav-bar-basic/tab-nav-bar-basic-example.ts
@@ -0,0 +1,19 @@
+import {Component} from '@angular/core';
+
+/**
+ * @title Basic use of the tab nav bar
+ */
+@Component({
+  selector: 'tab-nav-bar-basic-example',
+  templateUrl: 'tab-nav-bar-basic-example.html',
+  styleUrls: ['tab-nav-bar-basic-example.css'],
+})
+export class TabNavBarBasicExample {
+  links = ['First', 'Second', 'Third'];
+  activeLink = this.links[0];
+  background = '';
+
+  toggleBackground() {
+    this.background = this.background ? '' : 'primary';
+  }
+}
diff --git a/src/assets/angular-material-examples/table-basic-flex/table-basic-flex-example.css b/src/assets/angular-material-examples/table-basic-flex/table-basic-flex-example.css
new file mode 100755
index 00000000..1922e7ff
--- /dev/null
+++ b/src/assets/angular-material-examples/table-basic-flex/table-basic-flex-example.css
@@ -0,0 +1,3 @@
+table {
+  width: 100%;
+}
diff --git a/src/assets/angular-material-examples/table-basic-flex/table-basic-flex-example.html b/src/assets/angular-material-examples/table-basic-flex/table-basic-flex-example.html
new file mode 100755
index 00000000..09bb2c21
--- /dev/null
+++ b/src/assets/angular-material-examples/table-basic-flex/table-basic-flex-example.html
@@ -0,0 +1,28 @@
+<mat-table [dataSource]="dataSource" class="mat-elevation-z8">
+  <!-- Position Column -->
+  <ng-container matColumnDef="position">
+    <mat-header-cell *matHeaderCellDef> No. </mat-header-cell>
+    <mat-cell *matCellDef="let element"> {{element.position}} </mat-cell>
+  </ng-container>
+
+  <!-- Name Column -->
+  <ng-container matColumnDef="name">
+    <mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
+    <mat-cell *matCellDef="let element"> {{element.name}} </mat-cell>
+  </ng-container>
+
+  <!-- Weight Column -->
+  <ng-container matColumnDef="weight">
+    <mat-header-cell *matHeaderCellDef> Weight </mat-header-cell>
+    <mat-cell *matCellDef="let element"> {{element.weight}} </mat-cell>
+  </ng-container>
+
+  <!-- Symbol Column -->
+  <ng-container matColumnDef="symbol">
+    <mat-header-cell *matHeaderCellDef> Symbol </mat-header-cell>
+    <mat-cell *matCellDef="let element"> {{element.symbol}} </mat-cell>
+  </ng-container>
+
+  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+  <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
+</mat-table>
\ No newline at end of file
diff --git a/src/assets/angular-material-examples/table-basic-flex/table-basic-flex-example.ts b/src/assets/angular-material-examples/table-basic-flex/table-basic-flex-example.ts
new file mode 100755
index 00000000..f75072d0
--- /dev/null
+++ b/src/assets/angular-material-examples/table-basic-flex/table-basic-flex-example.ts
@@ -0,0 +1,34 @@
+import {Component} from '@angular/core';
+
+/**
+ * @title Basic use of `<mat-table>` (uses display flex)
+ */
+@Component({
+  selector: 'table-basic-flex-example',
+  styleUrls: ['table-basic-flex-example.css'],
+  templateUrl: 'table-basic-flex-example.html',
+})
+export class TableBasicFlexExample {
+  displayedColumns = ['position', 'name', 'weight', 'symbol'];
+  dataSource = ELEMENT_DATA;
+}
+
+export interface PeriodicElement {
+  name: string;
+  position: number;
+  weight: number;
+  symbol: string;
+}
+
+const ELEMENT_DATA: PeriodicElement[] = [
+  {position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
+  {position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
+  {position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
+  {position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'},
+  {position: 5, name: 'Boron', weight: 10.811, symbol: 'B'},
+  {position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C'},
+  {position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N'},
+  {position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O'},
+  {position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'},
+  {position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'},
+];
diff --git a/src/assets/angular-material-examples/table-basic/table-basic-example.css b/src/assets/angular-material-examples/table-basic/table-basic-example.css
index bbfba32d..1922e7ff 100755
--- a/src/assets/angular-material-examples/table-basic/table-basic-example.css
+++ b/src/assets/angular-material-examples/table-basic/table-basic-example.css
@@ -1,7 +1,3 @@
-.example-container {
-  display: flex;
-  flex-direction: column;
-  max-height: 500px;
-  min-width: 300px;
-  overflow: auto;
+table {
+  width: 100%;
 }
diff --git a/src/assets/angular-material-examples/table-basic/table-basic-example.html b/src/assets/angular-material-examples/table-basic/table-basic-example.html
index 7531ffcc..accb8a7c 100755
--- a/src/assets/angular-material-examples/table-basic/table-basic-example.html
+++ b/src/assets/angular-material-examples/table-basic/table-basic-example.html
@@ -1,5 +1,4 @@
-<div class="example-container mat-elevation-z8">
-  <table mat-table #table [dataSource]="dataSource">
+<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
 
     <!--- Note that these columns can be defined in any order.
           The actual rendered columns are set as a property on the row definition" -->
@@ -31,4 +30,4 @@
     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
     <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
   </table>
-</div>
+
diff --git a/src/assets/angular-material-examples/table-basic/table-basic-example.ts b/src/assets/angular-material-examples/table-basic/table-basic-example.ts
index c1176481..3042613e 100755
--- a/src/assets/angular-material-examples/table-basic/table-basic-example.ts
+++ b/src/assets/angular-material-examples/table-basic/table-basic-example.ts
@@ -1,7 +1,7 @@
 import {Component} from '@angular/core';
 
 /**
- * @title Basic table
+ * @title Basic use of `<table mat-table>`
  */
 @Component({
   selector: 'table-basic-example',
@@ -13,14 +13,14 @@ export class TableBasicExample {
   dataSource = ELEMENT_DATA;
 }
 
-export interface Element {
+export interface PeriodicElement {
   name: string;
   position: number;
   weight: number;
   symbol: string;
 }
 
-const ELEMENT_DATA: Element[] = [
+const ELEMENT_DATA: PeriodicElement[] = [
   {position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
   {position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
   {position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
@@ -31,14 +31,4 @@ const ELEMENT_DATA: Element[] = [
   {position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O'},
   {position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'},
   {position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'},
-  {position: 11, name: 'Sodium', weight: 22.9897, symbol: 'Na'},
-  {position: 12, name: 'Magnesium', weight: 24.305, symbol: 'Mg'},
-  {position: 13, name: 'Aluminum', weight: 26.9815, symbol: 'Al'},
-  {position: 14, name: 'Silicon', weight: 28.0855, symbol: 'Si'},
-  {position: 15, name: 'Phosphorus', weight: 30.9738, symbol: 'P'},
-  {position: 16, name: 'Sulfur', weight: 32.065, symbol: 'S'},
-  {position: 17, name: 'Chlorine', weight: 35.453, symbol: 'Cl'},
-  {position: 18, name: 'Argon', weight: 39.948, symbol: 'Ar'},
-  {position: 19, name: 'Potassium', weight: 39.0983, symbol: 'K'},
-  {position: 20, name: 'Calcium', weight: 40.078, symbol: 'Ca'},
 ];
diff --git a/src/assets/angular-material-examples/table-dynamic-columns/table-dynamic-columns-example.css b/src/assets/angular-material-examples/table-dynamic-columns/table-dynamic-columns-example.css
new file mode 100755
index 00000000..879b4295
--- /dev/null
+++ b/src/assets/angular-material-examples/table-dynamic-columns/table-dynamic-columns-example.css
@@ -0,0 +1,7 @@
+table {
+  width: 100%;
+}
+
+button {
+  margin: 16px 8px;
+}
diff --git a/src/assets/angular-material-examples/table-dynamic-columns/table-dynamic-columns-example.html b/src/assets/angular-material-examples/table-dynamic-columns/table-dynamic-columns-example.html
new file mode 100755
index 00000000..0463410e
--- /dev/null
+++ b/src/assets/angular-material-examples/table-dynamic-columns/table-dynamic-columns-example.html
@@ -0,0 +1,13 @@
+<button mat-raised-button (click)="addColumn()"> Add column </button>
+<button mat-raised-button (click)="removeColumn()"> Remove column </button>
+<button mat-raised-button (click)="shuffle()"> Shuffle </button>
+
+<table mat-table [dataSource]="data" class="mat-elevation-z8">
+  <ng-container matColumnDef="{{column}}" *ngFor="let column of definedColumns">
+    <th mat-header-cell *matHeaderCellDef> {{column}} </th>
+    <td mat-cell *matCellDef="let element"> {{element[column]}} </td>
+  </ng-container>
+
+  <tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
+  <tr mat-row *matRowDef="let row; columns: columnsToDisplay;"></tr>
+</table>
diff --git a/src/assets/angular-material-examples/table-dynamic-columns/table-dynamic-columns-example.ts b/src/assets/angular-material-examples/table-dynamic-columns/table-dynamic-columns-example.ts
new file mode 100755
index 00000000..107226fc
--- /dev/null
+++ b/src/assets/angular-material-examples/table-dynamic-columns/table-dynamic-columns-example.ts
@@ -0,0 +1,59 @@
+import {Component} from '@angular/core';
+
+/**
+ * @title Table dynamically changing the columns displayed
+ */
+@Component({
+  selector: 'table-dynamic-columns-example',
+  styleUrls: ['table-dynamic-columns-example.css'],
+  templateUrl: 'table-dynamic-columns-example.html',
+})
+export class TableDynamicColumnsExample {
+  definedColumns = ['name', 'weight', 'symbol', 'position'];
+  columnsToDisplay = this.definedColumns.slice();
+  data: PeriodicElement[] = ELEMENT_DATA;
+
+  addColumn() {
+    const randomColumn = Math.floor(Math.random() * this.definedColumns.length);
+    this.columnsToDisplay.push(this.definedColumns[randomColumn]);
+  }
+
+  removeColumn() {
+    if (this.columnsToDisplay.length) {
+      this.columnsToDisplay.pop();
+    }
+  }
+
+  shuffle() {
+    let currentIndex = this.columnsToDisplay.length;
+    while (0 !== currentIndex) {
+      let randomIndex = Math.floor(Math.random() * currentIndex);
+      currentIndex -= 1;
+
+      // Swap
+      let temp = this.columnsToDisplay[currentIndex];
+      this.columnsToDisplay[currentIndex] = this.columnsToDisplay[randomIndex];
+      this.columnsToDisplay[randomIndex] = temp;
+    }
+  }
+}
+
+export interface PeriodicElement {
+  name: string;
+  position: number;
+  weight: number;
+  symbol: string;
+}
+
+const ELEMENT_DATA: PeriodicElement[] = [
+  {position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
+  {position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
+  {position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
+  {position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'},
+  {position: 5, name: 'Boron', weight: 10.811, symbol: 'B'},
+  {position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C'},
+  {position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N'},
+  {position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O'},
+  {position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'},
+  {position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'},
+];
diff --git a/src/assets/angular-material-examples/table-expandable-rows/table-expandable-rows-example.css b/src/assets/angular-material-examples/table-expandable-rows/table-expandable-rows-example.css
new file mode 100755
index 00000000..673abbf7
--- /dev/null
+++ b/src/assets/angular-material-examples/table-expandable-rows/table-expandable-rows-example.css
@@ -0,0 +1,47 @@
+table {
+  width: 100%;
+}
+
+tr.example-detail-row {
+  height: 0;
+}
+
+tr.example-element-row:not(.example-expanded-row):hover {
+  background: #f5f5f5;
+}
+
+tr.example-element-row:not(.example-expanded-row):active {
+  background: #efefef;
+}
+
+.example-element-row td {
+  border-bottom-width: 0;
+}
+
+.example-element-detail {
+  overflow: hidden;
+  display: flex;
+}
+
+.example-element-diagram {
+  min-width: 80px;
+  border: 2px solid black;
+  padding: 8px;
+  font-weight: lighter;
+  margin: 8px 0;
+  height: 104px;
+}
+
+.example-element-symbol {
+  font-weight: bold;
+  font-size: 40px;
+  line-height: normal;
+}
+
+.example-element-description {
+  padding: 16px;
+}
+
+.example-element-description-attribution {
+  opacity: 0.5;
+}
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
new file mode 100755
index 00000000..bf38ae1c
--- /dev/null
+++ b/src/assets/angular-material-examples/table-expandable-rows/table-expandable-rows-example.html
@@ -0,0 +1,35 @@
+<table mat-table
+       [dataSource]="dataSource" multiTemplateDataRows
+       class="mat-elevation-z8">
+  <ng-container matColumnDef="{{column}}" *ngFor="let column of columnsToDisplay">
+    <th mat-header-cell *matHeaderCellDef> {{column}} </th>
+    <td mat-cell *matCellDef="let element"> {{element[column]}} </td>
+  </ng-container>
+
+  <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->
+  <ng-container matColumnDef="expandedDetail">
+    <td mat-cell *matCellDef="let element" [attr.colspan]="columnsToDisplay.length">
+      <div class="example-element-detail"
+           [@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'">
+        <div class="example-element-diagram">
+          <div class="example-element-position"> {{element.position}} </div>
+          <div class="example-element-symbol"> {{element.symbol}} </div>
+          <div class="example-element-name"> {{element.name}} </div>
+          <div class="example-element-weight"> {{element.weight}} </div>
+        </div>
+        <div class="example-element-description">
+          {{element.description}}
+          <span class="example-element-description-attribution"> -- Wikipedia </span>
+        </div>
+      </div>
+    </td>
+  </ng-container>
+
+  <tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
+  <tr mat-row *matRowDef="let element; columns: columnsToDisplay;"
+      class="example-element-row"
+      [class.example-expanded-row]="expandedElement === element"
+      (click)="expandedElement = 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
new file mode 100755
index 00000000..9d2b3b81
--- /dev/null
+++ b/src/assets/angular-material-examples/table-expandable-rows/table-expandable-rows-example.ts
@@ -0,0 +1,113 @@
+import {Component} from '@angular/core';
+import {animate, state, style, transition, trigger} from '@angular/animations';
+
+/**
+ * @title Table with expandable rows
+ */
+@Component({
+  selector: 'table-expandable-rows-example',
+  styleUrls: ['table-expandable-rows-example.css'],
+  templateUrl: 'table-expandable-rows-example.html',
+  animations: [
+    trigger('detailExpand', [
+      state('collapsed', style({height: '0px', minHeight: '0', display: 'none'})),
+      state('expanded', style({height: '*'})),
+      transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
+    ]),
+  ],
+})
+export class TableExpandableRowsExample {
+  dataSource = ELEMENT_DATA;
+  columnsToDisplay = ['name', 'weight', 'symbol', 'position'];
+  expandedElement: PeriodicElement;
+}
+
+export interface PeriodicElement {
+  name: string;
+  position: number;
+  weight: number;
+  symbol: string;
+  description: string;
+}
+
+const ELEMENT_DATA: PeriodicElement[] = [
+  {
+    position: 1,
+    name: 'Hydrogen',
+    weight: 1.0079,
+    symbol: 'H',
+    description: `Hydrogen is a chemical element with symbol H and atomic number 1. With a standard
+        atomic weight of 1.008, hydrogen is the lightest element on the periodic table.`
+  }, {
+    position: 2,
+    name: 'Helium',
+    weight: 4.0026,
+    symbol: 'He',
+    description: `Helium is a chemical element with symbol He and atomic number 2. It is a
+        colorless, odorless, tasteless, non-toxic, inert, monatomic gas, the first in the noble gas
+        group in the periodic table. Its boiling point is the lowest among all the elements.`
+  }, {
+    position: 3,
+    name: 'Lithium',
+    weight: 6.941,
+    symbol: 'Li',
+    description: `Lithium is a chemical element with symbol Li and atomic number 3. It is a soft,
+        silvery-white alkali metal. Under standard conditions, it is the lightest metal and the
+        lightest solid element.`
+  }, {
+    position: 4,
+    name: 'Beryllium',
+    weight: 9.0122,
+    symbol: 'Be',
+    description: `Beryllium is a chemical element with symbol Be and atomic number 4. It is a
+        relatively rare element in the universe, usually occurring as a product of the spallation of
+        larger atomic nuclei that have collided with cosmic rays.`
+  }, {
+    position: 5,
+    name: 'Boron',
+    weight: 10.811,
+    symbol: 'B',
+    description: `Boron is a chemical element with symbol B and atomic number 5. Produced entirely
+        by cosmic ray spallation and supernovae and not by stellar nucleosynthesis, it is a
+        low-abundance element in the Solar system and in the Earth's crust.`
+  }, {
+    position: 6,
+    name: 'Carbon',
+    weight: 12.0107,
+    symbol: 'C',
+    description: `Carbon is a chemical element with symbol C and atomic number 6. It is nonmetallic
+        and tetravalent—making four electrons available to form covalent chemical bonds. It belongs
+        to group 14 of the periodic table.`
+  }, {
+    position: 7,
+    name: 'Nitrogen',
+    weight: 14.0067,
+    symbol: 'N',
+    description: `Nitrogen is a chemical element with symbol N and atomic number 7. It was first
+        discovered and isolated by Scottish physician Daniel Rutherford in 1772.`
+  }, {
+    position: 8,
+    name: 'Oxygen',
+    weight: 15.9994,
+    symbol: 'O',
+    description: `Oxygen is a chemical element with symbol O and atomic number 8. It is a member of
+         the chalcogen group on the periodic table, a highly reactive nonmetal, and an oxidizing
+         agent that readily forms oxides with most elements as well as with other compounds.`
+  }, {
+    position: 9,
+    name: 'Fluorine',
+    weight: 18.9984,
+    symbol: 'F',
+    description: `Fluorine is a chemical element with symbol F and atomic number 9. It is the
+        lightest halogen and exists as a highly toxic pale yellow diatomic gas at standard
+        conditions.`
+  }, {
+    position: 10,
+    name: 'Neon',
+    weight: 20.1797,
+    symbol: 'Ne',
+    description: `Neon is a chemical element with symbol Ne and atomic number 10. It is a noble gas.
+        Neon is a colorless, odorless, inert monatomic gas under standard conditions, with about
+        two-thirds the density of air.`
+  },
+];
diff --git a/src/assets/angular-material-examples/table-filtering/table-filtering-example.css b/src/assets/angular-material-examples/table-filtering/table-filtering-example.css
index 67230469..2d9da922 100755
--- a/src/assets/angular-material-examples/table-filtering/table-filtering-example.css
+++ b/src/assets/angular-material-examples/table-filtering/table-filtering-example.css
@@ -1,15 +1,6 @@
 /* Structure */
-.example-container {
-  display: flex;
-  flex-direction: column;
-  min-width: 300px;
-  max-height: 500px;
-  overflow: auto;
-}
-
-.example-header {
-  min-height: 64px;
-  padding: 8px 24px 0;
+table {
+  width: 100%;
 }
 
 .mat-form-field {
diff --git a/src/assets/angular-material-examples/table-filtering/table-filtering-example.html b/src/assets/angular-material-examples/table-filtering/table-filtering-example.html
index cc529680..365537f9 100755
--- a/src/assets/angular-material-examples/table-filtering/table-filtering-example.html
+++ b/src/assets/angular-material-examples/table-filtering/table-filtering-example.html
@@ -1,11 +1,8 @@
-<div class="example-container mat-elevation-z8">
-  <div class="example-header">
     <mat-form-field>
       <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
     </mat-form-field>
-  </div>
 
-  <table mat-table #table [dataSource]="dataSource">
+<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
 
     <!-- Position Column -->
     <ng-container matColumnDef="position">
@@ -34,4 +31,3 @@
     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
     <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
   </table>
-</div>
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 3e9ccbb2..4b4800b1 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
@@ -20,14 +20,14 @@ export class TableFilteringExample {
   }
 }
 
-export interface Element {
+export interface PeriodicElement {
   name: string;
   position: number;
   weight: number;
   symbol: string;
 }
 
-const ELEMENT_DATA: Element[] = [
+const ELEMENT_DATA: PeriodicElement[] = [
   {position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
   {position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
   {position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
@@ -38,14 +38,4 @@ const ELEMENT_DATA: Element[] = [
   {position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O'},
   {position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'},
   {position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'},
-  {position: 11, name: 'Sodium', weight: 22.9897, symbol: 'Na'},
-  {position: 12, name: 'Magnesium', weight: 24.305, symbol: 'Mg'},
-  {position: 13, name: 'Aluminum', weight: 26.9815, symbol: 'Al'},
-  {position: 14, name: 'Silicon', weight: 28.0855, symbol: 'Si'},
-  {position: 15, name: 'Phosphorus', weight: 30.9738, symbol: 'P'},
-  {position: 16, name: 'Sulfur', weight: 32.065, symbol: 'S'},
-  {position: 17, name: 'Chlorine', weight: 35.453, symbol: 'Cl'},
-  {position: 18, name: 'Argon', weight: 39.948, symbol: 'Ar'},
-  {position: 19, name: 'Potassium', weight: 39.0983, symbol: 'K'},
-  {position: 20, name: 'Calcium', weight: 40.078, symbol: 'Ca'},
 ];
diff --git a/src/assets/angular-material-examples/table-footer-row/table-footer-row-example.css b/src/assets/angular-material-examples/table-footer-row/table-footer-row-example.css
index 8b311e6d..de64c6e5 100755
--- a/src/assets/angular-material-examples/table-footer-row/table-footer-row-example.css
+++ b/src/assets/angular-material-examples/table-footer-row/table-footer-row-example.css
@@ -1,11 +1,7 @@
-.example-container {
-  display: flex;
-  flex-direction: column;
-  max-height: 500px;
-  min-width: 300px;
+table {
+  width: 100%;
 }
 
-.mat-table {
-  overflow: auto;
-  max-height: 500px;
+tr.mat-footer-row {
+  font-weight: bold;
 }
diff --git a/src/assets/angular-material-examples/table-footer-row/table-footer-row-example.html b/src/assets/angular-material-examples/table-footer-row/table-footer-row-example.html
index 11aad5cd..bbf9c2c3 100755
--- a/src/assets/angular-material-examples/table-footer-row/table-footer-row-example.html
+++ b/src/assets/angular-material-examples/table-footer-row/table-footer-row-example.html
@@ -1,22 +1,19 @@
-<div class="example-container mat-elevation-z8">
-  <mat-table [dataSource]="transactions">
-
+<table mat-table [dataSource]="transactions" class="mat-elevation-z8">
     <!-- Item Column -->
     <ng-container matColumnDef="item">
-      <mat-header-cell *matHeaderCellDef> Item </mat-header-cell>
-      <mat-cell *matCellDef="let transaction"> {{transaction.item}} </mat-cell>
-      <mat-footer-cell *matFooterCellDef></mat-footer-cell>
+    <th mat-header-cell *matHeaderCellDef> Item </th>
+    <td mat-cell *matCellDef="let transaction"> {{transaction.item}} </td>
+    <td mat-footer-cell *matFooterCellDef> Total </td>
     </ng-container>
 
     <!-- Cost Column -->
     <ng-container matColumnDef="cost">
-      <mat-header-cell *matHeaderCellDef> Cost </mat-header-cell>
-      <mat-cell *matCellDef="let transaction"> {{transaction.cost | currency}} </mat-cell>
-      <mat-footer-cell *matFooterCellDef> getTotalCost() </mat-footer-cell>
+    <th mat-header-cell *matHeaderCellDef> Cost </th>
+    <td mat-cell *matCellDef="let transaction"> {{transaction.cost | currency}} </td>
+    <td mat-footer-cell *matFooterCellDef> {{getTotalCost() | currency}} </td>
     </ng-container>
 
-    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
-    <mat-footer-row *matFooterRowDef="displayedColumns"></mat-footer-row>
-  </mat-table>
-</div>
+  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+  <tr mat-footer-row *matFooterRowDef="displayedColumns"></tr>
+</table>
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 c2445f18..256f8028 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,19 +1,16 @@
 /* Structure */
 .example-container {
-  display: flex;
-  flex-direction: column;
-  min-width: 300px;
   position: relative;
-  max-height: 500px;
+}
+
+.example-table-container {
+  position: relative;
+  max-height: 400px;
   overflow: auto;
 }
 
-.example-header {
-  min-height: 64px;
-  display: flex;
-  align-items: center;
-  padding-left: 24px;
-  font-size: 20px;
+table {
+  width: 100%;
 }
 
 .example-loading-shade {
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 68799c35..ad80ff5d 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
@@ -7,12 +7,10 @@
     </div>
   </div>
 
-  <table mat-table #table [dataSource]="dataSource" class="example-table"
+  <div class="example-table-container">
+
+    <table mat-table [dataSource]="data" class="example-table"
              matSort matSortActive="created" matSortDisableClear matSortDirection="asc">
-
-    <!--- Note that these columns can be defined in any order.
-          The actual rendered columns are set as a property on the row definition" -->
-
     <!-- Number Column -->
     <ng-container matColumnDef="number">
       <th mat-header-cell *matHeaderCellDef>#</th>
@@ -33,9 +31,7 @@
 
     <!-- Created Column -->
     <ng-container matColumnDef="created">
-      <th mat-header-cell *matHeaderCellDef
-                       mat-sort-header
-                       disableClear="true">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear="true">
         Created
       </th>
       <td mat-cell *matCellDef="let row">{{ row.created_at | date }}</td>
@@ -44,7 +40,7 @@
     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
     <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
   </table>
+  </div>
 
-  <mat-paginator [length]="resultsLength" [pageSize]="30">
-  </mat-paginator>
+  <mat-paginator [length]="resultsLength" [pageSize]="30"></mat-paginator>
 </div>
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 f3aee68d..9475078b 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,6 @@
 import {HttpClient} from '@angular/common/http';
-import {AfterViewInit, Component, ViewChild} from '@angular/core';
-import {MatPaginator, MatSort, MatTableDataSource} from '@angular/material';
+import {Component, OnInit, ViewChild} from '@angular/core';
+import {MatPaginator, MatSort} from '@angular/material';
 import {merge, Observable, of as observableOf} from 'rxjs';
 import {catchError, map, startWith, switchMap} from 'rxjs/operators';
 
@@ -12,10 +12,10 @@ import {catchError, map, startWith, switchMap} from 'rxjs/operators';
   styleUrls: ['table-http-example.css'],
   templateUrl: 'table-http-example.html',
 })
-export class TableHttpExample implements AfterViewInit {
+export class TableHttpExample implements OnInit {
   displayedColumns = ['created', 'state', 'number', 'title'];
   exampleDatabase: ExampleHttpDao | null;
-  dataSource = new MatTableDataSource();
+  data: GithubIssue[] = [];
 
   resultsLength = 0;
   isLoadingResults = true;
@@ -26,7 +26,7 @@ export class TableHttpExample implements AfterViewInit {
 
   constructor(private http: HttpClient) {}
 
-  ngAfterViewInit() {
+  ngOnInit() {
     this.exampleDatabase = new ExampleHttpDao(this.http);
 
     // If the user changes the sort order, reset back to the first page.
@@ -54,7 +54,7 @@ export class TableHttpExample implements AfterViewInit {
           this.isRateLimitReached = true;
           return observableOf([]);
         })
-      ).subscribe(data => this.dataSource.data = data);
+      ).subscribe(data => this.data = data);
   }
 }
 
diff --git a/src/assets/angular-material-examples/table-multiple-header-footer/table-multiple-header-footer-example.css b/src/assets/angular-material-examples/table-multiple-header-footer/table-multiple-header-footer-example.css
new file mode 100755
index 00000000..8700a8af
--- /dev/null
+++ b/src/assets/angular-material-examples/table-multiple-header-footer/table-multiple-header-footer-example.css
@@ -0,0 +1,19 @@
+table {
+  width: 100%;
+}
+
+.example-first-header-row th {
+  border-bottom: none;
+}
+
+.example-second-header-row {
+  font-style: italic;
+}
+
+.example-first-footer-row {
+  font-weight: bold;
+}
+
+.example-second-footer-row td {
+  color: #900000;
+}
diff --git a/src/assets/angular-material-examples/table-multiple-header-footer/table-multiple-header-footer-example.html b/src/assets/angular-material-examples/table-multiple-header-footer/table-multiple-header-footer-example.html
new file mode 100755
index 00000000..04b5b162
--- /dev/null
+++ b/src/assets/angular-material-examples/table-multiple-header-footer/table-multiple-header-footer-example.html
@@ -0,0 +1,45 @@
+<table mat-table [dataSource]="transactions" class="mat-elevation-z8">
+  <!-- Item Column -->
+  <ng-container matColumnDef="item">
+    <th mat-header-cell *matHeaderCellDef> Item </th>
+    <td mat-cell *matCellDef="let transaction"> {{transaction.item}} </td>
+    <td mat-footer-cell *matFooterCellDef> Total </td>
+  </ng-container>
+
+  <!-- Cost Column -->
+  <ng-container matColumnDef="cost">
+    <th mat-header-cell *matHeaderCellDef> Cost </th>
+    <td mat-cell *matCellDef="let transaction"> {{transaction.cost | currency}} </td>
+    <td mat-footer-cell *matFooterCellDef> {{getTotalCost() | currency}} </td>
+  </ng-container>
+
+  <!-- Item Description Column -->
+  <ng-container matColumnDef="item-description">
+    <th mat-header-cell *matHeaderCellDef> Name of the item purchased </th>
+  </ng-container>
+
+  <!-- Cost Description Column -->
+  <ng-container matColumnDef="cost-description">
+    <th mat-header-cell *matHeaderCellDef> Cost of the item in USD </th>
+  </ng-container>
+
+  <!-- Disclaimer column -->
+  <ng-container matColumnDef="disclaimer">
+    <td mat-footer-cell *matFooterCellDef colspan="2">
+      Please note that the cost of items displayed are completely and totally made up.
+    </td>
+  </ng-container>
+
+  <!-- The table will render two header rows, one data row per data object, and two footer rows. -->
+  <tr mat-header-row *matHeaderRowDef="displayedColumns"
+      class="example-first-header-row">
+  </tr>
+  <tr mat-header-row *matHeaderRowDef="['item-description', 'cost-description']"
+      class="example-second-header-row">
+  </tr>
+
+  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+
+  <tr mat-footer-row *matFooterRowDef="displayedColumns" class="example-first-footer-row"></tr>
+  <tr mat-footer-row *matFooterRowDef="['disclaimer']" class="example-second-footer-row"></tr>
+</table>
diff --git a/src/assets/angular-material-examples/table-multiple-header-footer/table-multiple-header-footer-example.ts b/src/assets/angular-material-examples/table-multiple-header-footer/table-multiple-header-footer-example.ts
new file mode 100755
index 00000000..1832eb4b
--- /dev/null
+++ b/src/assets/angular-material-examples/table-multiple-header-footer/table-multiple-header-footer-example.ts
@@ -0,0 +1,32 @@
+import {Component} from '@angular/core';
+import {Transaction} from '../table-footer-row/table-footer-row-example';
+
+export interface Transaction {
+  item: string;
+  cost: number;
+}
+
+/**
+ * @title Table with multiple header and footer rows
+ */
+@Component({
+  selector: 'table-multiple-header-footer-example',
+  styleUrls: ['table-multiple-header-footer-example.css'],
+  templateUrl: 'table-multiple-header-footer-example.html',
+})
+export class TableMultipleHeaderFooterExample {
+  displayedColumns = ['item', 'cost'];
+  transactions: Transaction[] = [
+    {item: 'Beach ball', cost: 4},
+    {item: 'Towel', cost: 5},
+    {item: 'Frisbee', cost: 2},
+    {item: 'Sunscreen', cost: 4},
+    {item: 'Cooler', cost: 25},
+    {item: 'Swim suit', cost: 15},
+  ];
+
+  /** Gets the total cost of all transactions. */
+  getTotalCost() {
+    return this.transactions.map(t => t.cost).reduce((acc, value) => acc + value, 0);
+  }
+}
diff --git a/src/assets/angular-material-examples/table-native-only/table-native-only-example.css b/src/assets/angular-material-examples/table-native-only/table-native-only-example.css
deleted file mode 100755
index e69de29b..00000000
diff --git a/src/assets/angular-material-examples/table-native-only/table-native-only-example.html b/src/assets/angular-material-examples/table-native-only/table-native-only-example.html
deleted file mode 100755
index 0570e323..00000000
--- a/src/assets/angular-material-examples/table-native-only/table-native-only-example.html
+++ /dev/null
@@ -1,18 +0,0 @@
-<table class="mat-table">
-  <thead>
-    <tr class="mat-header-row">
-      <th class="mat-header-cell"> No. </th>
-      <th class="mat-header-cell"> Name </th>
-      <th class="mat-header-cell"> Weight </th>
-      <th class="mat-header-cell"> Symbol </th>
-    </tr>
-    </thead>
-  <tbody>
-    <tr class="mat-row" *ngFor="let element of elements">
-      <td class="mat-cell"> {{element.position}} </td>
-      <td class="mat-cell"> {{element.name}} </td>
-      <td class="mat-cell"> {{element.weight}} </td>
-      <td class="mat-cell"> {{element.symbol}} </td>
-    </tr>
-  </tbody>
-</table>
\ No newline at end of file
diff --git a/src/assets/angular-material-examples/table-native-only/table-native-only-example.ts b/src/assets/angular-material-examples/table-native-only/table-native-only-example.ts
deleted file mode 100755
index 7eb89185..00000000
--- a/src/assets/angular-material-examples/table-native-only/table-native-only-example.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import {Component} from '@angular/core';
-
-/**
- * @title Native `<table>` that only applies the Material styles
- */
-@Component({
-  selector: 'table-native-only-example',
-  styleUrls: ['table-native-only-example.css'],
-  templateUrl: 'table-native-only-example.html',
-})
-export class TableNativeOnlyExample {
-  elements = [
-    {position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
-    {position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
-    {position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
-    {position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'},
-    {position: 5, name: 'Boron', weight: 10.811, symbol: 'B'},
-  ];
-}
diff --git a/src/assets/angular-material-examples/table-overview/table-overview-example.css b/src/assets/angular-material-examples/table-overview/table-overview-example.css
index 1819289d..369cbec2 100755
--- a/src/assets/angular-material-examples/table-overview/table-overview-example.css
+++ b/src/assets/angular-material-examples/table-overview/table-overview-example.css
@@ -1,14 +1,5 @@
-.example-container {
-  display: flex;
-  flex-direction: column;
-  min-width: 300px;
-  max-height: 500px;
-  overflow: auto;
-}
-
-.example-header {
-  min-height: 64px;
-  padding: 8px 24px 0;
+table {
+  width: 100%;
 }
 
 .mat-form-field {
@@ -16,3 +7,6 @@
   width: 100%;
 }
 
+td, th {
+  width: 25%;
+}
diff --git a/src/assets/angular-material-examples/table-overview/table-overview-example.html b/src/assets/angular-material-examples/table-overview/table-overview-example.html
index c9eb65ec..e36a8657 100755
--- a/src/assets/angular-material-examples/table-overview/table-overview-example.html
+++ b/src/assets/angular-material-examples/table-overview/table-overview-example.html
@@ -1,11 +1,8 @@
-<div class="example-header">
   <mat-form-field>
     <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
   </mat-form-field>
-</div>
-
-<div class="example-container mat-elevation-z8">
 
+<div class="mat-elevation-z8">
   <table mat-table [dataSource]="dataSource" matSort>
 
     <!-- ID Column -->
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 4d807e2d..9e58578d 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,4 +1,4 @@
-import {Component, ViewChild} from '@angular/core';
+import {Component, OnInit, ViewChild} from '@angular/core';
 import {MatPaginator, MatSort, MatTableDataSource} from '@angular/material';
 
 /**
@@ -9,7 +9,7 @@ import {MatPaginator, MatSort, MatTableDataSource} from '@angular/material';
   styleUrls: ['table-overview-example.css'],
   templateUrl: 'table-overview-example.html',
 })
-export class TableOverviewExample {
+export class TableOverviewExample implements OnInit {
   displayedColumns = ['id', 'name', 'progress', 'color'];
   dataSource: MatTableDataSource<UserData>;
 
@@ -34,6 +34,9 @@ export class TableOverviewExample {
     filterValue = filterValue.trim(); // Remove whitespace
     filterValue = filterValue.toLowerCase(); // Datasource defaults to lowercase matches
     this.dataSource.filter = filterValue;
+    if (this.dataSource.paginator) {
+      this.dataSource.paginator.firstPage();
+    }
   }
 }
 
diff --git a/src/assets/angular-material-examples/table-pagination/table-pagination-example.css b/src/assets/angular-material-examples/table-pagination/table-pagination-example.css
index 8e156acf..1922e7ff 100755
--- a/src/assets/angular-material-examples/table-pagination/table-pagination-example.css
+++ b/src/assets/angular-material-examples/table-pagination/table-pagination-example.css
@@ -1,8 +1,3 @@
-.example-container {
-  display: flex;
-  flex-direction: column;
-  min-width: 300px;
-  max-height: 500px;
-  overflow: auto;
+table {
+  width: 100%;
 }
-
diff --git a/src/assets/angular-material-examples/table-pagination/table-pagination-example.html b/src/assets/angular-material-examples/table-pagination/table-pagination-example.html
index bfacadd5..a410ebbe 100755
--- a/src/assets/angular-material-examples/table-pagination/table-pagination-example.html
+++ b/src/assets/angular-material-examples/table-pagination/table-pagination-example.html
@@ -1,5 +1,5 @@
-<div class="example-container mat-elevation-z8">
-  <table mat-table #table [dataSource]="dataSource">
+<div class="mat-elevation-z8">
+  <table mat-table [dataSource]="dataSource">
 
     <!-- Position Column -->
     <ng-container matColumnDef="position">
@@ -29,9 +29,5 @@
     <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
   </table>
 
-  <mat-paginator #paginator
-                 [pageSize]="10"
-                 [pageSizeOptions]="[5, 10, 20]"
-                 [showFirstLastButtons]="true">
-  </mat-paginator>
+  <mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
 </div>
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 2d10a411..6a4e03c5 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,4 +1,4 @@
-import {Component, ViewChild} from '@angular/core';
+import {Component, OnInit, ViewChild} from '@angular/core';
 import {MatPaginator, MatTableDataSource} from '@angular/material';
 
 /**
@@ -9,9 +9,9 @@ import {MatPaginator, MatTableDataSource} from '@angular/material';
   styleUrls: ['table-pagination-example.css'],
   templateUrl: 'table-pagination-example.html',
 })
-export class TablePaginationExample {
+export class TablePaginationExample implements OnInit {
   displayedColumns = ['position', 'name', 'weight', 'symbol'];
-  dataSource = new MatTableDataSource<Element>(ELEMENT_DATA);
+  dataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);
 
   @ViewChild(MatPaginator) paginator: MatPaginator;
 
@@ -20,14 +20,14 @@ export class TablePaginationExample {
   }
 }
 
-export interface Element {
+export interface PeriodicElement {
   name: string;
   position: number;
   weight: number;
   symbol: string;
 }
 
-const ELEMENT_DATA: Element[] = [
+const ELEMENT_DATA: PeriodicElement[] = [
   {position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
   {position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
   {position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
diff --git a/src/assets/angular-material-examples/table-row-context/table-row-context-example.css b/src/assets/angular-material-examples/table-row-context/table-row-context-example.css
new file mode 100755
index 00000000..1922e7ff
--- /dev/null
+++ b/src/assets/angular-material-examples/table-row-context/table-row-context-example.css
@@ -0,0 +1,3 @@
+table {
+  width: 100%;
+}
diff --git a/src/assets/angular-material-examples/table-row-context/table-row-context-example.html b/src/assets/angular-material-examples/table-row-context/table-row-context-example.html
new file mode 100755
index 00000000..3f3d776e
--- /dev/null
+++ b/src/assets/angular-material-examples/table-row-context/table-row-context-example.html
@@ -0,0 +1,46 @@
+<table mat-table [dataSource]="data" class="mat-elevation-z8">
+  <!-- Index Column -->
+  <ng-container matColumnDef="$implicit">
+    <th mat-header-cell *matHeaderCellDef> $implicit </th>
+    <td mat-cell *matCellDef="let data"> {{data}} </td>
+  </ng-container>
+
+  <!-- Index Column -->
+  <ng-container matColumnDef="index">
+    <th mat-header-cell *matHeaderCellDef> index </th>
+    <td mat-cell *matCellDef="let index = index"> {{index}} </td>
+  </ng-container>
+
+  <!-- Index Column -->
+  <ng-container matColumnDef="count">
+    <th mat-header-cell *matHeaderCellDef> count </th>
+    <td mat-cell *matCellDef="let count = count"> {{count}} </td>
+  </ng-container>
+
+  <!-- Index Column -->
+  <ng-container matColumnDef="first">
+    <th mat-header-cell *matHeaderCellDef> first </th>
+    <td mat-cell *matCellDef="let first = first"> {{first}} </td>
+  </ng-container>
+
+  <!-- Index Column -->
+  <ng-container matColumnDef="last">
+    <th mat-header-cell *matHeaderCellDef> last </th>
+    <td mat-cell *matCellDef="let last = last"> {{last}} </td>
+  </ng-container>
+
+  <!-- Index Column -->
+  <ng-container matColumnDef="even">
+    <th mat-header-cell *matHeaderCellDef> even </th>
+    <td mat-cell *matCellDef="let even = even"> {{even}} </td>
+  </ng-container>
+
+  <!-- Index Column -->
+  <ng-container matColumnDef="odd">
+    <th mat-header-cell *matHeaderCellDef> odd </th>
+    <td mat-cell *matCellDef="let odd = odd"> {{odd}} </td>
+  </ng-container>
+
+  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+</table>
diff --git a/src/assets/angular-material-examples/table-row-context/table-row-context-example.ts b/src/assets/angular-material-examples/table-row-context/table-row-context-example.ts
new file mode 100755
index 00000000..7799dd05
--- /dev/null
+++ b/src/assets/angular-material-examples/table-row-context/table-row-context-example.ts
@@ -0,0 +1,14 @@
+import {Component} from '@angular/core';
+
+/**
+ * @title Table showing each row context properties.
+ */
+@Component({
+  selector: 'table-row-context-example',
+  styleUrls: ['table-row-context-example.css'],
+  templateUrl: 'table-row-context-example.html',
+})
+export class TableRowContextExample {
+  displayedColumns = ['$implicit', 'index', 'count', 'first', 'last', 'even', 'odd'];
+  data: string[] = ['one', 'two', 'three', 'four', 'five'];
+}
diff --git a/src/assets/angular-material-examples/table-selection/table-selection-example.css b/src/assets/angular-material-examples/table-selection/table-selection-example.css
index fd79d00f..1922e7ff 100755
--- a/src/assets/angular-material-examples/table-selection/table-selection-example.css
+++ b/src/assets/angular-material-examples/table-selection/table-selection-example.css
@@ -1,11 +1,3 @@
-.example-container {
-  display: flex;
-  flex-direction: column;
-  max-height: 500px;
-  min-width: 300px;
-  overflow: auto;
-}
-
-.mat-column-select {
-  overflow: visible;
+table {
+  width: 100%;
 }
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 31ef280a..c8af8133 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
@@ -1,5 +1,4 @@
-<div class="example-container mat-elevation-z8">
-  <table mat-table #table [dataSource]="dataSource">
+<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
 
     <!-- Checkbox Column -->
     <ng-container matColumnDef="select">
@@ -46,4 +45,3 @@
              (click)="selection.toggle(row)">
     </tr>
   </table>
-</div>
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 88e72ead..cee88c81 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
@@ -12,8 +12,8 @@ import {SelectionModel} from '@angular/cdk/collections';
 })
 export class TableSelectionExample {
   displayedColumns = ['select', 'position', 'name', 'weight', 'symbol'];
-  dataSource = new MatTableDataSource<Element>(ELEMENT_DATA);
-  selection = new SelectionModel<Element>(true, []);
+  dataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);
+  selection = new SelectionModel<PeriodicElement>(true, []);
 
   /** Whether the number of selected elements matches the total number of rows. */
   isAllSelected() {
@@ -30,14 +30,14 @@ export class TableSelectionExample {
   }
 }
 
-export interface Element {
+export interface PeriodicElement {
   name: string;
   position: number;
   weight: number;
   symbol: string;
 }
 
-const ELEMENT_DATA: Element[] = [
+const ELEMENT_DATA: PeriodicElement[] = [
   {position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
   {position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
   {position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
@@ -48,14 +48,4 @@ const ELEMENT_DATA: Element[] = [
   {position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O'},
   {position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'},
   {position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'},
-  {position: 11, name: 'Sodium', weight: 22.9897, symbol: 'Na'},
-  {position: 12, name: 'Magnesium', weight: 24.305, symbol: 'Mg'},
-  {position: 13, name: 'Aluminum', weight: 26.9815, symbol: 'Al'},
-  {position: 14, name: 'Silicon', weight: 28.0855, symbol: 'Si'},
-  {position: 15, name: 'Phosphorus', weight: 30.9738, symbol: 'P'},
-  {position: 16, name: 'Sulfur', weight: 32.065, symbol: 'S'},
-  {position: 17, name: 'Chlorine', weight: 35.453, symbol: 'Cl'},
-  {position: 18, name: 'Argon', weight: 39.948, symbol: 'Ar'},
-  {position: 19, name: 'Potassium', weight: 39.0983, symbol: 'K'},
-  {position: 20, name: 'Calcium', weight: 40.078, symbol: 'Ca'},
 ];
diff --git a/src/assets/angular-material-examples/table-sorting/table-sorting-example.css b/src/assets/angular-material-examples/table-sorting/table-sorting-example.css
index 342b186a..11b40820 100755
--- a/src/assets/angular-material-examples/table-sorting/table-sorting-example.css
+++ b/src/assets/angular-material-examples/table-sorting/table-sorting-example.css
@@ -1,11 +1,7 @@
-.example-container {
-  display: flex;
-  flex-direction: column;
-  min-width: 300px;
-  overflow: auto;
-  max-height: 500px;
+table {
+  width: 100%;
 }
 
-.mat-header-cell.mat-sort-header-sorted {
+th.mat-sort-header-sorted {
   color: black;
 }
diff --git a/src/assets/angular-material-examples/table-sorting/table-sorting-example.html b/src/assets/angular-material-examples/table-sorting/table-sorting-example.html
index 00a89980..30548862 100755
--- a/src/assets/angular-material-examples/table-sorting/table-sorting-example.html
+++ b/src/assets/angular-material-examples/table-sorting/table-sorting-example.html
@@ -1,5 +1,4 @@
-<div class="example-container mat-elevation-z8">
-  <table mat-table #table [dataSource]="dataSource" matSort>
+<table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">
 
     <!-- Position Column -->
     <ng-container matColumnDef="position">
@@ -28,4 +27,3 @@
     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
     <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
   </table>
-</div>
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 d7c5a196..8878e744 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,5 @@
-import {Component, ViewChild} from '@angular/core';
-import {MatTableDataSource, MatSort} from '@angular/material';
+import {Component, OnInit, ViewChild} from '@angular/core';
+import {MatSort, MatTableDataSource} from '@angular/material';
 
 /**
  * @title Table with sorting
@@ -9,7 +9,7 @@ import {MatTableDataSource, MatSort} from '@angular/material';
   styleUrls: ['table-sorting-example.css'],
   templateUrl: 'table-sorting-example.html',
 })
-export class TableSortingExample {
+export class TableSortingExample implements OnInit {
   displayedColumns = ['position', 'name', 'weight', 'symbol'];
   dataSource = new MatTableDataSource(ELEMENT_DATA);
 
@@ -20,14 +20,14 @@ export class TableSortingExample {
   }
 }
 
-export interface Element {
+export interface PeriodicElement {
   name: string;
   position: number;
   weight: number;
   symbol: string;
 }
 
-const ELEMENT_DATA: Element[] = [
+const ELEMENT_DATA: PeriodicElement[] = [
   {position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
   {position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
   {position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
@@ -38,14 +38,4 @@ const ELEMENT_DATA: Element[] = [
   {position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O'},
   {position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'},
   {position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'},
-  {position: 11, name: 'Sodium', weight: 22.9897, symbol: 'Na'},
-  {position: 12, name: 'Magnesium', weight: 24.305, symbol: 'Mg'},
-  {position: 13, name: 'Aluminum', weight: 26.9815, symbol: 'Al'},
-  {position: 14, name: 'Silicon', weight: 28.0855, symbol: 'Si'},
-  {position: 15, name: 'Phosphorus', weight: 30.9738, symbol: 'P'},
-  {position: 16, name: 'Sulfur', weight: 32.065, symbol: 'S'},
-  {position: 17, name: 'Chlorine', weight: 35.453, symbol: 'Cl'},
-  {position: 18, name: 'Argon', weight: 39.948, symbol: 'Ar'},
-  {position: 19, name: 'Potassium', weight: 39.0983, symbol: 'K'},
-  {position: 20, name: 'Calcium', weight: 40.078, symbol: 'Ca'},
 ];
diff --git a/src/assets/angular-material-examples/table-sticky-columns/table-sticky-columns-example.css b/src/assets/angular-material-examples/table-sticky-columns/table-sticky-columns-example.css
new file mode 100755
index 00000000..d0ad2766
--- /dev/null
+++ b/src/assets/angular-material-examples/table-sticky-columns/table-sticky-columns-example.css
@@ -0,0 +1,26 @@
+.example-container {
+  height: 400px;
+  width: 550px;
+  overflow: auto;
+}
+
+table {
+  width: 800px;
+}
+
+td.mat-column-star {
+  width: 20px;
+  padding-right: 8px;
+}
+
+th.mat-column-position, td.mat-column-position {
+  padding-left: 8px;
+}
+
+.mat-table-sticky:first-child {
+  border-right: 1px solid #e0e0e0;
+}
+
+.mat-table-sticky:last-child {
+  border-left: 1px solid #e0e0e0;
+}
diff --git a/src/assets/angular-material-examples/table-sticky-columns/table-sticky-columns-example.html b/src/assets/angular-material-examples/table-sticky-columns/table-sticky-columns-example.html
new file mode 100755
index 00000000..73b460f5
--- /dev/null
+++ b/src/assets/angular-material-examples/table-sticky-columns/table-sticky-columns-example.html
@@ -0,0 +1,39 @@
+<div class="example-container mat-elevation-z8">
+  <table mat-table [dataSource]="dataSource">
+
+    <!-- Name Column -->
+    <ng-container matColumnDef="name" sticky>
+      <th mat-header-cell *matHeaderCellDef> Name </th>
+      <td mat-cell *matCellDef="let element"> {{element.name}} </td>
+    </ng-container>
+
+    <!-- Position Column -->
+    <ng-container matColumnDef="position">
+      <th mat-header-cell *matHeaderCellDef> No. </th>
+      <td mat-cell *matCellDef="let element"> {{element.position}} </td>
+    </ng-container>
+
+    <!-- Weight Column -->
+    <ng-container matColumnDef="weight">
+      <th mat-header-cell *matHeaderCellDef> Weight </th>
+      <td mat-cell *matCellDef="let element"> {{element.weight}} </td>
+    </ng-container>
+
+    <!-- Symbol Column -->
+    <ng-container matColumnDef="symbol">
+      <th mat-header-cell *matHeaderCellDef> Symbol </th>
+      <td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
+    </ng-container>
+
+    <!-- Star Column -->
+    <ng-container matColumnDef="star" stickyEnd>
+      <th mat-header-cell *matHeaderCellDef></th>
+      <td mat-cell *matCellDef="let element">
+        <mat-icon>more_vert</mat-icon>
+      </td>
+    </ng-container>
+
+    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+  </table>
+</div>
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
new file mode 100755
index 00000000..7b1c84b4
--- /dev/null
+++ b/src/assets/angular-material-examples/table-sticky-columns/table-sticky-columns-example.ts
@@ -0,0 +1,35 @@
+import {Component} from '@angular/core';
+
+/**
+ * @title Table with a sticky columns
+ */
+@Component({
+  selector: 'table-sticky-columns-example',
+  styleUrls: ['table-sticky-columns-example.css'],
+  templateUrl: 'table-sticky-columns-example.html',
+})
+export class TableStickyColumnsExample {
+  displayedColumns =
+      ['name', 'position', 'weight', 'symbol', 'position', 'weight', 'symbol', 'star'];
+  dataSource = ELEMENT_DATA;
+}
+
+export interface PeriodicElement {
+  name: string;
+  position: number;
+  weight: number;
+  symbol: string;
+}
+
+const ELEMENT_DATA: PeriodicElement[] = [
+  {position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
+  {position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
+  {position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
+  {position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'},
+  {position: 5, name: 'Boron', weight: 10.811, symbol: 'B'},
+  {position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C'},
+  {position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N'},
+  {position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O'},
+  {position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'},
+  {position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'},
+];
diff --git a/src/assets/angular-material-examples/table-sticky-complex-flex/table-sticky-complex-flex-example.css b/src/assets/angular-material-examples/table-sticky-complex-flex/table-sticky-complex-flex-example.css
new file mode 100755
index 00000000..8e5c53c5
--- /dev/null
+++ b/src/assets/angular-material-examples/table-sticky-complex-flex/table-sticky-complex-flex-example.css
@@ -0,0 +1,28 @@
+.example-container {
+  height: 400px;
+  overflow: auto;
+}
+
+.mat-table-sticky {
+  background: #59abfd;
+  opacity: 1;
+}
+
+.example-sticky-toggle-group {
+  margin: 8px;
+}
+
+.mat-column-filler {
+  padding: 0 8px;
+  font-size: 10px;
+  text-align: center;
+}
+
+.mat-header-cell, .mat-footer-cell, .mat-cell {
+  min-width: 80px;
+  box-sizing: border-box;
+}
+
+.mat-header-row, .mat-footer-row, .mat-row {
+  min-width: 1920px; /* 24 columns, 80px each */
+}
diff --git a/src/assets/angular-material-examples/table-sticky-complex-flex/table-sticky-complex-flex-example.html b/src/assets/angular-material-examples/table-sticky-complex-flex/table-sticky-complex-flex-example.html
new file mode 100755
index 00000000..c403cd0b
--- /dev/null
+++ b/src/assets/angular-material-examples/table-sticky-complex-flex/table-sticky-complex-flex-example.html
@@ -0,0 +1,78 @@
+<div>
+  <button mat-raised-button (click)="tables.push(tables.length)">Add table</button>
+  <button mat-raised-button (click)="tables.pop()">Remove table</button>
+</div>
+
+<div>
+  Sticky Headers:
+  <mat-button-toggle-group multiple [value]="['header-1']"
+                           #stickyHeaders="matButtonToggleGroup"
+                           class="example-sticky-toggle-group">
+    <mat-button-toggle value="header-1"> Row 1 </mat-button-toggle>
+    <mat-button-toggle value="header-2"> Row 2 </mat-button-toggle>
+  </mat-button-toggle-group>
+</div>
+
+<div>
+  Sticky Footers:
+  <mat-button-toggle-group multiple [value]="['footer-1']"
+                           #stickyFooters="matButtonToggleGroup"
+                           class="example-sticky-toggle-group">
+    <mat-button-toggle value="footer-1"> Row 1 </mat-button-toggle>
+    <mat-button-toggle value="footer-2"> Row 2 </mat-button-toggle>
+  </mat-button-toggle-group>
+</div>
+
+<div>
+  Sticky Columns:
+  <mat-button-toggle-group multiple [value]="['position', 'symbol']"
+                           #stickyColumns="matButtonToggleGroup"
+                           class="example-sticky-toggle-group">
+    <mat-button-toggle value="position"> Position </mat-button-toggle>
+    <mat-button-toggle value="name"> Name </mat-button-toggle>
+    <mat-button-toggle value="weight"> Weight </mat-button-toggle>
+    <mat-button-toggle value="symbol"> Symbol </mat-button-toggle>
+  </mat-button-toggle-group>
+</div>
+
+<div class="example-container mat-elevation-z8">
+  <mat-table [dataSource]="dataSource" *ngFor="let table of tables">
+    <ng-container matColumnDef="position" [sticky]="isSticky(stickyColumns, 'position')">
+      <mat-header-cell *matHeaderCellDef> Position </mat-header-cell>
+      <mat-cell *matCellDef="let element"> {{element.position}} </mat-cell>
+      <mat-footer-cell *matFooterCellDef> Position Footer </mat-footer-cell>
+    </ng-container>
+
+    <ng-container matColumnDef="name" [sticky]="isSticky(stickyColumns, 'name')">
+      <mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
+      <mat-cell *matCellDef="let element"> {{element.name}} </mat-cell>
+      <mat-footer-cell *matFooterCellDef> Name Footer </mat-footer-cell>
+    </ng-container>
+
+    <ng-container matColumnDef="weight" [stickyEnd]="isSticky(stickyColumns, 'weight')">
+      <mat-header-cell *matHeaderCellDef> Weight </mat-header-cell>
+      <mat-cell *matCellDef="let element"> {{element.weight}} </mat-cell>
+      <mat-footer-cell *matFooterCellDef> Weight Footer </mat-footer-cell>
+    </ng-container>
+
+    <ng-container matColumnDef="symbol" [stickyEnd]="isSticky(stickyColumns, 'symbol')">
+      <mat-header-cell *matHeaderCellDef> Symbol </mat-header-cell>
+      <mat-cell *matCellDef="let element"> {{element.symbol}} </mat-cell>
+      <mat-footer-cell *matFooterCellDef> Symbol Footer </mat-footer-cell>
+    </ng-container>
+
+    <ng-container matColumnDef="filler">
+      <mat-header-cell *matHeaderCellDef> Filler header cell </mat-header-cell>
+      <mat-cell *matCellDef="let element"> Filler data cell </mat-cell>
+      <mat-footer-cell *matFooterCellDef> Filler footer cell </mat-footer-cell>
+    </ng-container>
+
+    <mat-header-row *matHeaderRowDef="displayedColumns; sticky: isSticky(stickyHeaders, 'header-1')"></mat-header-row>
+    <mat-header-row *matHeaderRowDef="displayedColumns; sticky: isSticky(stickyHeaders, 'header-2')"></mat-header-row>
+
+    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
+
+    <mat-footer-row *matFooterRowDef="displayedColumns; sticky: isSticky(stickyFooters, 'footer-1')"></mat-footer-row>
+    <mat-footer-row *matFooterRowDef="displayedColumns; sticky: isSticky(stickyFooters, 'footer-2')"></mat-footer-row>
+  </mat-table>
+</div>
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
new file mode 100755
index 00000000..8882ca5e
--- /dev/null
+++ b/src/assets/angular-material-examples/table-sticky-complex-flex/table-sticky-complex-flex-example.ts
@@ -0,0 +1,53 @@
+import {Component} from '@angular/core';
+import {MatButtonToggleGroup} from '@angular/material';
+
+/**
+ * @title Flex-layout tables with toggle-able sticky headers, footers, and columns
+ */
+@Component({
+  selector: 'table-sticky-complex-flex-example',
+  styleUrls: ['table-sticky-complex-flex-example.css'],
+  templateUrl: 'table-sticky-complex-flex-example.html',
+})
+export class TableStickyComplexFlexExample {
+  displayedColumns: string[] = [];
+  dataSource = ELEMENT_DATA;
+
+  tables = [0];
+
+  constructor() {
+    this.displayedColumns.length = 24;
+    this.displayedColumns.fill('filler');
+
+    // The first two columns should be position and name; the last two columns: weight, symbol
+    this.displayedColumns[0] = 'position';
+    this.displayedColumns[1] = 'name';
+    this.displayedColumns[22] = 'weight';
+    this.displayedColumns[23] = 'symbol';
+  }
+
+  /** Whether the button toggle group contains the id as an active value. */
+  isSticky(buttonToggleGroup: MatButtonToggleGroup, id: string) {
+    return (buttonToggleGroup.value || []).indexOf(id) !== -1;
+  }
+}
+
+export interface PeriodicElement {
+  name: string;
+  position: number;
+  weight: number;
+  symbol: string;
+}
+
+const ELEMENT_DATA: PeriodicElement[] = [
+  {position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
+  {position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
+  {position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
+  {position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'},
+  {position: 5, name: 'Boron', weight: 10.811, symbol: 'B'},
+  {position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C'},
+  {position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N'},
+  {position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O'},
+  {position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'},
+  {position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'},
+];
diff --git a/src/assets/angular-material-examples/table-sticky-complex/table-sticky-complex-example.css b/src/assets/angular-material-examples/table-sticky-complex/table-sticky-complex-example.css
new file mode 100755
index 00000000..d3edcb38
--- /dev/null
+++ b/src/assets/angular-material-examples/table-sticky-complex/table-sticky-complex-example.css
@@ -0,0 +1,24 @@
+.example-container {
+  height: 400px;
+  overflow: auto;
+}
+
+.mat-table-sticky {
+  background: #59abfd;
+  opacity: 1;
+}
+
+.example-sticky-toggle-group {
+  margin: 8px;
+}
+
+.mat-column-filler {
+  padding: 0 8px;
+  font-size: 10px;
+  text-align: center;
+}
+
+.mat-header-cell, .mat-footer-cell, .mat-cell {
+  min-width: 80px;
+  box-sizing: border-box;
+}
diff --git a/src/assets/angular-material-examples/table-sticky-complex/table-sticky-complex-example.html b/src/assets/angular-material-examples/table-sticky-complex/table-sticky-complex-example.html
new file mode 100755
index 00000000..24944cae
--- /dev/null
+++ b/src/assets/angular-material-examples/table-sticky-complex/table-sticky-complex-example.html
@@ -0,0 +1,78 @@
+<div>
+  <button mat-raised-button (click)="tables.push(tables.length)">Add table</button>
+  <button mat-raised-button (click)="tables.pop()">Remove table</button>
+</div>
+
+<div>
+  Sticky Headers:
+  <mat-button-toggle-group multiple [value]="['header-1']"
+                           #stickyHeaders="matButtonToggleGroup"
+                           class="example-sticky-toggle-group">
+    <mat-button-toggle value="header-1"> Row 1 </mat-button-toggle>
+    <mat-button-toggle value="header-2"> Row 2 </mat-button-toggle>
+  </mat-button-toggle-group>
+</div>
+
+<div>
+  Sticky Footers:
+  <mat-button-toggle-group multiple [value]="['footer-1']"
+                           #stickyFooters="matButtonToggleGroup"
+                           class="example-sticky-toggle-group">
+    <mat-button-toggle value="footer-1"> Row 1 </mat-button-toggle>
+    <mat-button-toggle value="footer-2"> Row 2 </mat-button-toggle>
+  </mat-button-toggle-group>
+</div>
+
+<div>
+  Sticky Columns:
+  <mat-button-toggle-group multiple [value]="['position', 'symbol']"
+                           #stickyColumns="matButtonToggleGroup"
+                           class="example-sticky-toggle-group">
+    <mat-button-toggle value="position"> Position </mat-button-toggle>
+    <mat-button-toggle value="name"> Name </mat-button-toggle>
+    <mat-button-toggle value="weight"> Weight </mat-button-toggle>
+    <mat-button-toggle value="symbol"> Symbol </mat-button-toggle>
+  </mat-button-toggle-group>
+</div>
+
+<div class="example-container mat-elevation-z8">
+  <table mat-table [dataSource]="dataSource" *ngFor="let table of tables">
+    <ng-container matColumnDef="position" [sticky]="isSticky(stickyColumns, 'position')">
+      <th mat-header-cell *matHeaderCellDef> Position </th>
+      <td mat-cell *matCellDef="let element"> {{element.position}} </td>
+      <td mat-footer-cell *matFooterCellDef> Position Footer </td>
+    </ng-container>
+
+    <ng-container matColumnDef="name" [sticky]="isSticky(stickyColumns, 'name')">
+      <th mat-header-cell *matHeaderCellDef> Name </th>
+      <td mat-cell *matCellDef="let element"> {{element.name}} </td>
+      <td mat-footer-cell *matFooterCellDef> Name Footer </td>
+    </ng-container>
+
+    <ng-container matColumnDef="weight" [stickyEnd]="isSticky(stickyColumns, 'weight')">
+      <th mat-header-cell *matHeaderCellDef> Weight </th>
+      <td mat-cell *matCellDef="let element"> {{element.weight}} </td>
+      <td mat-footer-cell *matFooterCellDef> Weight Footer </td>
+    </ng-container>
+
+    <ng-container matColumnDef="symbol" [stickyEnd]="isSticky(stickyColumns, 'symbol')">
+      <th mat-header-cell *matHeaderCellDef> Symbol </th>
+      <td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
+      <td mat-footer-cell *matFooterCellDef> Symbol Footer </td>
+    </ng-container>
+
+    <ng-container matColumnDef="filler">
+      <th mat-header-cell *matHeaderCellDef> Filler header cell </th>
+      <td mat-cell *matCellDef="let element"> Filler data cell </td>
+      <td mat-footer-cell *matFooterCellDef> Filler footer cell </td>
+    </ng-container>
+
+    <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: isSticky(stickyHeaders, 'header-1')"></tr>
+    <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: isSticky(stickyHeaders, 'header-2')"></tr>
+
+    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+
+    <tr mat-footer-row *matFooterRowDef="displayedColumns; sticky: isSticky(stickyFooters, 'footer-1')"></tr>
+    <tr mat-footer-row *matFooterRowDef="displayedColumns; sticky: isSticky(stickyFooters, 'footer-2')"></tr>
+  </table>
+</div>
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
new file mode 100755
index 00000000..912d9ad9
--- /dev/null
+++ b/src/assets/angular-material-examples/table-sticky-complex/table-sticky-complex-example.ts
@@ -0,0 +1,53 @@
+import {Component} from '@angular/core';
+import {MatButtonToggleGroup} from '@angular/material';
+
+/**
+ * @title Tables with toggle-able sticky headers, footers, and columns
+ */
+@Component({
+  selector: 'table-sticky-complex-example',
+  styleUrls: ['table-sticky-complex-example.css'],
+  templateUrl: 'table-sticky-complex-example.html',
+})
+export class TableStickyComplexExample {
+  displayedColumns: string[] = [];
+  dataSource = ELEMENT_DATA;
+
+  tables = [0];
+
+  constructor() {
+    this.displayedColumns.length = 24;
+    this.displayedColumns.fill('filler');
+
+    // The first two columns should be position and name; the last two columns: weight, symbol
+    this.displayedColumns[0] = 'position';
+    this.displayedColumns[1] = 'name';
+    this.displayedColumns[22] = 'weight';
+    this.displayedColumns[23] = 'symbol';
+  }
+
+  /** Whether the button toggle group contains the id as an active value. */
+  isSticky(buttonToggleGroup: MatButtonToggleGroup, id: string) {
+    return (buttonToggleGroup.value || []).indexOf(id) !== -1;
+  }
+}
+
+export interface PeriodicElement {
+  name: string;
+  position: number;
+  weight: number;
+  symbol: string;
+}
+
+const ELEMENT_DATA: PeriodicElement[] = [
+  {position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
+  {position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
+  {position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
+  {position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'},
+  {position: 5, name: 'Boron', weight: 10.811, symbol: 'B'},
+  {position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C'},
+  {position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N'},
+  {position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O'},
+  {position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'},
+  {position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'},
+];
diff --git a/src/assets/angular-material-examples/table-sticky-footer/table-sticky-footer-example.css b/src/assets/angular-material-examples/table-sticky-footer/table-sticky-footer-example.css
new file mode 100755
index 00000000..6b5869e7
--- /dev/null
+++ b/src/assets/angular-material-examples/table-sticky-footer/table-sticky-footer-example.css
@@ -0,0 +1,16 @@
+.example-container {
+  height: 270px;
+  overflow: auto;
+}
+
+table {
+  width: 100%;
+}
+
+tr.mat-footer-row {
+  font-weight: bold;
+}
+
+.mat-table-sticky {
+  border-top: 1px solid #e0e0e0;
+}
diff --git a/src/assets/angular-material-examples/table-sticky-footer/table-sticky-footer-example.html b/src/assets/angular-material-examples/table-sticky-footer/table-sticky-footer-example.html
new file mode 100755
index 00000000..7f4a2681
--- /dev/null
+++ b/src/assets/angular-material-examples/table-sticky-footer/table-sticky-footer-example.html
@@ -0,0 +1,21 @@
+<div class="example-container mat-elevation-z8">
+  <table mat-table [dataSource]="transactions">
+    <!-- Item Column -->
+    <ng-container matColumnDef="item">
+      <th mat-header-cell *matHeaderCellDef> Item </th>
+      <td mat-cell *matCellDef="let transaction"> {{transaction.item}} </td>
+      <td mat-footer-cell *matFooterCellDef> Total </td>
+    </ng-container>
+
+    <!-- Cost Column -->
+    <ng-container matColumnDef="cost">
+      <th mat-header-cell *matHeaderCellDef> Cost </th>
+      <td mat-cell *matCellDef="let transaction"> {{transaction.cost | currency}} </td>
+      <td mat-footer-cell *matFooterCellDef> {{getTotalCost() | currency}} </td>
+    </ng-container>
+
+    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+    <tr mat-footer-row *matFooterRowDef="displayedColumns sticky: true"></tr>
+  </table>
+</div>
\ No newline at end of file
diff --git a/src/assets/angular-material-examples/table-sticky-footer/table-sticky-footer-example.ts b/src/assets/angular-material-examples/table-sticky-footer/table-sticky-footer-example.ts
new file mode 100755
index 00000000..dbb4b265
--- /dev/null
+++ b/src/assets/angular-material-examples/table-sticky-footer/table-sticky-footer-example.ts
@@ -0,0 +1,31 @@
+import {Component} from '@angular/core';
+
+export interface Transaction {
+  item: string;
+  cost: number;
+}
+
+/**
+ * @title Table with a sticky footer
+ */
+@Component({
+  selector: 'table-sticky-footer-example',
+  styleUrls: ['table-sticky-footer-example.css'],
+  templateUrl: 'table-sticky-footer-example.html',
+})
+export class TableStickyFooterExample {
+  displayedColumns = ['item', 'cost'];
+  transactions: Transaction[] = [
+    {item: 'Beach ball', cost: 4},
+    {item: 'Towel', cost: 5},
+    {item: 'Frisbee', cost: 2},
+    {item: 'Sunscreen', cost: 4},
+    {item: 'Cooler', cost: 25},
+    {item: 'Swim suit', cost: 15},
+  ];
+
+  /** Gets the total cost of all transactions. */
+  getTotalCost() {
+    return this.transactions.map(t => t.cost).reduce((acc, value) => acc + value, 0);
+  }
+}
diff --git a/src/assets/angular-material-examples/table-sticky-header/table-sticky-header-example.css b/src/assets/angular-material-examples/table-sticky-header/table-sticky-header-example.css
new file mode 100755
index 00000000..4eca688d
--- /dev/null
+++ b/src/assets/angular-material-examples/table-sticky-header/table-sticky-header-example.css
@@ -0,0 +1,8 @@
+.example-container {
+  height: 400px;
+  overflow: auto;
+}
+
+table {
+  width: 100%;
+}
diff --git a/src/assets/angular-material-examples/table-sticky-header/table-sticky-header-example.html b/src/assets/angular-material-examples/table-sticky-header/table-sticky-header-example.html
new file mode 100755
index 00000000..ccf93e26
--- /dev/null
+++ b/src/assets/angular-material-examples/table-sticky-header/table-sticky-header-example.html
@@ -0,0 +1,31 @@
+<div class="example-container mat-elevation-z8">
+  <table mat-table [dataSource]="dataSource">
+
+    <!-- Position Column -->
+    <ng-container matColumnDef="position">
+      <th mat-header-cell *matHeaderCellDef> No. </th>
+      <td mat-cell *matCellDef="let element"> {{element.position}} </td>
+    </ng-container>
+
+    <!-- Name Column -->
+    <ng-container matColumnDef="name">
+      <th mat-header-cell *matHeaderCellDef> Name </th>
+      <td mat-cell *matCellDef="let element"> {{element.name}} </td>
+    </ng-container>
+
+    <!-- Weight Column -->
+    <ng-container matColumnDef="weight">
+      <th mat-header-cell *matHeaderCellDef> Weight </th>
+      <td mat-cell *matCellDef="let element"> {{element.weight}} </td>
+    </ng-container>
+
+    <!-- Symbol Column -->
+    <ng-container matColumnDef="symbol">
+      <th mat-header-cell *matHeaderCellDef> Symbol </th>
+      <td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
+    </ng-container>
+
+    <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
+    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+  </table>
+</div>
\ No newline at end of file
diff --git a/src/assets/angular-material-examples/table-sticky-header/table-sticky-header-example.ts b/src/assets/angular-material-examples/table-sticky-header/table-sticky-header-example.ts
new file mode 100755
index 00000000..21a17a35
--- /dev/null
+++ b/src/assets/angular-material-examples/table-sticky-header/table-sticky-header-example.ts
@@ -0,0 +1,34 @@
+import {Component} from '@angular/core';
+
+/**
+ * @title Table with sticky header
+ */
+@Component({
+  selector: 'table-sticky-header-example',
+  styleUrls: ['table-sticky-header-example.css'],
+  templateUrl: 'table-sticky-header-example.html',
+})
+export class TableStickyHeaderExample {
+  displayedColumns = ['position', 'name', 'weight', 'symbol'];
+  dataSource = ELEMENT_DATA;
+}
+
+export interface PeriodicElement {
+  name: string;
+  position: number;
+  weight: number;
+  symbol: string;
+}
+
+const ELEMENT_DATA: PeriodicElement[] = [
+  {position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
+  {position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
+  {position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
+  {position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'},
+  {position: 5, name: 'Boron', weight: 10.811, symbol: 'B'},
+  {position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C'},
+  {position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N'},
+  {position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O'},
+  {position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'},
+  {position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'},
+];
diff --git a/src/assets/angular-material-examples/tabs-overview/tabs-overview-example.html b/src/assets/angular-material-examples/tabs-overview/tabs-overview-example.html
deleted file mode 100755
index 2883cea1..00000000
--- a/src/assets/angular-material-examples/tabs-overview/tabs-overview-example.html
+++ /dev/null
@@ -1,4 +0,0 @@
-<mat-tab-group>
-  <mat-tab label="Tab 1">Content 1</mat-tab>
-  <mat-tab label="Tab 2">Content 2</mat-tab>
-</mat-tab-group>
diff --git a/src/assets/angular-material-examples/tabs-overview/tabs-overview-example.ts b/src/assets/angular-material-examples/tabs-overview/tabs-overview-example.ts
deleted file mode 100755
index 602c3948..00000000
--- a/src/assets/angular-material-examples/tabs-overview/tabs-overview-example.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import {Component} from '@angular/core';
-
-/**
- * @title Basic tabs
- */
-@Component({
-  selector: 'tabs-overview-example',
-  templateUrl: 'tabs-overview-example.html',
-  styleUrls: ['tabs-overview-example.css'],
-})
-export class TabsOverviewExample {}
diff --git a/src/assets/angular-material-examples/tabs-template-label/tabs-template-label-example.css b/src/assets/angular-material-examples/tabs-template-label/tabs-template-label-example.css
deleted file mode 100755
index 71d3d8b2..00000000
--- a/src/assets/angular-material-examples/tabs-template-label/tabs-template-label-example.css
+++ /dev/null
@@ -1,7 +0,0 @@
-.demo-tab-group {
-  border: 1px solid #e8e8e8;
-}
-
-.demo-tab-content {
-  padding: 16px;
-}
diff --git a/src/assets/angular-material-examples/tabs-template-label/tabs-template-label-example.html b/src/assets/angular-material-examples/tabs-template-label/tabs-template-label-example.html
deleted file mode 100755
index 26d77c7f..00000000
--- a/src/assets/angular-material-examples/tabs-template-label/tabs-template-label-example.html
+++ /dev/null
@@ -1,119 +0,0 @@
-<mat-card>
-  <mat-card-content>
-    <h2 class="example-h2">Tabs with text labels</h2>
-    <mat-tab-group class="demo-tab-group">
-      <mat-tab label="Tab 1">
-        <div class="demo-tab-content">
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue.
-          Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus.
-          In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec,
-          feugiat ultricies mi. Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor,
-          orci enim rutrum enim, vel tempor sapien arcu a tellus.
-        </div>
-      </mat-tab>
-      <mat-tab label="Tab 2">
-        <div class="demo-tab-content">
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue.
-          Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus.
-          In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec,
-          feugiat ultricies mi. Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor,
-          orci enim rutrum enim, vel tempor sapien arcu a tellus.
-        </div>  
-      </mat-tab>
-      <mat-tab label="Tab 3" disabled>
-        No content  
-      </mat-tab>
-      <mat-tab label="Tab 4">
-        <div class="demo-tab-content">
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue.
-          Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus.
-          In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec,
-          feugiat ultricies mi. Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor,
-          orci enim rutrum enim, vel tempor sapien arcu a tellus.
-          <br />
-          <br />
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue.
-          Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus.
-          In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec,
-          feugiat ultricies mi. Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor,
-          orci enim rutrum enim, vel tempor sapien arcu a tellus.
-        </div>  
-      </mat-tab>
-      <mat-tab label="Tab 5">
-        No content  
-      </mat-tab>
-      <mat-tab label="Tab 6">
-        No content  
-      </mat-tab>
-    </mat-tab-group>
-  </mat-card-content>
-</mat-card>
-
-<mat-card>
-  <mat-card-content>
-    <h2 class="example-h2">Tabs with icon labels</h2>
-    <mat-tab-group class="demo-tab-group">
-      <mat-tab label="Tab 1">
-        <ng-template mat-tab-label>
-          <mat-icon>security</mat-icon>
-        </ng-template>
-        <div class="demo-tab-content">
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue.
-          Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus.
-          In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec,
-          feugiat ultricies mi. Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor,
-          orci enim rutrum enim, vel tempor sapien arcu a tellus.
-        </div>
-      </mat-tab>
-      <mat-tab label="Tab 2">
-        <ng-template mat-tab-label>
-          <mat-icon>attach_file</mat-icon>
-        </ng-template>
-        <div class="demo-tab-content">
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue.
-          Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus.
-          In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec,
-          feugiat ultricies mi. Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor,
-          orci enim rutrum enim, vel tempor sapien arcu a tellus.
-        </div>  
-      </mat-tab>
-      <mat-tab label="Tab 3" disabled>
-        <ng-template mat-tab-label>
-          <mat-icon>block</mat-icon>
-        </ng-template>
-        No content  
-      </mat-tab>
-      <mat-tab label="Tab 4">
-        <ng-template mat-tab-label>
-          <mat-icon>loop</mat-icon>
-        </ng-template>
-        <div class="demo-tab-content">
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue.
-          Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus.
-          In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec,
-          feugiat ultricies mi. Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor,
-          orci enim rutrum enim, vel tempor sapien arcu a tellus.
-          <br />
-          <br />
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue.
-          Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus.
-          In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec,
-          feugiat ultricies mi. Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor,
-          orci enim rutrum enim, vel tempor sapien arcu a tellus.
-        </div>  
-      </mat-tab>
-      <mat-tab label="Tab 5">
-        <ng-template mat-tab-label>
-          <mat-icon>build</mat-icon>
-        </ng-template>
-        No content  
-      </mat-tab>
-      <mat-tab label="Tab 6">
-        <ng-template mat-tab-label>
-          <mat-icon>thumb_down</mat-icon>
-        </ng-template>
-        No content  
-      </mat-tab>
-    </mat-tab-group>
-  </mat-card-content>
-</mat-card>
diff --git a/src/assets/angular-material-examples/tabs-template-label/tabs-template-label-example.ts b/src/assets/angular-material-examples/tabs-template-label/tabs-template-label-example.ts
deleted file mode 100755
index 0f103327..00000000
--- a/src/assets/angular-material-examples/tabs-template-label/tabs-template-label-example.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import {Component} from '@angular/core';
-
-/**
- * @title Complex Example
- */
-@Component({
-  selector: 'tabs-template-label-example',
-  templateUrl: 'tabs-template-label-example.html',
-  styleUrls: ['./tabs-template-label-example.css']
-})
-export class TabsTemplateLabelExample {}
diff --git a/src/assets/angular-material-examples/tooltip-auto-hide/tooltip-auto-hide-example.css b/src/assets/angular-material-examples/tooltip-auto-hide/tooltip-auto-hide-example.css
new file mode 100755
index 00000000..9e7c7057
--- /dev/null
+++ b/src/assets/angular-material-examples/tooltip-auto-hide/tooltip-auto-hide-example.css
@@ -0,0 +1,11 @@
+.example-button {
+  display: block;
+  width: 48px;
+  margin: 80px auto 400px;
+}
+
+.example-container {
+  height: 200px;
+  overflow: auto;
+  border: 1px solid #ccc;
+}
diff --git a/src/assets/angular-material-examples/tooltip-auto-hide/tooltip-auto-hide-example.html b/src/assets/angular-material-examples/tooltip-auto-hide/tooltip-auto-hide-example.html
new file mode 100755
index 00000000..cd09f06a
--- /dev/null
+++ b/src/assets/angular-material-examples/tooltip-auto-hide/tooltip-auto-hide-example.html
@@ -0,0 +1,18 @@
+<mat-form-field>
+  <mat-select placeholder="Tooltip position" [formControl]="position">
+    <mat-option *ngFor="let positionOption of positionOptions" [value]="positionOption">
+      {{positionOption}}
+    </mat-option>
+  </mat-select>
+</mat-form-field>
+
+<div class="example-container" cdk-scrollable>
+  <button mat-raised-button #tooltip="matTooltip"
+          matTooltip="Info about the action"
+          [matTooltipPosition]="position.value"
+          matTooltipHideDelay="100000"
+          aria-label="Button that displays a tooltip that hides when scrolled out of the container"
+          class="example-button">
+    Action
+  </button>
+</div>
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
new file mode 100755
index 00000000..01267279
--- /dev/null
+++ b/src/assets/angular-material-examples/tooltip-auto-hide/tooltip-auto-hide-example.ts
@@ -0,0 +1,16 @@
+import {Component} from '@angular/core';
+import {FormControl} from '@angular/forms';
+import {TooltipPosition} from '@angular/material';
+
+/**
+ * @title Tooltip that demonstrates auto-hiding when it clips out of its scrolling container.
+ */
+@Component({
+  selector: 'tooltip-auto-hide-example',
+  templateUrl: 'tooltip-auto-hide-example.html',
+  styleUrls: ['tooltip-auto-hide-example.css'],
+})
+export class TooltipAutoHideExample {
+  positionOptions: TooltipPosition[] = ['below', 'above', 'left', 'right'];
+  position = new FormControl(this.positionOptions[0]);
+}
diff --git a/src/assets/angular-material-examples/tooltip-custom-class/tooltip-custom-class-example.css b/src/assets/angular-material-examples/tooltip-custom-class/tooltip-custom-class-example.css
new file mode 100755
index 00000000..ba23be00
--- /dev/null
+++ b/src/assets/angular-material-examples/tooltip-custom-class/tooltip-custom-class-example.css
@@ -0,0 +1,7 @@
+.example-button {
+  margin-top: 16px;
+}
+
+.example-tooltip-red {
+  background: #b71c1c;
+}
diff --git a/src/assets/angular-material-examples/tooltip-custom-class/tooltip-custom-class-example.html b/src/assets/angular-material-examples/tooltip-custom-class/tooltip-custom-class-example.html
new file mode 100755
index 00000000..fde04a9d
--- /dev/null
+++ b/src/assets/angular-material-examples/tooltip-custom-class/tooltip-custom-class-example.html
@@ -0,0 +1,7 @@
+<button mat-raised-button
+        matTooltip="Info about the action"
+        matTooltipClass="example-tooltip-red"
+        aria-label="Button that shows a red tooltip"
+        class="example-button">
+  Red-tooltip Action
+</button>
diff --git a/src/assets/angular-material-examples/tooltip-custom-class/tooltip-custom-class-example.ts b/src/assets/angular-material-examples/tooltip-custom-class/tooltip-custom-class-example.ts
new file mode 100755
index 00000000..51e7f754
--- /dev/null
+++ b/src/assets/angular-material-examples/tooltip-custom-class/tooltip-custom-class-example.ts
@@ -0,0 +1,14 @@
+import {Component, ViewEncapsulation} from '@angular/core';
+
+/**
+ * @title Tooltip that can have a custom class applied.
+ */
+@Component({
+  selector: 'tooltip-custom-class-example',
+  templateUrl: 'tooltip-custom-class-example.html',
+  styleUrls: ['tooltip-custom-class-example.css'],
+  // Need to remove view encapsulation so that the custom tooltip style defined in
+  // `tooltip-custom-class-example.css` will not be scoped to this component's view.
+  encapsulation: ViewEncapsulation.None,
+})
+export class TooltipCustomClassExample { }
diff --git a/src/assets/angular-material-examples/tooltip-delay/tooltip-delay-example.css b/src/assets/angular-material-examples/tooltip-delay/tooltip-delay-example.css
index 56d5205c..599c846d 100755
--- a/src/assets/angular-material-examples/tooltip-delay/tooltip-delay-example.css
+++ b/src/assets/angular-material-examples/tooltip-delay/tooltip-delay-example.css
@@ -1,3 +1,4 @@
-button {
-  margin: 8px;
+.example-user-input {
+  display: block;
+  width: 150px;
 }
diff --git a/src/assets/angular-material-examples/tooltip-delay/tooltip-delay-example.html b/src/assets/angular-material-examples/tooltip-delay/tooltip-delay-example.html
index 7cd4a164..2abdb308 100755
--- a/src/assets/angular-material-examples/tooltip-delay/tooltip-delay-example.html
+++ b/src/assets/angular-material-examples/tooltip-delay/tooltip-delay-example.html
@@ -1,7 +1,21 @@
-<button mat-raised-button matTooltip="Tooltip!" matTooltipShowDelay="1000">
-  My tooltip waits one second to show
-</button>
+<mat-form-field class="example-user-input">
+  <input matInput placeholder="Show delay (milliseconds)"
+         type="number"
+         aria-label="Adds a delay between hovering over the button and displaying the tooltip"
+         [formControl]="showDelay">
+</mat-form-field>
 
-<button mat-raised-button matTooltip="Tooltip!" matTooltipHideDelay="2000">
-  My tooltip waits two seconds to hide
+<mat-form-field class="example-user-input">
+  <input matInput placeholder="Hide delay (milliseconds)"
+         type="number"
+         aria-label="Adds a delay between hovering away from the button and hiding the tooltip"
+         [formControl]="hideDelay">
+</mat-form-field>
+
+<button mat-raised-button
+        matTooltip="Info about the action"
+        [matTooltipShowDelay]="showDelay.value"
+        [matTooltipHideDelay]="hideDelay.value"
+        aria-label="Button that displays a tooltip with a customized delay in showing and hiding">
+  Action
 </button>
diff --git a/src/assets/angular-material-examples/tooltip-delay/tooltip-delay-example.ts b/src/assets/angular-material-examples/tooltip-delay/tooltip-delay-example.ts
index 3e7ce9c5..7a7d9d68 100755
--- a/src/assets/angular-material-examples/tooltip-delay/tooltip-delay-example.ts
+++ b/src/assets/angular-material-examples/tooltip-delay/tooltip-delay-example.ts
@@ -1,4 +1,5 @@
 import {Component} from '@angular/core';
+import {FormControl} from '@angular/forms';
 
 /**
  * @title Tooltip with a show and hide delay
@@ -8,4 +9,7 @@ import {Component} from '@angular/core';
   templateUrl: 'tooltip-delay-example.html',
   styleUrls: ['tooltip-delay-example.css'],
 })
-export class TooltipDelayExample {}
+export class TooltipDelayExample {
+  showDelay = new FormControl(1000);
+  hideDelay = new FormControl(2000);
+}
diff --git a/src/assets/angular-material-examples/tooltip-disabled/tooltip-disabled-example.css b/src/assets/angular-material-examples/tooltip-disabled/tooltip-disabled-example.css
new file mode 100755
index 00000000..c3abf0f1
--- /dev/null
+++ b/src/assets/angular-material-examples/tooltip-disabled/tooltip-disabled-example.css
@@ -0,0 +1,3 @@
+.example-disabled-checkbox {
+  margin-left: 8px;
+}
diff --git a/src/assets/angular-material-examples/tooltip-disabled/tooltip-disabled-example.html b/src/assets/angular-material-examples/tooltip-disabled/tooltip-disabled-example.html
new file mode 100755
index 00000000..449ca440
--- /dev/null
+++ b/src/assets/angular-material-examples/tooltip-disabled/tooltip-disabled-example.html
@@ -0,0 +1,10 @@
+<button mat-raised-button
+        matTooltip="Info about the action"
+        [matTooltipDisabled]="disabled.value"
+        aria-label="Button that displays a tooltip that can be programatically disabled">
+  Action
+</button>
+
+<mat-checkbox [formControl]="disabled" class="example-disabled-checkbox">
+  Tooltip disabled
+</mat-checkbox>
diff --git a/src/assets/angular-material-examples/tooltip-disabled/tooltip-disabled-example.ts b/src/assets/angular-material-examples/tooltip-disabled/tooltip-disabled-example.ts
new file mode 100755
index 00000000..11c7a3ce
--- /dev/null
+++ b/src/assets/angular-material-examples/tooltip-disabled/tooltip-disabled-example.ts
@@ -0,0 +1,14 @@
+import {Component} from '@angular/core';
+import {FormControl} from '@angular/forms';
+
+/**
+ * @title Tooltip that can be disabled
+ */
+@Component({
+  selector: 'tooltip-disabled-example',
+  templateUrl: 'tooltip-disabled-example.html',
+  styleUrls: ['tooltip-disabled-example.css'],
+})
+export class TooltipDisabledExample {
+  disabled = new FormControl(false);
+}
diff --git a/src/assets/angular-material-examples/tooltip-manual/tooltip-manual-example.css b/src/assets/angular-material-examples/tooltip-manual/tooltip-manual-example.css
index 74323087..09f64801 100755
--- a/src/assets/angular-material-examples/tooltip-manual/tooltip-manual-example.css
+++ b/src/assets/angular-material-examples/tooltip-manual/tooltip-manual-example.css
@@ -1 +1,3 @@
-/** No CSS for this example */
+.example-action-button {
+  margin-top: 16px;
+}
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 3e5ca183..11305dfc 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,5 +1,28 @@
-<button mat-raised-button (click)="tooltip.show()"> Show tooltip </button>
+<div>
+  <span> Mouse over to </span>
+  <button mat-button
+          (mouseenter)="tooltip.show()"
+          aria-label="Button that progamatically shows a tooltip on another button"
+          class="example-action-button">
+    show
+  </button>
+  <button mat-button
+          (mouseenter)="tooltip.hide()"
+          aria-label="Button that progamatically hides a tooltip on another button"
+          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"
+          class="example-action-button">
+    toggle show/hide
+  </button>
+</div>
 
-<span matTooltip="This is the tooltip message" #tooltip="matTooltip">
-  I have a tooltip
-</span>
+<button mat-raised-button #tooltip="matTooltip"
+        matTooltip="Info about the action"
+        matTooltipPosition="right"
+        aria-tooltip="Button that displays and hides a tooltip triggered by other buttons">
+  Action
+</button>
diff --git a/src/assets/angular-material-examples/tooltip-message/tooltip-message-example.css b/src/assets/angular-material-examples/tooltip-message/tooltip-message-example.css
new file mode 100755
index 00000000..87914e3a
--- /dev/null
+++ b/src/assets/angular-material-examples/tooltip-message/tooltip-message-example.css
@@ -0,0 +1,3 @@
+.example-user-input {
+  margin-right: 8px;
+}
diff --git a/src/assets/angular-material-examples/tooltip-message/tooltip-message-example.html b/src/assets/angular-material-examples/tooltip-message/tooltip-message-example.html
new file mode 100755
index 00000000..234a18f4
--- /dev/null
+++ b/src/assets/angular-material-examples/tooltip-message/tooltip-message-example.html
@@ -0,0 +1,9 @@
+<mat-form-field class="example-user-input">
+  <input matInput placeholder="Tooltip message" [formControl]="message">
+</mat-form-field>
+
+<button mat-raised-button
+        [matTooltip]="message.value"
+        aria-label="Button that displays a tooltip with a custom message">
+  Action
+</button>
diff --git a/src/assets/angular-material-examples/tooltip-message/tooltip-message-example.ts b/src/assets/angular-material-examples/tooltip-message/tooltip-message-example.ts
new file mode 100755
index 00000000..ebf9a9a0
--- /dev/null
+++ b/src/assets/angular-material-examples/tooltip-message/tooltip-message-example.ts
@@ -0,0 +1,14 @@
+import {Component} from '@angular/core';
+import {FormControl} from '@angular/forms';
+
+/**
+ * @title Tooltip with a changing message
+ */
+@Component({
+  selector: 'tooltip-message-example',
+  templateUrl: 'tooltip-message-example.html',
+  styleUrls: ['tooltip-message-example.css'],
+})
+export class TooltipMessageExample {
+  message = new FormControl('Info about the action');
+}
diff --git a/src/assets/angular-material-examples/tooltip-modified-defaults/tooltip-modified-defaults-example.html b/src/assets/angular-material-examples/tooltip-modified-defaults/tooltip-modified-defaults-example.html
index 8dcc0d0e..dd2f299e 100755
--- a/src/assets/angular-material-examples/tooltip-modified-defaults/tooltip-modified-defaults-example.html
+++ b/src/assets/angular-material-examples/tooltip-modified-defaults/tooltip-modified-defaults-example.html
@@ -1,3 +1,5 @@
-<button mat-raised-button matTooltip="By default, I delay">
+<button mat-raised-button
+        matTooltip="By default, I delay"
+        aria-label="Button that displays a tooltip that has custom delays through a default config">
   Button with delay-default tooltip
 </button>
diff --git a/src/assets/angular-material-examples/tooltip-overview/tooltip-overview-example.html b/src/assets/angular-material-examples/tooltip-overview/tooltip-overview-example.html
index 3a2a2749..29978afb 100755
--- a/src/assets/angular-material-examples/tooltip-overview/tooltip-overview-example.html
+++ b/src/assets/angular-material-examples/tooltip-overview/tooltip-overview-example.html
@@ -1 +1,5 @@
-<span matTooltip="Tooltip!">I have a tooltip</span>
+<button mat-raised-button
+        matTooltip="Info about the action"
+        aria-label="Button that displays a tooltip when focused or hovered over">
+  Action
+</button>
diff --git a/src/assets/angular-material-examples/tooltip-position/tooltip-position-example.css b/src/assets/angular-material-examples/tooltip-position/tooltip-position-example.css
index 04ec59dd..87914e3a 100755
--- a/src/assets/angular-material-examples/tooltip-position/tooltip-position-example.css
+++ b/src/assets/angular-material-examples/tooltip-position/tooltip-position-example.css
@@ -1,9 +1,3 @@
-.example-tooltip-host {
-  display: inline-flex;
-  align-items: center;
-  margin: 50px;
-}
-
-.example-select {
-  margin: 0 10px;
+.example-user-input {
+  margin-right: 8px;
 }
diff --git a/src/assets/angular-material-examples/tooltip-position/tooltip-position-example.html b/src/assets/angular-material-examples/tooltip-position/tooltip-position-example.html
index a0fa7759..42066b30 100755
--- a/src/assets/angular-material-examples/tooltip-position/tooltip-position-example.html
+++ b/src/assets/angular-material-examples/tooltip-position/tooltip-position-example.html
@@ -1,13 +1,14 @@
-<div class="example-tooltip-host" matTooltip="Tooltip!" [matTooltipPosition]="position">
-  <span>Show tooltip</span>
-  <mat-form-field>
-    <mat-select class="example-select" [(ngModel)]="position">
-      <mat-option value="before">Before</mat-option>
-      <mat-option value="after">After</mat-option>
-      <mat-option value="above">Above</mat-option>
-      <mat-option value="below">Below</mat-option>
-      <mat-option value="left">Left</mat-option>
-      <mat-option value="right">Right</mat-option>
+<mat-form-field class="example-user-input">
+  <mat-select placeholder="Tooltip position" [formControl]="position">
+    <mat-option *ngFor="let positionOption of positionOptions" [value]="positionOption">
+      {{ positionOption }}
+    </mat-option>
     </mat-select>
   </mat-form-field>
-</div>
+
+<button mat-raised-button
+        matTooltip="Info about the action"
+        [matTooltipPosition]="position.value"
+        aria-label="Button that displays a tooltip in various positions">
+  Action
+</button>
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 12741b77..89ad5a16 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,7 +1,9 @@
 import {Component} from '@angular/core';
+import {FormControl} from '@angular/forms';
+import {TooltipPosition} from '@angular/material';
 
 /**
- * @title Tooltip with custom position
+ * @title Tooltip with a custom position
  */
 @Component({
   selector: 'tooltip-position-example',
@@ -9,5 +11,6 @@ import {Component} from '@angular/core';
   styleUrls: ['tooltip-position-example.css'],
 })
 export class TooltipPositionExample {
-  position = 'before';
+  positionOptions: TooltipPosition[] = ['after', 'before', 'above', 'below', 'left', 'right'];
+  position = new FormControl(this.positionOptions[0]);
 }