Angular material docs updated,

+ @angular/material-moment-adapter added to package.json

package-lock.json

@@ -215,6 +215,14 @@
         "tslib": "1.8.0"
       }
     },
+    "@angular/material-moment-adapter": {
+      "version": "5.0.0-rc0",
+      "resolved": "https://registry.npmjs.org/@angular/material-moment-adapter/-/material-moment-adapter-5.0.0-rc0.tgz",
+      "integrity": "sha512-NI9Q8555vbm6RvBltW0rzyaKwthpUmjtoGtSQePp6TI0ZtROtGAwH/KCcNM3FsSqvQuxBc5jq0HId2wvHknxEw==",
+      "requires": {
+        "tslib": "1.8.0"
+      }
+    },
     "@angular/platform-browser": {
       "version": "5.0.2",
       "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-5.0.2.tgz",

package.json

@@ -25,6 +25,7 @@
     "@angular/forms": "5.0.2",
     "@angular/http": "5.0.2",
     "@angular/material": "5.0.0-rc0",
+    "@angular/material-moment-adapter": "5.0.0-rc0",
     "@angular/platform-browser": "5.0.2",
     "@angular/platform-browser-dynamic": "5.0.2",
     "@angular/router": "5.0.2",

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

@@ -2,9 +2,9 @@ import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { SharedModule } from '../../../../core/modules/shared.module';
 import { FuseWidgetModule } from '../../../../core/components/widget/widget.module';
-import { FuseAngularMaterialComponent } from 'app/main/content/components/angular-material/angular-material.component';
 import { FuseExampleViewerComponent } from './example-viewer/example-viewer';
 import { EXAMPLE_LIST } from './example-components';
+import { FuseAngularMaterialComponent } from './angular-material.component';
 
 const routes: Routes = [
     {

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

@@ -15,15 +15,22 @@ import { ChipsInputExample } from '../../../../../assets/angular-material-exampl
 import { ChipsOverviewExample } from '../../../../../assets/angular-material-examples/chips-overview/chips-overview-example';
 import { ChipsStackedExample } from '../../../../../assets/angular-material-examples/chips-stacked/chips-stacked-example';
 import { DatepickerApiExample } from '../../../../../assets/angular-material-examples/datepicker-api/datepicker-api-example';
+import { DatepickerDisabledExample } from '../../../../../assets/angular-material-examples/datepicker-disabled/datepicker-disabled-example';
+import { DatepickerEventsExample } from '../../../../../assets/angular-material-examples/datepicker-events/datepicker-events-example';
 import { DatepickerFilterExample } from '../../../../../assets/angular-material-examples/datepicker-filter/datepicker-filter-example';
+import { DatepickerFormatsExample } from '../../../../../assets/angular-material-examples/datepicker-formats/datepicker-formats-example';
+import { DatepickerLocaleExample } from '../../../../../assets/angular-material-examples/datepicker-locale/datepicker-locale-example';
 import { DatepickerMinMaxExample } from '../../../../../assets/angular-material-examples/datepicker-min-max/datepicker-min-max-example';
+import { DatepickerMomentExample } from '../../../../../assets/angular-material-examples/datepicker-moment/datepicker-moment-example';
 import { DatepickerOverviewExample } from '../../../../../assets/angular-material-examples/datepicker-overview/datepicker-overview-example';
 import { DatepickerStartViewExample } from '../../../../../assets/angular-material-examples/datepicker-start-view/datepicker-start-view-example';
 import { DatepickerTouchExample } from '../../../../../assets/angular-material-examples/datepicker-touch/datepicker-touch-example';
+import { DatepickerValueExample } from '../../../../../assets/angular-material-examples/datepicker-value/datepicker-value-example';
 import { DialogContentExampleDialog, DialogContentExample } from '../../../../../assets/angular-material-examples/dialog-content/dialog-content-example';
 import { DialogDataExampleDialog, DialogDataExample } from '../../../../../assets/angular-material-examples/dialog-data/dialog-data-example';
 import { DialogElementsExampleDialog, DialogElementsExample } from '../../../../../assets/angular-material-examples/dialog-elements/dialog-elements-example';
 import { DialogOverviewExampleDialog, DialogOverviewExample } from '../../../../../assets/angular-material-examples/dialog-overview/dialog-overview-example';
+import { ElevationOverviewExample } from '../../../../../assets/angular-material-examples/elevation-overview/elevation-overview-example';
 import { ExpansionOverviewExample } from '../../../../../assets/angular-material-examples/expansion-overview/expansion-overview-example';
 import { ExpansionStepsExample } from '../../../../../assets/angular-material-examples/expansion-steps/expansion-steps-example';
 import { MyTelInput, FormFieldCustomControlExample } from '../../../../../assets/angular-material-examples/form-field-custom-control/form-field-custom-control-example';
@@ -37,7 +44,9 @@ import { GridListDynamicExample } from '../../../../../assets/angular-material-e
 import { GridListOverviewExample } from '../../../../../assets/angular-material-examples/grid-list-overview/grid-list-overview-example';
 import { IconOverviewExample } from '../../../../../assets/angular-material-examples/icon-overview/icon-overview-example';
 import { IconSvgExample } from '../../../../../assets/angular-material-examples/icon-svg/icon-svg-example';
+import { InputAutosizeTextareaExample } from '../../../../../assets/angular-material-examples/input-autosize-textarea/input-autosize-textarea-example';
 import { InputClearableExample } from '../../../../../assets/angular-material-examples/input-clearable/input-clearable-example';
+import { InputErrorStateMatcherExample } from '../../../../../assets/angular-material-examples/input-error-state-matcher/input-error-state-matcher-example';
 import { InputErrorsExample } from '../../../../../assets/angular-material-examples/input-errors/input-errors-example';
 import { InputFormExample } from '../../../../../assets/angular-material-examples/input-form/input-form-example';
 import { InputHintExample } from '../../../../../assets/angular-material-examples/input-hint/input-hint-example';
@@ -51,14 +60,27 @@ import { MenuOverviewExample } from '../../../../../assets/angular-material-exam
 import { NestedMenuExample } from '../../../../../assets/angular-material-examples/nested-menu/nested-menu-example';
 import { PaginatorConfigurableExample } from '../../../../../assets/angular-material-examples/paginator-configurable/paginator-configurable-example';
 import { PaginatorOverviewExample } from '../../../../../assets/angular-material-examples/paginator-overview/paginator-overview-example';
+import { ProgressBarBufferExample } from '../../../../../assets/angular-material-examples/progress-bar-buffer/progress-bar-buffer-example';
 import { ProgressBarConfigurableExample } from '../../../../../assets/angular-material-examples/progress-bar-configurable/progress-bar-configurable-example';
-import { ProgressBarOverviewExample } from '../../../../../assets/angular-material-examples/progress-bar-overview/progress-bar-overview-example';
+import { ProgressBarDeterminateExample } from '../../../../../assets/angular-material-examples/progress-bar-determinate/progress-bar-determinate-example';
+import { ProgressBarIndeterminateExample } from '../../../../../assets/angular-material-examples/progress-bar-indeterminate/progress-bar-indeterminate-example';
+import { ProgressBarQueryExample } from '../../../../../assets/angular-material-examples/progress-bar-query/progress-bar-query-example';
 import { ProgressSpinnerConfigurableExample } from '../../../../../assets/angular-material-examples/progress-spinner-configurable/progress-spinner-configurable-example';
 import { ProgressSpinnerOverviewExample } from '../../../../../assets/angular-material-examples/progress-spinner-overview/progress-spinner-overview-example';
 import { RadioNgModelExample } from '../../../../../assets/angular-material-examples/radio-ng-model/radio-ng-model-example';
 import { RadioOverviewExample } from '../../../../../assets/angular-material-examples/radio-overview/radio-overview-example';
+import { SelectCustomTriggerExample } from '../../../../../assets/angular-material-examples/select-custom-trigger/select-custom-trigger-example';
+import { SelectDisabledExample } from '../../../../../assets/angular-material-examples/select-disabled/select-disabled-example';
+import { SelectErrorStateMatcherExample } from '../../../../../assets/angular-material-examples/select-error-state-matcher/select-error-state-matcher-example';
 import { SelectFormExample } from '../../../../../assets/angular-material-examples/select-form/select-form-example';
+import { SelectHintErrorExample } from '../../../../../assets/angular-material-examples/select-hint-error/select-hint-error-example';
+import { SelectMultipleExample } from '../../../../../assets/angular-material-examples/select-multiple/select-multiple-example';
+import { SelectNoRippleExample } from '../../../../../assets/angular-material-examples/select-no-ripple/select-no-ripple-example';
+import { SelectOptgroupExample } from '../../../../../assets/angular-material-examples/select-optgroup/select-optgroup-example';
 import { SelectOverviewExample } from '../../../../../assets/angular-material-examples/select-overview/select-overview-example';
+import { SelectPanelClassExample } from '../../../../../assets/angular-material-examples/select-panel-class/select-panel-class-example';
+import { SelectResetExample } from '../../../../../assets/angular-material-examples/select-reset/select-reset-example';
+import { SelectValueBindingExample } from '../../../../../assets/angular-material-examples/select-value-binding/select-value-binding-example';
 import { SidenavFabExample } from '../../../../../assets/angular-material-examples/sidenav-fab/sidenav-fab-example';
 import { SidenavOverviewExample } from '../../../../../assets/angular-material-examples/sidenav-overview/sidenav-overview-example';
 import { SlideToggleConfigurableExample } from '../../../../../assets/angular-material-examples/slide-toggle-configurable/slide-toggle-configurable-example';
@@ -97,10 +119,16 @@ export const COMPONENT_MAP = {
     'datepicker'      : [
         'datepicker-overview',
         'datepicker-start-view',
+        'datepicker-value',
         'datepicker-min-max',
         'datepicker-filter',
+        'datepicker-events',
+        'datepicker-disabled',
         'datepicker-touch',
-        'datepicker-api'
+        'datepicker-api',
+        'datepicker-locale',
+        'datepicker-moment',
+        'datepicker-formats'
     ],
     'form-field'      : [
         'form-field-overview',
@@ -114,6 +142,8 @@ export const COMPONENT_MAP = {
     'input'           : [
         'input-overview',
         'input-errors',
+        'input-error-state-matcher',
+        'input-autosize-textarea',
         'input-prefix-suffix',
         'input-hint',
         'input-clearable',
@@ -125,7 +155,17 @@ export const COMPONENT_MAP = {
     ],
     'select'          : [
         'select-overview',
-        'select-form'
+        'select-value-binding',
+        'select-form',
+        'select-hint-error',
+        'select-disabled',
+        'select-reset',
+        'select-optgroup',
+        'select-multiple',
+        'select-custom-trigger',
+        'select-no-ripple',
+        'select-panel-class',
+        'select-error-state-matcher'
     ],
     'slider'          : [
         'slider-overview',
@@ -169,6 +209,9 @@ export const COMPONENT_MAP = {
         'tabs-overview',
         'tabs-template-label'
     ],
+    'elevation'       : [
+        'elevation-overview'
+    ],
     'expansion-panel' : [
         'expansion-overview',
         'expansion-steps'
@@ -195,7 +238,10 @@ export const COMPONENT_MAP = {
         'progress-spinner-configurable'
     ],
     'progress-bar'    : [
-        'progress-bar-overview',
+        'progress-bar-determinate',
+        'progress-bar-indeterminate',
+        'progress-bar-query',
+        'progress-bar-buffer',
         'progress-bar-configurable'
     ],
     'dialog'          : [
@@ -324,41 +370,77 @@ export const EXAMPLE_COMPONENTS = {
         selectorName   : null
     },
     'datepicker-api'               : {
-        title          : 'Datepicker API',
+        title          : 'Datepicker open method ',
         component      : DatepickerApiExample,
         additionalFiles: null,
         selectorName   : null
     },
+    'datepicker-disabled'          : {
+        title          : 'Disabled datepicker ',
+        component      : DatepickerDisabledExample,
+        additionalFiles: null,
+        selectorName   : null
+    },
+    'datepicker-events'            : {
+        title          : 'Datepicker input and change events ',
+        component      : DatepickerEventsExample,
+        additionalFiles: null,
+        selectorName   : null
+    },
     'datepicker-filter'            : {
-        title          : 'Datepicker Filter',
+        title          : 'Datepicker with filter validation ',
         component      : DatepickerFilterExample,
         additionalFiles: null,
         selectorName   : null
     },
+    'datepicker-formats'           : {
+        title          : 'Datepicker with custom formats ',
+        component      : DatepickerFormatsExample,
+        additionalFiles: null,
+        selectorName   : null
+    },
+    'datepicker-locale'            : {
+        title          : 'Datepicker with different locale ',
+        component      : DatepickerLocaleExample,
+        additionalFiles: null,
+        selectorName   : null
+    },
     'datepicker-min-max'           : {
-        title          : 'Datepicker Min Max',
+        title          : 'Datepicker with min & max validation ',
         component      : DatepickerMinMaxExample,
         additionalFiles: null,
         selectorName   : null
     },
+    'datepicker-moment'            : {
+        title          : 'Datepicker that uses Moment.js dates ',
+        component      : DatepickerMomentExample,
+        additionalFiles: null,
+        selectorName   : null
+    },
     'datepicker-overview'          : {
-        title          : 'Basic datepicker',
+        title          : 'Basic datepicker ',
         component      : DatepickerOverviewExample,
         additionalFiles: null,
         selectorName   : null
     },
     'datepicker-start-view'        : {
-        title          : 'Datepicker start date',
+        title          : 'Datepicker start date ',
         component      : DatepickerStartViewExample,
         additionalFiles: null,
         selectorName   : null
     },
     'datepicker-touch'             : {
-        title          : 'Datepicker Touch',
+        title          : 'Datepicker touch UI ',
         component      : DatepickerTouchExample,
         additionalFiles: null,
         selectorName   : null
     },
+    'datepicker-value'             : {
+        title          : 'Datepicker selected value ',
+        component      : DatepickerValueExample,
+        additionalFiles: null,
+        selectorName   : null
+    },
     'dialog-content'               : {
         title          : 'Dialog with header, scrollable content and actions',
         component      : DialogContentExample,
@@ -383,6 +465,12 @@ export const EXAMPLE_COMPONENTS = {
         additionalFiles: ['dialog-overview-example-dialog.html'],
         selectorName   : 'DialogOverviewExample, DialogOverviewExampleDialog'
     },
+    'elevation-overview'           : {
+        title          : 'Elevation CSS classes',
+        component      : ElevationOverviewExample,
+        additionalFiles: null,
+        selectorName   : null
+    },
     'expansion-overview'           : {
         title          : 'Basic expansion panel',
         component      : ExpansionOverviewExample,
@@ -461,14 +549,26 @@ export const EXAMPLE_COMPONENTS = {
         additionalFiles: null,
         selectorName   : null
     },
+    'input-autosize-textarea'      : {
+        title          : 'Auto-resizing textarea ',
+        component      : InputAutosizeTextareaExample,
+        additionalFiles: null,
+        selectorName   : null
+    },
     'input-clearable'              : {
-        title          : 'Input Clearable',
+        title          : 'Input with a clear button',
         component      : InputClearableExample,
         additionalFiles: null,
         selectorName   : null
     },
+    'input-error-state-matcher'    : {
+        title          : 'Input with a custom ErrorStateMatcher ',
+        component      : InputErrorStateMatcherExample,
+        additionalFiles: null,
+        selectorName   : null
+    },
     'input-errors'                 : {
-        title          : 'Input Errors',
+        title          : 'Input with error messages',
         component      : InputErrorsExample,
         additionalFiles: null,
         selectorName   : null
@@ -480,7 +580,7 @@ export const EXAMPLE_COMPONENTS = {
         selectorName   : null
     },
     'input-hint'                   : {
-        title          : 'Input hints',
+        title          : 'Input with hints',
         component      : InputHintExample,
         additionalFiles: null,
         selectorName   : null
@@ -492,7 +592,7 @@ export const EXAMPLE_COMPONENTS = {
         selectorName   : null
     },
     'input-prefix-suffix'          : {
-        title          : 'Input Prefixes and Suffixes',
+        title          : 'Inputs with prefixes and suffixes',
         component      : InputPrefixSuffixExample,
         additionalFiles: null,
         selectorName   : null
@@ -545,15 +645,33 @@ export const EXAMPLE_COMPONENTS = {
         additionalFiles: null,
         selectorName   : null
     },
+    'progress-bar-buffer'          : {
+        title          : 'Buffer progress-bar',
+        component      : ProgressBarBufferExample,
+        additionalFiles: null,
+        selectorName   : null
+    },
     'progress-bar-configurable'    : {
         title          : 'Configurable progress-bar',
         component      : ProgressBarConfigurableExample,
         additionalFiles: null,
         selectorName   : null
     },
-    'progress-bar-overview'        : {
+    'progress-bar-determinate'     : {
-        title          : 'Basic progress-bar',
+        title          : 'Determinate progress-bar',
-        component      : ProgressBarOverviewExample,
+        component      : ProgressBarDeterminateExample,
+        additionalFiles: null,
+        selectorName   : null
+    },
+    'progress-bar-indeterminate'   : {
+        title          : 'Indeterminate progress-bar',
+        component      : ProgressBarIndeterminateExample,
+        additionalFiles: null,
+        selectorName   : null
+    },
+    'progress-bar-query'           : {
+        title          : 'Query progress-bar',
+        component      : ProgressBarQueryExample,
         additionalFiles: null,
         selectorName   : null
     },
@@ -581,18 +699,78 @@ export const EXAMPLE_COMPONENTS = {
         additionalFiles: null,
         selectorName   : null
     },
+    'select-custom-trigger'        : {
+        title          : 'Select with custom trigger text ',
+        component      : SelectCustomTriggerExample,
+        additionalFiles: null,
+        selectorName   : null
+    },
+    'select-disabled'              : {
+        title          : 'Disabled select ',
+        component      : SelectDisabledExample,
+        additionalFiles: null,
+        selectorName   : null
+    },
+    'select-error-state-matcher'   : {
+        title          : 'Select with a custom ErrorStateMatcher ',
+        component      : SelectErrorStateMatcherExample,
+        additionalFiles: null,
+        selectorName   : null
+    },
     'select-form'                  : {
         title          : 'Select in a form',
         component      : SelectFormExample,
         additionalFiles: null,
         selectorName   : null
     },
+    'select-hint-error'            : {
+        title          : 'Select with form field features ',
+        component      : SelectHintErrorExample,
+        additionalFiles: null,
+        selectorName   : null
+    },
+    'select-multiple'              : {
+        title          : 'Select with multiple selection ',
+        component      : SelectMultipleExample,
+        additionalFiles: null,
+        selectorName   : null
+    },
+    'select-no-ripple'             : {
+        title          : 'Select with no option ripple ',
+        component      : SelectNoRippleExample,
+        additionalFiles: null,
+        selectorName   : null
+    },
+    'select-optgroup'              : {
+        title          : 'Select with option groups ',
+        component      : SelectOptgroupExample,
+        additionalFiles: null,
+        selectorName   : null
+    },
     'select-overview'              : {
         title          : 'Basic select',
         component      : SelectOverviewExample,
         additionalFiles: null,
         selectorName   : null
     },
+    'select-panel-class'           : {
+        title          : 'Select with custom panel styling',
+        component      : SelectPanelClassExample,
+        additionalFiles: null,
+        selectorName   : null
+    },
+    'select-reset'                 : {
+        title          : 'Select with reset option ',
+        component      : SelectResetExample,
+        additionalFiles: null,
+        selectorName   : null
+    },
+    'select-value-binding'         : {
+        title          : 'Select with 2-way value binding ',
+        component      : SelectValueBindingExample,
+        additionalFiles: null,
+        selectorName   : null
+    },
     'sidenav-fab'                  : {
         title          : 'Sidenav with a FAB',
         component      : SidenavFabExample,
@@ -678,7 +856,7 @@ export const EXAMPLE_COMPONENTS = {
         selectorName   : null
     },
     'table-overview'               : {
-        title          : 'Feature-rich data table',
+        title          : 'Data table with sorting, pagination, and filtering.',
         component      : TableOverviewExample,
         additionalFiles: null,
         selectorName   : null
@@ -751,19 +929,22 @@ export const EXAMPLE_LIST = [
     ChipsOverviewExample,
     ChipsStackedExample,
     DatepickerApiExample,
+    DatepickerDisabledExample,
+    DatepickerEventsExample,
     DatepickerFilterExample,
+    DatepickerFormatsExample,
+    DatepickerLocaleExample,
     DatepickerMinMaxExample,
+    DatepickerMomentExample,
     DatepickerOverviewExample,
     DatepickerStartViewExample,
     DatepickerTouchExample,
-    DialogContentExampleDialog,
+    DatepickerValueExample,
-    DialogContentExample,
+    DialogContentExampleDialog, DialogContentExample,
-    DialogDataExampleDialog,
+    DialogDataExampleDialog, DialogDataExample,
-    DialogDataExample,
+    DialogElementsExampleDialog, DialogElementsExample,
-    DialogElementsExampleDialog,
+    DialogOverviewExampleDialog, DialogOverviewExample,
-    DialogElementsExample,
+    ElevationOverviewExample,
-    DialogOverviewExampleDialog,
-    DialogOverviewExample,
     ExpansionOverviewExample,
     ExpansionStepsExample,
     MyTelInput, FormFieldCustomControlExample,
@@ -777,7 +958,9 @@ export const EXAMPLE_LIST = [
     GridListOverviewExample,
     IconOverviewExample,
     IconSvgExample,
+    InputAutosizeTextareaExample,
     InputClearableExample,
+    InputErrorStateMatcherExample,
     InputErrorsExample,
     InputFormExample,
     InputHintExample,
@@ -791,14 +974,27 @@ export const EXAMPLE_LIST = [
     NestedMenuExample,
     PaginatorConfigurableExample,
     PaginatorOverviewExample,
+    ProgressBarBufferExample,
     ProgressBarConfigurableExample,
-    ProgressBarOverviewExample,
+    ProgressBarDeterminateExample,
+    ProgressBarIndeterminateExample,
+    ProgressBarQueryExample,
     ProgressSpinnerConfigurableExample,
     ProgressSpinnerOverviewExample,
     RadioNgModelExample,
     RadioOverviewExample,
+    SelectCustomTriggerExample,
+    SelectDisabledExample,
+    SelectErrorStateMatcherExample,
     SelectFormExample,
+    SelectHintErrorExample,
+    SelectMultipleExample,
+    SelectNoRippleExample,
+    SelectOptgroupExample,
     SelectOverviewExample,
+    SelectPanelClassExample,
+    SelectResetExample,
+    SelectValueBindingExample,
     SidenavFabExample,
     SidenavOverviewExample,
     SlideToggleConfigurableExample,

src/app/navigation.model.ts

@@ -649,6 +649,12 @@ export class NavigationModel
                                         'type' : 'item',
                                         'url'  : '/components/angular-material/tabs'
                                     },
+                                    {
+                                        'id'   : 'elevation',
+                                        'title': 'Elevation',
+                                        'type' : 'item',
+                                        'url'  : '/components/angular-material/elevation'
+                                    },
                                     {
                                         'id'   : 'expansion-panel',
                                         'title': 'Expansion Panel',

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

@@ -1,8 +1,6 @@
 import { Component } from '@angular/core';
 import { MatChipInputEvent } from '@angular/material';
-import { ENTER } from '@angular/cdk/keycodes';
+import { ENTER, COMMA } from '@angular/cdk/keycodes';
-
-const COMMA = 188;
 
 /**
  * @title Chips with input

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

@@ -13,16 +13,20 @@ export class ChipsStackedExample
     color: string;
 
     availableColors = [
-        {name    : 'none',
+        {
+            name : 'none',
             color: ''
         },
-        {name    : 'Primary',
+        {
+            name : 'Primary',
             color: 'primary'
         },
-        {name    : 'Accent',
+        {
+            name : 'Accent',
             color: 'accent'
         },
-        {name    : 'Warn',
+        {
+            name : 'Warn',
             color: 'warn'
         }
     ];

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

@@ -1,8 +1,6 @@
 import { Component } from '@angular/core';
 
-/**
+/** @title Datepicker open method */
- * @title Datepicker API
- */
 @Component({
     selector   : 'datepicker-api-example',
     templateUrl: 'datepicker-api-example.html',

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

@@ -0,0 +1,23 @@
+<p>
+    <mat-form-field>
+        <input matInput [matDatepicker]="dp1" placeholder="Completely disabled" disabled>
+        <mat-datepicker-toggle matSuffix [for]="dp1"></mat-datepicker-toggle>
+        <mat-datepicker #dp1></mat-datepicker>
+    </mat-form-field>
+</p>
+
+<p>
+    <mat-form-field>
+        <input matInput [matDatepicker]="dp2" placeholder="Popup disabled">
+        <mat-datepicker-toggle matSuffix [for]="dp2" disabled></mat-datepicker-toggle>
+        <mat-datepicker #dp2></mat-datepicker>
+    </mat-form-field>
+</p>
+
+<p>
+    <mat-form-field>
+        <input matInput [matDatepicker]="dp3" placeholder="Input disabled" disabled>
+        <mat-datepicker-toggle matSuffix [for]="dp3"></mat-datepicker-toggle>
+        <mat-datepicker #dp3 disabled="false"></mat-datepicker>
+    </mat-form-field>
+</p>

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

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+/** @title Disabled datepicker */
+@Component({
+    selector   : 'datepicker-disabled-example',
+    templateUrl: 'datepicker-disabled-example.html',
+    styleUrls  : ['datepicker-disabled-example.css']
+})
+export class DatepickerDisabledExample
+{
+}

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

@@ -0,0 +1,6 @@
+.example-events {
+    width: 400px;
+    height: 200px;
+    border: 1px solid #555;
+    overflow: auto;
+}

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

@@ -0,0 +1,10 @@
+<mat-form-field>
+    <input matInput [matDatepicker]="picker" placeholder="Input & change events"
+           (dateInput)="addEvent('input', $event)" (dateChange)="addEvent('change', $event)">
+    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
+    <mat-datepicker #picker></mat-datepicker>
+</mat-form-field>
+
+<div class="example-events">
+    <div *ngFor="let e of events">{{e}}</div>
+</div>

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

@@ -0,0 +1,18 @@
+import { Component } from '@angular/core';
+import { MatDatepickerInputEvent } from '@angular/material/datepicker';
+
+/** @title Datepicker input and change events */
+@Component({
+    selector   : 'datepicker-events-example',
+    templateUrl: 'datepicker-events-example.html',
+    styleUrls  : ['datepicker-events-example.css']
+})
+export class DatepickerEventsExample
+{
+    events: string[] = [];
+
+    addEvent(type: string, event: MatDatepickerInputEvent<Date>)
+    {
+        this.events.push(`${type}: ${event.value}`);
+    }
+}

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

@@ -1,8 +1,6 @@
 import { Component } from '@angular/core';
 
-/**
+/** @title Datepicker with filter validation */
- * @title Datepicker Filter
- */
 @Component({
     selector   : 'datepicker-filter-example',
     templateUrl: 'datepicker-filter-example.html',

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

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

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

@@ -0,0 +1,5 @@
+<mat-form-field>
+    <input matInput [matDatepicker]="dp" placeholder="Verbose datepicker" [formControl]="date">
+    <mat-datepicker-toggle matSuffix [for]="dp"></mat-datepicker-toggle>
+    <mat-datepicker #dp></mat-datepicker>
+</mat-form-field>

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

@@ -0,0 +1,44 @@
+import { Component } from '@angular/core';
+import { FormControl } from '@angular/forms';
+import { MomentDateAdapter } from '@angular/material-moment-adapter';
+import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '@angular/material/core';
+
+import * as moment from 'moment';
+
+// See the Moment.js docs for the meaning of these formats:
+// https://momentjs.com/docs/#/displaying/format/
+export const MY_FORMATS = {
+    parse  : {
+        dateInput: 'LL'
+    },
+    display: {
+        dateInput         : 'LL',
+        monthYearLabel    : 'MMM YYYY',
+        dateA11yLabel     : 'LL',
+        monthYearA11yLabel: 'MMMM YYYY'
+    }
+};
+
+/** @title Datepicker with custom formats */
+@Component({
+    selector   : 'datepicker-formats-example',
+    templateUrl: 'datepicker-formats-example.html',
+    styleUrls  : ['datepicker-formats-example.css'],
+    providers  : [
+        // `MomentDateAdapter` can be automatically provided by importing `MomentDateModule` in your
+        // application's root module. We provide it at the component level here, due to limitations of
+        // our example generation script.
+        {provide    : DateAdapter,
+            useClass: MomentDateAdapter,
+            deps    : [MAT_DATE_LOCALE]
+        },
+
+        {provide    : MAT_DATE_FORMATS,
+            useValue: MY_FORMATS
+        }
+    ]
+})
+export class DatepickerFormatsExample
+{
+    date = new FormControl(moment());
+}

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

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

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

@@ -0,0 +1,7 @@
+<mat-form-field>
+    <input matInput [matDatepicker]="dp" placeholder="Different locale">
+    <mat-datepicker-toggle matSuffix [for]="dp"></mat-datepicker-toggle>
+    <mat-datepicker #dp></mat-datepicker>
+</mat-form-field>
+
+<button mat-button (click)="french()">Dynamically switch to French</button>

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

@@ -0,0 +1,42 @@
+import { Component } from '@angular/core';
+import { MAT_MOMENT_DATE_FORMATS, MomentDateAdapter } from '@angular/material-moment-adapter';
+import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '@angular/material/core';
+
+/** @title Datepicker with different locale */
+@Component({
+    selector   : 'datepicker-locale-example',
+    templateUrl: 'datepicker-locale-example.html',
+    styleUrls  : ['datepicker-locale-example.css'],
+    providers  : [
+        // The locale would typically be provided on the root module of your application. We do it at
+        // the component level here, due to limitations of our example generation script.
+        {
+            provide : MAT_DATE_LOCALE,
+            useValue: 'ja-JP'
+        },
+
+        // `MomentDateAdapter` and `MAT_MOMENT_DATE_FORMATS` can be automatically provided by importing
+        // `MatMomentDateModule` in your applications root module. We provide it at the component level
+        // here, due to limitations of our example generation script.
+        {
+            provide : DateAdapter,
+            useClass: MomentDateAdapter,
+            deps    : [MAT_DATE_LOCALE]
+        },
+        {
+            provide : MAT_DATE_FORMATS,
+            useValue: MAT_MOMENT_DATE_FORMATS
+        }
+    ]
+})
+export class DatepickerLocaleExample
+{
+    constructor(private adapter: DateAdapter<any>)
+    {
+    }
+
+    french()
+    {
+        this.adapter.setLocale('fr');
+    }
+}

src/assets/angular-material-examples/datepicker-min-max/datepicker-min-max-example.ts

@@ -1,8 +1,6 @@
 import { Component } from '@angular/core';
 
-/**
+/** @title Datepicker with min & max validation */
- * @title Datepicker Min Max
- */
 @Component({
     selector   : 'datepicker-min-max-example',
     templateUrl: 'datepicker-min-max-example.html',

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

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

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

@@ -0,0 +1,5 @@
+<mat-form-field>
+    <input matInput [matDatepicker]="dp" placeholder="Moment.js datepicker" [formControl]="date">
+    <mat-datepicker-toggle matSuffix [for]="dp"></mat-datepicker-toggle>
+    <mat-datepicker #dp></mat-datepicker>
+</mat-form-field>

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

@@ -0,0 +1,32 @@
+import { Component } from '@angular/core';
+import { FormControl } from '@angular/forms';
+import { MAT_MOMENT_DATE_FORMATS, MomentDateAdapter } from '@angular/material-moment-adapter';
+import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '@angular/material/core';
+
+import * as moment from 'moment';
+
+/** @title Datepicker that uses Moment.js dates */
+@Component({
+    selector   : 'datepicker-moment-example',
+    templateUrl: 'datepicker-moment-example.html',
+    styleUrls  : ['datepicker-moment-example.css'],
+    providers  : [
+        // `MomentDateAdapter` and `MAT_MOMENT_DATE_FORMATS` can be automatically provided by importing
+        // `MatMomentDateModule` in your applications root module. We provide it at the component level
+        // here, due to limitations of our example generation script.
+        {
+            provide : DateAdapter,
+            useClass: MomentDateAdapter,
+            deps    : [MAT_DATE_LOCALE]
+        },
+        {
+            provide : MAT_DATE_FORMATS,
+            useValue: MAT_MOMENT_DATE_FORMATS
+        }
+    ]
+})
+export class DatepickerMomentExample
+{
+    // Datepicker takes `Moment` objects instead of `Date` objects.
+    date = new FormControl(moment([2017, 0, 1]));
+}

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

@@ -1,8 +1,6 @@
 import { Component } from '@angular/core';
 
-/**
+/** @title Basic datepicker */
- * @title Basic datepicker
- */
 @Component({
     selector   : 'datepicker-overview-example',
     templateUrl: 'datepicker-overview-example.html',

src/assets/angular-material-examples/datepicker-start-view/datepicker-start-view-example.ts

@@ -1,8 +1,6 @@
 import { Component } from '@angular/core';
 
-/**
+/** @title Datepicker start date */
- * @title Datepicker start date
- */
 @Component({
     selector   : 'datepicker-start-view-example',
     templateUrl: 'datepicker-start-view-example.html',

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

@@ -1,8 +1,6 @@
 import { Component } from '@angular/core';
 
-/**
+/** @title Datepicker touch UI */
- * @title Datepicker Touch
- */
 @Component({
     selector   : 'datepicker-touch-example',
     templateUrl: 'datepicker-touch-example.html',

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

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

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

@@ -0,0 +1,18 @@
+<mat-form-field>
+    <input matInput [matDatepicker]="picker1" placeholder="Angular forms" [formControl]="date">
+    <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
+    <mat-datepicker #picker1></mat-datepicker>
+</mat-form-field>
+
+<mat-form-field>
+    <input matInput [matDatepicker]="picker2" placeholder="Angular forms (w/ deserialization)"
+           [formControl]="serializedDate">
+    <mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
+    <mat-datepicker #picker2></mat-datepicker>
+</mat-form-field>
+
+<mat-form-field>
+    <input matInput [matDatepicker]="picker3" placeholder="Value binding" [value]="date.value">
+    <mat-datepicker-toggle matSuffix [for]="picker3"></mat-datepicker-toggle>
+    <mat-datepicker #picker3></mat-datepicker>
+</mat-form-field>

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

@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+import { FormControl } from '@angular/forms';
+
+/** @title Datepicker selected value */
+@Component({
+    selector   : 'datepicker-value-example',
+    templateUrl: 'datepicker-value-example.html',
+    styleUrls  : ['datepicker-value-example.css']
+})
+export class DatepickerValueExample
+{
+    date = new FormControl(new Date());
+    serializedDate = new FormControl((new Date()).toISOString());
+}

src/assets/angular-material-examples/elevation-overview/elevation-overview-example.css

@@ -0,0 +1,4 @@
+.example-container {
+    padding: 16px;
+    margin-bottom: 16px;
+}

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

@@ -0,0 +1,7 @@
+<div class="example-container"
+     [class.mat-elevation-z2]="!isActive"
+     [class.mat-elevation-z8]="isActive">
+    Example
+</div>
+
+<button mat-button (click)="isActive = !isActive">Toggle Elevation</button>

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

@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+
+/**
+ * @title Elevation CSS classes
+ */
+@Component({
+    selector   : 'elevation-overview-example',
+    styleUrls  : ['elevation-overview-example.css'],
+    templateUrl: 'elevation-overview-example.html'
+})
+export class ElevationOverviewExample
+{
+    isActive = false;
+}

src/assets/angular-material-examples/form-field-custom-control/form-field-custom-control-example.ts

@@ -165,12 +165,12 @@ export class MyTelInput implements MatFormFieldControl<MyTel>, OnDestroy
 @Component({
     selector: 'form-field-custom-control-example',
     template: `
-    <mat-form-field>
+        <mat-form-field>
-      <my-tel-input placeholder="Phone number" required></my-tel-input>
+            <my-tel-input placeholder="Phone number" required></my-tel-input>
-      <mat-icon matSuffix>phone</mat-icon>
+            <mat-icon matSuffix>phone</mat-icon>
-      <mat-hint>Include area code</mat-hint>
+            <mat-hint>Include area code</mat-hint>
-    </mat-form-field>
+        </mat-form-field>
-  `
+    `
 })
 export class FormFieldCustomControlExample
 {

src/assets/angular-material-examples/form-field-theming/form-field-theming-example.html

@@ -9,6 +9,6 @@
 
     <mat-form-field [color]="options.value.color">
         <input matInput type="number" placeholder="Font size (px)" formControlName="fontSize" min="10">
-        <mat-error *ngIf="options.get('fontSize').invalid">Min size: 10px</mat-error>
+        <mat-error *ngIf="options.get('fontSize')?.invalid">Min size: 10px</mat-error>
     </mat-form-field>
 </form>

src/assets/angular-material-examples/grid-list-dynamic/grid-list-dynamic-example.ts

@@ -10,22 +10,26 @@ import { Component } from '@angular/core';
 export class GridListDynamicExample
 {
     tiles = [
-        {text    : 'One',
+        {
+            text : 'One',
             cols : 3,
             rows : 1,
             color: 'lightblue'
         },
-        {text    : 'Two',
+        {
+            text : 'Two',
             cols : 1,
             rows : 2,
             color: 'lightgreen'
         },
-        {text    : 'Three',
+        {
+            text : 'Three',
             cols : 1,
             rows : 1,
             color: 'lightpink'
         },
-        {text    : 'Four',
+        {
+            text : 'Four',
             cols : 2,
             rows : 1,
             color: '#DDBDF1'

src/assets/angular-material-examples/input-autosize-textarea/input-autosize-textarea-example.css

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

src/assets/angular-material-examples/input-autosize-textarea/input-autosize-textarea-example.html

@@ -0,0 +1,4 @@
+<mat-form-field>
+  <textarea matInput placeholder="Autosize textarea" matTextareaAutosize matAutosizeMinRows="2"
+            matAutosizeMaxRows="5"></textarea>
+</mat-form-field>

src/assets/angular-material-examples/input-autosize-textarea/input-autosize-textarea-example.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+/** @title Auto-resizing textarea */
+@Component({
+    selector   : 'input-autosize-textarea-example',
+    templateUrl: './input-autosize-textarea-example.html',
+    styleUrls  : ['./input-autosize-textarea-example.css']
+})
+export class InputAutosizeTextareaExample
+{
+}

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

@@ -1,7 +1,7 @@
 import { Component } from '@angular/core';
 
 /**
- * @title Input Clearable
+ * @title Input with a clear button
  */
 @Component({
     selector   : 'input-clearable-example',

src/assets/angular-material-examples/input-error-state-matcher/input-error-state-matcher-example.css

@@ -0,0 +1,9 @@
+.example-form {
+    min-width: 150px;
+    max-width: 500px;
+    width: 100%;
+}
+
+.example-full-width {
+    width: 100%;
+}

src/assets/angular-material-examples/input-error-state-matcher/input-error-state-matcher-example.html

@@ -0,0 +1,13 @@
+<form class="example-form">
+    <mat-form-field class="example-full-width">
+        <input matInput placeholder="Email" [formControl]="emailFormControl"
+               [errorStateMatcher]="matcher">
+        <mat-hint>Errors appear instantly!</mat-hint>
+        <mat-error *ngIf="emailFormControl.hasError('email') && !emailFormControl.hasError('required')">
+            Please enter a valid email address
+        </mat-error>
+        <mat-error *ngIf="emailFormControl.hasError('required')">
+            Email is <strong>required</strong>
+        </mat-error>
+    </mat-form-field>
+</form>

src/assets/angular-material-examples/input-error-state-matcher/input-error-state-matcher-example.ts

@@ -0,0 +1,29 @@
+import { Component } from '@angular/core';
+import { FormControl, FormGroupDirective, NgForm, Validators } from '@angular/forms';
+import { ErrorStateMatcher } from '@angular/material/core';
+
+/** Error when invalid control is dirty, touched, or submitted. */
+export class MyErrorStateMatcher implements ErrorStateMatcher
+{
+    isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean
+    {
+        const isSubmitted = form && form.submitted;
+        return !!(control && control.invalid && (control.dirty || control.touched || isSubmitted));
+    }
+}
+
+/** @title Input with a custom ErrorStateMatcher */
+@Component({
+    selector   : 'input-error-state-matcher-example',
+    templateUrl: './input-error-state-matcher-example.html',
+    styleUrls  : ['./input-error-state-matcher-example.css']
+})
+export class InputErrorStateMatcherExample
+{
+    emailFormControl = new FormControl('', [
+        Validators.required,
+        Validators.email
+    ]);
+
+    matcher = new MyErrorStateMatcher();
+}

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

@@ -1,7 +1,7 @@
 <form class="example-form">
     <mat-form-field class="example-full-width">
         <input matInput placeholder="Email" [formControl]="emailFormControl">
-        <mat-error *ngIf="emailFormControl.hasError('pattern')">
+        <mat-error *ngIf="emailFormControl.hasError('email') && !emailFormControl.hasError('required')">
             Please enter a valid email address
         </mat-error>
         <mat-error *ngIf="emailFormControl.hasError('required')">

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

@@ -1,10 +1,8 @@
 import { Component } from '@angular/core';
 import { FormControl, Validators } from '@angular/forms';
 
-const EMAIL_REGEX = /^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
-
 /**
- * @title Input Errors
+ * @title Input with error messages
  */
 @Component({
     selector   : 'input-errors-example',
@@ -13,10 +11,8 @@ const EMAIL_REGEX = /^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA
 })
 export class InputErrorsExample
 {
-
     emailFormControl = new FormControl('', [
         Validators.required,
-        Validators.pattern(EMAIL_REGEX)
+        Validators.email
     ]);
-
 }

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

@@ -1,7 +1,7 @@
 import { Component } from '@angular/core';
 
 /**
- * @title Input hints
+ * @title Input with hints
  */
 @Component({
     selector   : 'input-hint-example',

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

@@ -2,4 +2,8 @@
     <mat-form-field class="example-full-width">
         <input matInput placeholder="Favorite food" value="Sushi">
     </mat-form-field>
+
+    <mat-form-field class="example-full-width">
+        <textarea matInput placeholder="Leave a comment"></textarea>
+    </mat-form-field>
 </form>

src/assets/angular-material-examples/input-prefix-suffix/input-prefix-suffix-example.ts

@@ -1,7 +1,7 @@
 import { Component } from '@angular/core';
 
 /**
- * @title Input Prefixes and Suffixes
+ * @title Inputs with prefixes and suffixes
  */
 @Component({
     selector   : 'input-prefix-suffix-example',

src/assets/angular-material-examples/progress-bar-buffer/progress-bar-buffer-example.css

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

src/assets/angular-material-examples/progress-bar-buffer/progress-bar-buffer-example.html

@@ -0,0 +1 @@
+<mat-progress-bar mode="buffer"></mat-progress-bar>

src/assets/angular-material-examples/progress-bar-buffer/progress-bar-buffer-example.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+/**
+ * @title Buffer progress-bar
+ */
+@Component({
+    selector   : 'progress-bar-buffer-example',
+    templateUrl: 'progress-bar-buffer-example.html'
+})
+export class ProgressBarBufferExample
+{
+}

src/assets/angular-material-examples/progress-bar-determinate/progress-bar-determinate-example.css

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

src/assets/angular-material-examples/progress-bar-determinate/progress-bar-determinate-example.html

@@ -0,0 +1 @@
+<mat-progress-bar mode="determinate" value="40"></mat-progress-bar>

src/assets/angular-material-examples/progress-bar-determinate/progress-bar-determinate-example.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+/**
+ * @title Determinate progress-bar
+ */
+@Component({
+    selector   : 'progress-bar-determinate-example',
+    templateUrl: 'progress-bar-determinate-example.html'
+})
+export class ProgressBarDeterminateExample
+{
+}

src/assets/angular-material-examples/progress-bar-indeterminate/progress-bar-indeterminate-example.css

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

src/assets/angular-material-examples/progress-bar-indeterminate/progress-bar-indeterminate-example.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+/**
+ * @title Indeterminate progress-bar
+ */
+@Component({
+    selector   : 'progress-bar-indeterminate-example',
+    templateUrl: 'progress-bar-indeterminate-example.html'
+})
+export class ProgressBarIndeterminateExample
+{
+}

src/assets/angular-material-examples/progress-bar-overview/progress-bar-overview-example.ts

@@ -1,12 +0,0 @@
-import { Component } from '@angular/core';
-
-/**
- * @title Basic progress-bar
- */
-@Component({
-    selector   : 'progress-bar-overview-example',
-    templateUrl: 'progress-bar-overview-example.html'
-})
-export class ProgressBarOverviewExample
-{
-}

src/assets/angular-material-examples/progress-bar-query/progress-bar-query-example.css

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

src/assets/angular-material-examples/progress-bar-query/progress-bar-query-example.html

@@ -0,0 +1 @@
+<mat-progress-bar mode="query"></mat-progress-bar>

src/assets/angular-material-examples/progress-bar-query/progress-bar-query-example.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+/**
+ * @title Query progress-bar
+ */
+@Component({
+    selector   : 'progress-bar-query-example',
+    templateUrl: 'progress-bar-query-example.html'
+})
+export class ProgressBarQueryExample
+{
+}

src/assets/angular-material-examples/select-custom-trigger/select-custom-trigger-example.css

@@ -0,0 +1,4 @@
+.example-additional-selection {
+    opacity: 0.75;
+    font-size: 0.75em;
+}

src/assets/angular-material-examples/select-custom-trigger/select-custom-trigger-example.html

@@ -0,0 +1,11 @@
+<mat-form-field>
+    <mat-select placeholder="Toppings" [formControl]="toppings" multiple>
+        <mat-select-trigger>
+            {{toppings.value ? toppings.value[0] : ''}}
+            <span *ngIf="toppings.value?.length > 1" class="example-additional-selection">
+                (+{{toppings.value.length - 1}} others)
+            </span>
+        </mat-select-trigger>
+        <mat-option *ngFor="let topping of toppingList" [value]="topping">{{topping}}</mat-option>
+    </mat-select>
+</mat-form-field>

src/assets/angular-material-examples/select-custom-trigger/select-custom-trigger-example.ts

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+import { FormControl } from '@angular/forms';
+
+/** @title Select with custom trigger text */
+@Component({
+    selector   : 'select-custom-trigger-example',
+    templateUrl: 'select-custom-trigger-example.html',
+    styleUrls  : ['select-custom-trigger-example.css']
+})
+export class SelectCustomTriggerExample
+{
+    toppings = new FormControl();
+
+    toppingList = ['Extra cheese', 'Mushroom', 'Onion', 'Pepperoni', 'Sausage', 'Tomato'];
+}

src/assets/angular-material-examples/select-disabled/select-disabled-example.css

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

src/assets/angular-material-examples/select-disabled/select-disabled-example.html

@@ -0,0 +1,12 @@
+<p>
+    <mat-checkbox [formControl]="disableSelect">Disable select</mat-checkbox>
+</p>
+<p>
+    <mat-form-field>
+        <mat-select placeholder="Choose an option" [disabled]="disableSelect.value">
+            <mat-option value="option1">Option 1</mat-option>
+            <mat-option value="option2" disabled>Option 2 (disabled)</mat-option>
+            <mat-option value="option3">Option 3</mat-option>
+        </mat-select>
+    </mat-form-field>
+</p>

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

@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+import { FormControl } from '@angular/forms';
+
+/** @title Disabled select */
+@Component({
+    selector   : 'select-disabled-example',
+    templateUrl: 'select-disabled-example.html',
+    styleUrls  : ['select-disabled-example.css']
+})
+export class SelectDisabledExample
+{
+    disableSelect = new FormControl(false);
+}

src/assets/angular-material-examples/select-error-state-matcher/select-error-state-matcher-example.css

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

src/assets/angular-material-examples/select-error-state-matcher/select-error-state-matcher-example.html

@@ -0,0 +1,12 @@
+<mat-form-field>
+    <mat-select placeholder="Choose one" [formControl]="selected" [errorStateMatcher]="matcher">
+        <mat-option>Clear</mat-option>
+        <mat-option value="valid">Valid option</mat-option>
+        <mat-option value="invalid">Invalid option</mat-option>
+    </mat-select>
+    <mat-hint>Errors appear instantly!</mat-hint>
+    <mat-error *ngIf="selected.hasError('required')">You must make a selection</mat-error>
+    <mat-error *ngIf="selected.hasError('pattern') && !selected.hasError('required')">
+        Your selection is invalid
+    </mat-error>
+</mat-form-field>

src/assets/angular-material-examples/select-error-state-matcher/select-error-state-matcher-example.ts

@@ -0,0 +1,29 @@
+import { Component } from '@angular/core';
+import { FormControl, FormGroupDirective, NgForm, Validators } from '@angular/forms';
+import { ErrorStateMatcher } from '@angular/material/core';
+
+/** Error when invalid control is dirty, touched, or submitted. */
+export class MyErrorStateMatcher implements ErrorStateMatcher
+{
+    isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean
+    {
+        const isSubmitted = form && form.submitted;
+        return !!(control && control.invalid && (control.dirty || control.touched || isSubmitted));
+    }
+}
+
+/** @title Select with a custom ErrorStateMatcher */
+@Component({
+    selector   : 'select-error-state-matcher-example',
+    templateUrl: 'select-error-state-matcher-example.html',
+    styleUrls  : ['select-error-state-matcher-example.css']
+})
+export class SelectErrorStateMatcherExample
+{
+    selected = new FormControl('valid', [
+        Validators.required,
+        Validators.pattern('valid')
+    ]);
+
+    matcher = new MyErrorStateMatcher();
+}

src/assets/angular-material-examples/select-form/select-form-example.ts

@@ -5,20 +5,24 @@ import { Component } from '@angular/core';
  */
 @Component({
     selector   : 'select-form-example',
-    templateUrl: 'select-form-example.html'
+    templateUrl: 'select-form-example.html',
+    styleUrls  : ['select-form-example.css']
 })
 export class SelectFormExample
 {
     selectedValue: string;
 
     foods = [
-        {value       : 'steak-0',
+        {
+            value    : 'steak-0',
             viewValue: 'Steak'
         },
-        {value       : 'pizza-1',
+        {
+            value    : 'pizza-1',
             viewValue: 'Pizza'
         },
-        {value       : 'tacos-2',
+        {
+            value    : 'tacos-2',
             viewValue: 'Tacos'
         }
     ];

src/assets/angular-material-examples/select-hint-error/select-hint-error-example.css

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

src/assets/angular-material-examples/select-hint-error/select-hint-error-example.html

@@ -0,0 +1,10 @@
+<mat-form-field>
+    <mat-select placeholder="Favorite animal" [formControl]="animalControl" required>
+        <mat-option>--</mat-option>
+        <mat-option *ngFor="let animal of animals" [value]="animal">
+            {{animal.name}}
+        </mat-option>
+    </mat-select>
+    <mat-error *ngIf="animalControl.hasError('required')">Please choose an animal</mat-error>
+    <mat-hint>{{animalControl.value?.sound}}</mat-hint>
+</mat-form-field>

src/assets/angular-material-examples/select-hint-error/select-hint-error-example.ts

@@ -0,0 +1,32 @@
+import { Component } from '@angular/core';
+import { FormControl, Validators } from '@angular/forms';
+
+/** @title Select with form field features */
+@Component({
+    selector   : 'select-hint-error-example',
+    templateUrl: 'select-hint-error-example.html',
+    styleUrls  : ['select-hint-error-example.css']
+})
+export class SelectHintErrorExample
+{
+    animalControl = new FormControl('', [Validators.required]);
+
+    animals = [
+        {
+            name : 'Dog',
+            sound: 'Woof!'
+        },
+        {
+            name : 'Cat',
+            sound: 'Meow!'
+        },
+        {
+            name : 'Cow',
+            sound: 'Moo!'
+        },
+        {
+            name : 'Fox',
+            sound: 'Wa-pa-pa-pa-pa-pa-pow!'
+        }
+    ];
+}

src/assets/angular-material-examples/select-multiple/select-multiple-example.css

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

src/assets/angular-material-examples/select-multiple/select-multiple-example.html

@@ -0,0 +1,5 @@
+<mat-form-field>
+    <mat-select placeholder="Toppings" [formControl]="toppings" multiple>
+        <mat-option *ngFor="let topping of toppingList" [value]="topping">{{topping}}</mat-option>
+    </mat-select>
+</mat-form-field>

src/assets/angular-material-examples/select-multiple/select-multiple-example.ts

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+import { FormControl } from '@angular/forms';
+
+/** @title Select with multiple selection */
+@Component({
+    selector   : 'select-multiple-example',
+    templateUrl: 'select-multiple-example.html',
+    styleUrls  : ['select-multiple-example.css']
+})
+export class SelectMultipleExample
+{
+    toppings = new FormControl();
+
+    toppingList = ['Extra cheese', 'Mushroom', 'Onion', 'Pepperoni', 'Sausage', 'Tomato'];
+}

src/assets/angular-material-examples/select-no-ripple/select-no-ripple-example.css

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

src/assets/angular-material-examples/select-no-ripple/select-no-ripple-example.html

@@ -0,0 +1,7 @@
+<mat-form-field>
+    <mat-select placeholder="Select an option" disableRipple>
+        <mat-option value="1">Option 1</mat-option>
+        <mat-option value="2">Option 2</mat-option>
+        <mat-option value="3">Option 3</mat-option>
+    </mat-select>
+</mat-form-field>

src/assets/angular-material-examples/select-no-ripple/select-no-ripple-example.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+/** @title Select with no option ripple */
+@Component({
+    selector   : 'select-no-ripple-example',
+    templateUrl: 'select-no-ripple-example.html',
+    styleUrls  : ['select-no-ripple-example.css']
+})
+export class SelectNoRippleExample
+{
+}

src/assets/angular-material-examples/select-optgroup/select-optgroup-example.css

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

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

@@ -0,0 +1,11 @@
+<mat-form-field>
+    <mat-select placeholder="Pokemon" [formControl]="pokemonControl">
+        <mat-option>-- None --</mat-option>
+        <mat-optgroup *ngFor="let group of pokemonGroups" [label]="group.name"
+                      [disabled]="group.disabled">
+            <mat-option *ngFor="let pokemon of group.pokemon" [value]="pokemon.value">
+                {{ pokemon.viewValue }}
+            </mat-option>
+        </mat-optgroup>
+    </mat-select>
+</mat-form-field>

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

@@ -0,0 +1,81 @@
+import { Component } from '@angular/core';
+import { FormControl } from '@angular/forms';
+
+/** @title Select with option groups */
+@Component({
+    selector   : 'select-optgroup-example',
+    templateUrl: 'select-optgroup-example.html',
+    styleUrls  : ['select-optgroup-example.css']
+})
+export class SelectOptgroupExample
+{
+    pokemonControl = new FormControl();
+
+    pokemonGroups = [
+        {
+            name   : 'Grass',
+            pokemon: [
+                {
+                    value    : 'bulbasaur-0',
+                    viewValue: 'Bulbasaur'
+                },
+                {
+                    value    : 'oddish-1',
+                    viewValue: 'Oddish'
+                },
+                {
+                    value    : 'bellsprout-2',
+                    viewValue: 'Bellsprout'
+                }
+            ]
+        },
+        {
+            name   : 'Water',
+            pokemon: [
+                {
+                    value    : 'squirtle-3',
+                    viewValue: 'Squirtle'
+                },
+                {
+                    value    : 'psyduck-4',
+                    viewValue: 'Psyduck'
+                },
+                {
+                    value    : 'horsea-5',
+                    viewValue: 'Horsea'
+                }
+            ]
+        },
+        {
+            name    : 'Fire',
+            disabled: true,
+            pokemon : [
+                {
+                    value    : 'charmander-6',
+                    viewValue: 'Charmander'
+                },
+                {
+                    value    : 'vulpix-7',
+                    viewValue: 'Vulpix'
+                },
+                {
+                    value    : 'flareon-8',
+                    viewValue: 'Flareon'
+                }
+            ]
+        },
+        {
+            name   : 'Psychic',
+            pokemon: [
+                {
+                    value    : 'mew-9',
+                    viewValue: 'Mew'
+                },
+                {
+                    value    : 'mewtwo-10',
+                    viewValue: 'Mewtwo'
+                }
+            ]
+        }
+    ];
+}

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

@@ -5,18 +5,22 @@ import { Component } from '@angular/core';
  */
 @Component({
     selector   : 'select-overview-example',
-    templateUrl: 'select-overview-example.html'
+    templateUrl: 'select-overview-example.html',
+    styleUrls  : ['select-overview-example.css']
 })
 export class SelectOverviewExample
 {
     foods = [
-        {value       : 'steak-0',
+        {
+            value    : 'steak-0',
             viewValue: 'Steak'
         },
-        {value       : 'pizza-1',
+        {
+            value    : 'pizza-1',
             viewValue: 'Pizza'
         },
-        {value       : 'tacos-2',
+        {
+            value    : 'tacos-2',
             viewValue: 'Tacos'
         }
     ];

src/assets/angular-material-examples/select-panel-class/select-panel-class-example.css

@@ -0,0 +1,11 @@
+.example-panel-red .mat-select-content {
+    background: rgba(255, 0, 0, 0.5);
+}
+
+.example-panel-green .mat-select-content {
+    background: rgba(0, 255, 0, 0.5);
+}
+
+.example-panel-blue .mat-select-content {
+    background: rgba(0, 0, 255, 0.5);
+}

src/assets/angular-material-examples/select-panel-class/select-panel-class-example.html

@@ -0,0 +1,8 @@
+<mat-form-field>
+    <mat-select placeholder="Panel color" [formControl]="panelColor"
+                panelClass="example-panel-{{panelColor.value}}">
+        <mat-option value="red">Red</mat-option>
+        <mat-option value="green">Green</mat-option>
+        <mat-option value="blue">Blue</mat-option>
+    </mat-select>
+</mat-form-field>

src/assets/angular-material-examples/select-panel-class/select-panel-class-example.ts

@@ -0,0 +1,16 @@
+import { Component, ViewEncapsulation } from '@angular/core';
+import { FormControl } from '@angular/forms';
+
+/**
+ * @title Select with custom panel styling
+ */
+@Component({
+    selector     : 'select-panel-class-example',
+    templateUrl  : 'select-panel-class-example.html',
+    styleUrls    : ['select-panel-class-example.css'],
+    encapsulation: ViewEncapsulation.None
+})
+export class SelectPanelClassExample
+{
+    panelColor = new FormControl('red');
+}

src/assets/angular-material-examples/select-reset/select-reset-example.css

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

src/assets/angular-material-examples/select-reset/select-reset-example.html

@@ -0,0 +1,6 @@
+<mat-form-field>
+    <mat-select placeholder="State">
+        <mat-option>None</mat-option>
+        <mat-option *ngFor="let state of states" [value]="state">{{state}}</mat-option>
+    </mat-select>
+</mat-form-field>

src/assets/angular-material-examples/select-reset/select-reset-example.ts

@@ -0,0 +1,20 @@
+import { Component } from '@angular/core';
+
+/** @title Select with reset option */
+@Component({
+    selector   : 'select-reset-example',
+    templateUrl: 'select-reset-example.html',
+    styleUrls  : ['select-reset-example.css']
+})
+export class SelectResetExample
+{
+    states = [
+        'Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware',
+        'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky',
+        'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi',
+        'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey', 'New Mexico',
+        'New York', 'North Carolina', 'North Dakota', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania',
+        'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont',
+        'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'
+    ];
+}

src/assets/angular-material-examples/select-value-binding/select-value-binding-example.css

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

src/assets/angular-material-examples/select-value-binding/select-value-binding-example.html

@@ -0,0 +1,10 @@
+<mat-form-field>
+    <mat-select [(value)]="selected">
+        <mat-option>None</mat-option>
+        <mat-option value="option1">Option 1</mat-option>
+        <mat-option value="option2">Option 2</mat-option>
+        <mat-option value="option3">Option 3</mat-option>
+    </mat-select>
+</mat-form-field>
+
+<p>You selected: {{selected}}</p>

src/assets/angular-material-examples/select-value-binding/select-value-binding-example.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+/** @title Select with 2-way value binding */
+@Component({
+    selector   : 'select-value-binding-example',
+    templateUrl: 'select-value-binding-example.html',
+    styleUrls  : ['select-value-binding-example.css']
+})
+export class SelectValueBindingExample
+{
+    selected = 'option2';
+}

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

@@ -12,31 +12,36 @@ import { Sort } from '@angular/material';
 export class SortOverviewExample
 {
     desserts = [
-        {name       : 'Frozen yogurt',
+        {
+            name    : 'Frozen yogurt',
             calories: '159',
             fat     : '6',
             carbs   : '24',
             protein : '4'
         },
-        {name       : 'Ice cream sandwich',
+        {
+            name    : 'Ice cream sandwich',
             calories: '237',
             fat     : '9',
             carbs   : '37',
             protein : '4'
         },
-        {name       : 'Eclair',
+        {
+            name    : 'Eclair',
             calories: '262',
             fat     : '16',
             carbs   : '24',
             protein : '6'
         },
-        {name       : 'Cupcake',
+        {
+            name    : 'Cupcake',
             calories: '305',
             fat     : '4',
             carbs   : '67',
             protein : '4'
         },
-        {name       : 'Gingerbread',
+        {
+            name    : 'Gingerbread',
             calories: '356',
             fat     : '16',
             carbs   : '49',

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

@@ -1,7 +1,5 @@
 import { Component } from '@angular/core';
-import { DataSource } from '@angular/cdk/collections';
+import { MatTableDataSource } from '@angular/material';
-import { Observable } from 'rxjs/Observable';
-import 'rxjs/add/observable/of';
 
 /**
  * @title Basic table
@@ -14,7 +12,7 @@ import 'rxjs/add/observable/of';
 export class TableBasicExample
 {
     displayedColumns = ['position', 'name', 'weight', 'symbol'];
-    dataSource = new ExampleDataSource();
+    dataSource = new MatTableDataSource<Element>(ELEMENT_DATA);
 }
 
 export interface Element
@@ -25,124 +23,125 @@ export interface Element
     symbol: string;
 }
 
-const data: Element[] = [
+const ELEMENT_DATA: Element[] = [
-    {position : 1,
+    {
-        name  : 'Hydrogen',
+        position: 1,
-        weight: 1.0079,
+        name    : 'Hydrogen',
-        symbol: 'H'
+        weight  : 1.0079,
+        symbol  : 'H'
     },
-    {position : 2,
+    {
-        name  : 'Helium',
+        position: 2,
-        weight: 4.0026,
+        name    : 'Helium',
-        symbol: 'He'
+        weight  : 4.0026,
+        symbol  : 'He'
     },
-    {position : 3,
+    {
-        name  : 'Lithium',
+        position: 3,
-        weight: 6.941,
+        name    : 'Lithium',
-        symbol: 'Li'
+        weight  : 6.941,
+        symbol  : 'Li'
     },
-    {position : 4,
+    {
-        name  : 'Beryllium',
+        position: 4,
-        weight: 9.0122,
+        name    : 'Beryllium',
-        symbol: 'Be'
+        weight  : 9.0122,
+        symbol  : 'Be'
     },
-    {position : 5,
+    {
-        name  : 'Boron',
+        position: 5,
-        weight: 10.811,
+        name    : 'Boron',
-        symbol: 'B'
+        weight  : 10.811,
+        symbol  : 'B'
     },
-    {position : 6,
+    {
-        name  : 'Carbon',
+        position: 6,
-        weight: 12.0107,
+        name    : 'Carbon',
-        symbol: 'C'
+        weight  : 12.0107,
+        symbol  : 'C'
     },
-    {position : 7,
+    {
-        name  : 'Nitrogen',
+        position: 7,
-        weight: 14.0067,
+        name    : 'Nitrogen',
-        symbol: 'N'
+        weight  : 14.0067,
+        symbol  : 'N'
     },
-    {position : 8,
+    {
-        name  : 'Oxygen',
+        position: 8,
-        weight: 15.9994,
+        name    : 'Oxygen',
-        symbol: 'O'
+        weight  : 15.9994,
+        symbol  : 'O'
     },
-    {position : 9,
+    {
-        name  : 'Fluorine',
+        position: 9,
-        weight: 18.9984,
+        name    : 'Fluorine',
-        symbol: 'F'
+        weight  : 18.9984,
+        symbol  : 'F'
     },
-    {position : 10,
+    {
-        name  : 'Neon',
+        position: 10,
-        weight: 20.1797,
+        name    : 'Neon',
-        symbol: 'Ne'
+        weight  : 20.1797,
+        symbol  : 'Ne'
     },
-    {position : 11,
+    {
-        name  : 'Sodium',
+        position: 11,
-        weight: 22.9897,
+        name    : 'Sodium',
-        symbol: 'Na'
+        weight  : 22.9897,
+        symbol  : 'Na'
     },
-    {position : 12,
+    {
-        name  : 'Magnesium',
+        position: 12,
-        weight: 24.305,
+        name    : 'Magnesium',
-        symbol: 'Mg'
+        weight  : 24.305,
+        symbol  : 'Mg'
     },
-    {position : 13,
+    {
-        name  : 'Aluminum',
+        position: 13,
-        weight: 26.9815,
+        name    : 'Aluminum',
-        symbol: 'Al'
+        weight  : 26.9815,
+        symbol  : 'Al'
     },
-    {position : 14,
+    {
-        name  : 'Silicon',
+        position: 14,
-        weight: 28.0855,
+        name    : 'Silicon',
-        symbol: 'Si'
+        weight  : 28.0855,
+        symbol  : 'Si'
     },
-    {position : 15,
+    {
-        name  : 'Phosphorus',
+        position: 15,
-        weight: 30.9738,
+        name    : 'Phosphorus',
-        symbol: 'P'
+        weight  : 30.9738,
+        symbol  : 'P'
     },
-    {position : 16,
+    {
-        name  : 'Sulfur',
+        position: 16,
-        weight: 32.065,
+        name    : 'Sulfur',
-        symbol: 'S'
+        weight  : 32.065,
+        symbol  : 'S'
     },
-    {position : 17,
+    {
-        name  : 'Chlorine',
+        position: 17,
-        weight: 35.453,
+        name    : 'Chlorine',
-        symbol: 'Cl'
+        weight  : 35.453,
+        symbol  : 'Cl'
     },
-    {position : 18,
+    {
-        name  : 'Argon',
+        position: 18,
-        weight: 39.948,
+        name    : 'Argon',
-        symbol: 'Ar'
+        weight  : 39.948,
+        symbol  : 'Ar'
     },
-    {position : 19,
+    {
-        name  : 'Potassium',
+        position: 19,
-        weight: 39.0983,
+        name    : 'Potassium',
-        symbol: 'K'
+        weight  : 39.0983,
+        symbol  : 'K'
     },
-    {position : 20,
+    {
-        name  : 'Calcium',
+        position: 20,
-        weight: 40.078,
+        name    : 'Calcium',
-        symbol: 'Ca'
+        weight  : 40.078,
+        symbol  : 'Ca'
     }
 ];
-
-/**
- * Data source to provide what data should be rendered in the table. The observable provided
- * in connect should emit exactly the data that should be rendered by the table. If the data is
- * altered, the observable should emit that new set of data on the stream. In our case here,
- * we return a stream that contains only one set of data that doesn't change.
- */
-export class ExampleDataSource extends DataSource<any>
-{
-    /** Connect function called by the table to retrieve one stream containing the data to render. */
-    connect(): Observable<Element[]>
-    {
-        return Observable.of(data);
-    }
-
-    disconnect()
-    {
-    }
-}

src/assets/angular-material-examples/table-filtering/table-filtering-example.css

@@ -7,17 +7,12 @@
 
 .example-header {
     min-height: 64px;
-    display: flex;
-    align-items: baseline;
     padding: 8px 24px 0;
-    font-size: 20px;
-    justify-content: space-between;
 }
 
 .mat-form-field {
     font-size: 14px;
-    flex-grow: 1;
+    width: 100%;
-    margin-left: 32px;
 }
 
 .mat-table {

src/assets/angular-material-examples/table-filtering/table-filtering-example.html

@@ -1,37 +1,34 @@
 <div class="example-container mat-elevation-z8">
     <div class="example-header">
-        <mat-form-field floatPlaceholder="never">
+        <mat-form-field>
-            <input matInput #filter placeholder="Filter users">
+            <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
         </mat-form-field>
     </div>
 
     <mat-table #table [dataSource]="dataSource">
 
-        <!--- Note that these columns can be defined in any order.
+        <!-- Position Column -->
-              The actual rendered columns are set as a property on the row definition" -->
+        <ng-container matColumnDef="position">
-
+            <mat-header-cell *matHeaderCellDef> No.</mat-header-cell>
-        <!-- ID Column -->
+            <mat-cell *matCellDef="let element"> {{element.position}}</mat-cell>
-        <ng-container matColumnDef="userId">
-            <mat-header-cell *matHeaderCellDef> ID</mat-header-cell>
-            <mat-cell *matCellDef="let row"> {{row.id}}</mat-cell>
-        </ng-container>
-
-        <!-- Progress Column -->
-        <ng-container matColumnDef="progress">
-            <mat-header-cell *matHeaderCellDef> Progress</mat-header-cell>
-            <mat-cell *matCellDef="let row"> {{row.progress}}%</mat-cell>
         </ng-container>
 
         <!-- Name Column -->
-        <ng-container matColumnDef="userName">
+        <ng-container matColumnDef="name">
             <mat-header-cell *matHeaderCellDef> Name</mat-header-cell>
-            <mat-cell *matCellDef="let row"> {{row.name}}</mat-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>
 
         <!-- Color Column -->
-        <ng-container matColumnDef="color">
+        <ng-container matColumnDef="symbol">
-            <mat-header-cell *matHeaderCellDef> Color</mat-header-cell>
+            <mat-header-cell *matHeaderCellDef> Symbol</mat-header-cell>
-            <mat-cell *matCellDef="let row" [style.color]="row.color"> {{row.color}}</mat-cell>
+            <mat-cell *matCellDef="let element"> {{element.symbol}}</mat-cell>
         </ng-container>
 
         <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>

src/assets/angular-material-examples/table-filtering/table-filtering-example.ts

@@ -1,13 +1,5 @@
-import { Component, ElementRef, ViewChild } from '@angular/core';
+import { Component } from '@angular/core';
-import { DataSource } from '@angular/cdk/collections';
+import { MatTableDataSource } from '@angular/material';
-import { BehaviorSubject } from 'rxjs/BehaviorSubject';
-import { Observable } from 'rxjs/Observable';
-import 'rxjs/add/operator/startWith';
-import 'rxjs/add/observable/merge';
-import 'rxjs/add/operator/map';
-import 'rxjs/add/operator/debounceTime';
-import 'rxjs/add/operator/distinctUntilChanged';
-import 'rxjs/add/observable/fromEvent';
 
 /**
  * @title Table with filtering
@@ -19,134 +11,144 @@ import 'rxjs/add/observable/fromEvent';
 })
 export class TableFilteringExample
 {
-    displayedColumns = ['userId', 'userName', 'progress', 'color'];
+    displayedColumns = ['position', 'name', 'weight', 'symbol'];
-    exampleDatabase = new ExampleDatabase();
+    dataSource = new MatTableDataSource(ELEMENT_DATA);
-    dataSource: ExampleDataSource | null;
 
-    @ViewChild('filter') filter: ElementRef;
+    applyFilter(filterValue: string)
-
-    ngOnInit()
     {
-        this.dataSource = new ExampleDataSource(this.exampleDatabase);
+        filterValue = filterValue.trim(); // Remove whitespace
-        Observable.fromEvent(this.filter.nativeElement, 'keyup')
+        filterValue = filterValue.toLowerCase(); // MatTableDataSource defaults to lowercase matches
-                  .debounceTime(150)
+        this.dataSource.filter = filterValue;
-                  .distinctUntilChanged()
-                  .subscribe(() => {
-                      if ( !this.dataSource )
-                      {
-                          return;
-                      }
-                      this.dataSource.filter = this.filter.nativeElement.value;
-                  });
     }
 }
 
-/** Constants used to fill up our data base. */
+export interface Element
-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;
     name: string;
-    progress: string;
+    position: number;
-    color: string;
+    weight: number;
+    symbol: string;
 }
 
-/** An example database that the data source uses to retrieve data for the table. */
+const ELEMENT_DATA: Element[] = [
-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;
+        position: 1,
-    }
+        name    : 'Hydrogen',
-
+        weight  : 1.0079,
-    constructor()
+        symbol  : 'H'
+    },
     {
-        // Fill up the database with 100 users.
+        position: 2,
-        for ( let i = 0; i < 100; i++ )
+        name    : 'Helium',
-        {
+        weight  : 4.0026,
-            this.addUser();
+        symbol  : 'He'
-        }
+    },
-    }
-
-    /** Adds a new user to the database. */
-    addUser()
     {
-        const copiedData = this.data.slice();
+        position: 3,
-        copiedData.push(this.createNewUser());
+        name    : 'Lithium',
-        this.dataChange.next(copiedData);
+        weight  : 6.941,
-    }
+        symbol  : 'Li'
-
+    },
-    /** Builds and returns a new User. */
-    private createNewUser()
     {
-        const name =
+        position: 4,
-                  NAMES[Math.round(Math.random() * (NAMES.length - 1))] + ' ' +
+        name    : 'Beryllium',
-                  NAMES[Math.round(Math.random() * (NAMES.length - 1))].charAt(0) + '.';
+        weight  : 9.0122,
-
+        symbol  : 'Be'
-        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))]
-        };
-    }
-}
-
-/**
- * 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<any>
-{
-    _filterChange = new BehaviorSubject('');
-
-    get filter(): string
     {
-        return this._filterChange.value;
+        position: 5,
-    }
+        name    : 'Boron',
-
+        weight  : 10.811,
-    set filter(filter: string)
+        symbol  : 'B'
+    },
     {
-        this._filterChange.next(filter);
+        position: 6,
-    }
+        name    : 'Carbon',
-
+        weight  : 12.0107,
-    constructor(private _exampleDatabase: ExampleDatabase)
+        symbol  : 'C'
+    },
     {
-        super();
+        position: 7,
-    }
+        name    : 'Nitrogen',
-
+        weight  : 14.0067,
-    /** Connect function called by the table to retrieve one stream containing the data to render. */
+        symbol  : 'N'
-    connect(): Observable<UserData[]>
+    },
     {
-        const displayDataChanges = [
+        position: 8,
-            this._exampleDatabase.dataChange,
+        name    : 'Oxygen',
-            this._filterChange
+        weight  : 15.9994,
-        ];
+        symbol  : 'O'
-
+    },
-        return Observable.merge(...displayDataChanges).map(() => {
-            return this._exampleDatabase.data.slice().filter((item: UserData) => {
-                let searchStr = (item.name + item.color).toLowerCase();
-                return searchStr.indexOf(this.filter.toLowerCase()) != -1;
-            });
-        });
-    }
-
-    disconnect()
     {
+        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'
     }
-}
+];

src/assets/angular-material-examples/table-http/table-http-example.css

@@ -20,23 +20,6 @@
     min-height: 300px;
 }
 
-.mat-column-title {
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    flex: 1;
-    overflow: hidden;
-}
-
-/* Column Widths */
-.mat-column-number,
-.mat-column-state {
-    max-width: 64px;
-}
-
-.mat-column-created {
-    max-width: 124px;
-}
-
 .example-loading-shade {
     position: absolute;
     top: 0;
@@ -55,3 +38,13 @@
     max-width: 360px;
     text-align: center;
 }
+
+/* Column Widths */
+.mat-column-number,
+.mat-column-state {
+    max-width: 64px;
+}
+
+.mat-column-created {
+    max-width: 124px;
+}