@angular/material v2.0.0-beta.12 examples updated.

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

@@ -26,6 +26,13 @@ import { DialogElementsExampleDialog, DialogElementsExample } from '../../../../
 import { DialogOverviewExampleDialog, DialogOverviewExample } from '../../../../../assets/angular-material-examples/dialog-overview/dialog-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';
+import { FormFieldErrorExample } from '../../../../../assets/angular-material-examples/form-field-error/form-field-error-example';
+import { FormFieldHintExample } from '../../../../../assets/angular-material-examples/form-field-hint/form-field-hint-example';
+import { FormFieldOverviewExample } from '../../../../../assets/angular-material-examples/form-field-overview/form-field-overview-example';
+import { FormFieldPlaceholderExample } from '../../../../../assets/angular-material-examples/form-field-placeholder/form-field-placeholder-example';
+import { FormFieldPrefixSuffixExample } from '../../../../../assets/angular-material-examples/form-field-prefix-suffix/form-field-prefix-suffix-example';
+import { FormFieldThemingExample } from '../../../../../assets/angular-material-examples/form-field-theming/form-field-theming-example';
 import { GridListDynamicExample } from '../../../../../assets/angular-material-examples/grid-list-dynamic/grid-list-dynamic-example';
 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';
@@ -95,6 +102,15 @@ export const COMPONENT_MAP = {
         'datepicker-touch',
         'datepicker-api'
     ],
+    'form-field'      : [
+        'form-field-overview',
+        'form-field-placeholder',
+        'form-field-hint',
+        'form-field-error',
+        'form-field-prefix-suffix',
+        'form-field-theming',
+        'form-field-custom-control'
+    ],
     'input'           : [
         'input-overview',
         'input-errors',
@@ -167,7 +183,8 @@ export const COMPONENT_MAP = {
     ],
     'chips'           : [
         'chips-overview',
-        'chips-input'
+        'chips-input',
+        'chips-stacked'
     ],
     'icon'            : [
         'icon-overview',
@@ -378,6 +395,48 @@ export const EXAMPLE_COMPONENTS = {
         additionalFiles: null,
         selectorName   : null
     },
+    'form-field-custom-control'    : {
+        title          : 'Form field with custom telephone number input control. ',
+        component      : FormFieldCustomControlExample,
+        additionalFiles: ['form-field-custom-control-example.html'],
+        selectorName   : 'FormFieldCustomControlExample, MyTelInput'
+    },
+    'form-field-error'             : {
+        title          : 'Form field with error messages ',
+        component      : FormFieldErrorExample,
+        additionalFiles: null,
+        selectorName   : null
+    },
+    'form-field-hint'              : {
+        title          : 'Form field with hints ',
+        component      : FormFieldHintExample,
+        additionalFiles: null,
+        selectorName   : null
+    },
+    'form-field-overview'          : {
+        title          : 'Simple form field ',
+        component      : FormFieldOverviewExample,
+        additionalFiles: null,
+        selectorName   : null
+    },
+    'form-field-placeholder'       : {
+        title          : 'Form field with placeholder ',
+        component      : FormFieldPlaceholderExample,
+        additionalFiles: null,
+        selectorName   : null
+    },
+    'form-field-prefix-suffix'     : {
+        title          : 'Form field with prefix & suffix ',
+        component      : FormFieldPrefixSuffixExample,
+        additionalFiles: null,
+        selectorName   : null
+    },
+    'form-field-theming'           : {
+        title          : 'Form field theming ',
+        component      : FormFieldThemingExample,
+        additionalFiles: null,
+        selectorName   : null
+    },
     'grid-list-dynamic'            : {
         title          : 'Dynamic grid-list',
         component      : GridListDynamicExample,
@@ -707,6 +766,13 @@ export const EXAMPLE_LIST = [
     DialogOverviewExample,
     ExpansionOverviewExample,
     ExpansionStepsExample,
+    MyTelInput, FormFieldCustomControlExample,
+    FormFieldErrorExample,
+    FormFieldHintExample,
+    FormFieldOverviewExample,
+    FormFieldPlaceholderExample,
+    FormFieldPrefixSuffixExample,
+    FormFieldThemingExample,
     GridListDynamicExample,
     GridListOverviewExample,
     IconOverviewExample,

src/app/navigation.model.ts

@@ -377,6 +377,11 @@ export class NavigationModel
                                         'type' : 'item',
                                         'url'  : '/components/angular-material/datepicker'
                                     },
+                                    {
+                                        'title': 'Form field',
+                                        'type' : 'item',
+                                        'url'  : '/components/angular-material/form-field'
+                                    },
                                     {
                                         'title': 'Input',
                                         'type' : 'item',

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

@@ -1,14 +1,14 @@
 <mat-form-field class="demo-chip-list">
-    <mat-chip-list matPrefix #chipList>
+    <mat-chip-list #chipList>
         <mat-chip *ngFor="let fruit of fruits" [selectable]="selectable"
                   [removable]="removable" (remove)="remove(fruit)">
             {{fruit.name}}
             <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
         </mat-chip>
+        <input placeholder="New fruit..."
+               [matChipInputFor]="chipList"
+               [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
+               [matChipInputAddOnBlur]="addOnBlur"
+               (matChipInputTokenEnd)="add($event)"/>
     </mat-chip-list>
-    <input matInput placeholder="New fruit..."
-           [matChipInputFor]="chipList"
-           [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
-           [matChipInputAddOnBlur]="addOnBlur"
-           (matChipInputTokenEnd)="add($event)"/>
 </mat-form-field>

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

@@ -1,7 +1,5 @@
 <mat-chip-list class="mat-chip-list-stacked">
-    <mat-chip *ngFor="let chipColor of availableColors"
+    <mat-chip *ngFor="let chip of availableColors" selected="true" [color]="chip.color">
-              selected="true"
+        {{chip.name}}
-              color="{{chipColor.color}}">
-        {{chipColor.name}}
     </mat-chip>
 </mat-chip-list>

src/assets/angular-material-examples/dialog-content/dialog-content-example-dialog.html

@@ -1,4 +1,4 @@
-<h2 matDialogTitle>Install Angular</h2>
+<h2 mat-dialog-title>Install Angular</h2>
 <mat-dialog-content>
     <h3>DEVELOP ACROSS ALL PLATFORMS</h3>
     <p>Learn one way to build applications with Angular and reuse your code and abilities to build
@@ -20,6 +20,6 @@
         that supports Google's largest applications.</p>
 </mat-dialog-content>
 <mat-dialog-actions>
-    <button mat-button [matDialogClose]="true" tabindex="1">Install</button>
+    <button mat-button [mat-dialog-close]="true" tabindex="1">Install</button>
-    <button mat-button matDialogClose tabindex="-1">Cancel</button>
+    <button mat-button mat-dialog-close tabindex="-1">Cancel</button>
 </mat-dialog-actions>

src/assets/angular-material-examples/dialog-data/dialog-data-example-dialog.html

@@ -1,4 +1,4 @@
-<h1 matDialogTitle>Favorite Animal</h1>
+<h1 mat-dialog-title>Favorite Animal</h1>
 <div mat-dialog-content>
     My favorite animal is:
     <ul>

src/assets/angular-material-examples/dialog-elements/dialog-elements-example-dialog.html

@@ -1,5 +1,5 @@
-<h1 matDialogTitle>Dialog with elements</h1>
+<h1 mat-dialog-title>Dialog with elements</h1>
 <div mat-dialog-content>This dialog showcases the title, close, content and actions elements.</div>
 <div mat-dialog-actions>
-    <button mat-button matDialogClose>Close</button>
+    <button mat-button mat-dialog-close>Close</button>
 </div>

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

@@ -1,4 +1,4 @@
-<h1 matDialogTitle>Hi {{data.name}}</h1>
+<h1 mat-dialog-title>Hi {{data.name}}</h1>
 <div mat-dialog-content>
     <p>What's your favorite animal?</p>
     <mat-form-field>
@@ -6,6 +6,6 @@
     </mat-form-field>
 </div>
 <div mat-dialog-actions>
-    <button mat-button [matDialogClose]="data.animal" tabindex="2">Ok</button>
+    <button mat-button [mat-dialog-close]="data.animal" tabindex="2">Ok</button>
     <button mat-button (click)="onNoClick()" tabindex="-1">No Thanks</button>
 </div>

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

@@ -0,0 +1,21 @@
+div {
+    display: flex;
+}
+
+input {
+    border: none;
+    background: none;
+    padding: 0;
+    outline: none;
+    font: inherit;
+    text-align: center;
+}
+
+span {
+    opacity: 0;
+    transition: opacity 200ms;
+}
+
+:host.floating span {
+    opacity: 1;
+}

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

@@ -0,0 +1,7 @@
+<div [formGroup]="parts">
+    <input class="area" formControlName="area" size="3" [disabled]="disabled">
+    <span>&ndash;</span>
+    <input class="exchange" formControlName="exchange" size="3" [disabled]="disabled">
+    <span>&ndash;</span>
+    <input class="subscriber" formControlName="subscriber" size="4" [disabled]="disabled">
+</div>

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

@@ -0,0 +1,177 @@
+import { FocusMonitor } from '@angular/cdk/a11y';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { Component, ElementRef, Input, OnDestroy, Renderer2 } from '@angular/core';
+import { FormBuilder, FormGroup } from '@angular/forms';
+import { MatFormFieldControl } from '@angular/material/form-field';
+import { Subject } from 'rxjs/Subject';
+
+/** Data structure for holding telephone number. */
+export class MyTel
+{
+    constructor(public area: string, public exchange: string, public subscriber: string)
+    {
+    }
+}
+
+/** Custom `MatFormFieldControl` for telephone number input. */
+@Component({
+    selector   : 'my-tel-input',
+    templateUrl: 'form-field-custom-control-example.html',
+    styleUrls  : ['form-field-custom-control-example.css'],
+    providers  : [
+        {
+            provide    : MatFormFieldControl,
+            useExisting: MyTelInput
+        }
+    ],
+    host       : {
+        '[class.floating]'       : 'shouldPlaceholderFloat',
+        '[id]'                   : 'id',
+        '[attr.aria-describedby]': 'describedBy'
+    }
+})
+export class MyTelInput implements MatFormFieldControl<MyTel>, OnDestroy
+{
+    static nextId = 0;
+
+    parts: FormGroup;
+
+    stateChanges = new Subject<void>();
+
+    focused = false;
+
+    ngControl = null;
+
+    errorState = false;
+
+    controlType = 'my-tel-input';
+
+    get empty()
+    {
+        let n = this.parts.value;
+        return !n.area && !n.exchange && !n.subscriber;
+    }
+
+    get shouldPlaceholderFloat()
+    {
+        return this.focused || !this.empty;
+    }
+
+    id = `my-tel-input-${MyTelInput.nextId++}`;
+
+    describedBy = '';
+
+    @Input()
+    get placeholder()
+    {
+        return this._placeholder;
+    }
+
+    set placeholder(plh)
+    {
+        this._placeholder = plh;
+        this.stateChanges.next();
+    }
+
+    private _placeholder: string;
+
+    @Input()
+    get required()
+    {
+        return this._required;
+    }
+
+    set required(req)
+    {
+        this._required = coerceBooleanProperty(req);
+        this.stateChanges.next();
+    }
+
+    private _required = false;
+
+    @Input()
+    get disabled()
+    {
+        return this._disabled;
+    }
+
+    set disabled(dis)
+    {
+        this._disabled = coerceBooleanProperty(dis);
+        this.stateChanges.next();
+    }
+
+    private _disabled = false;
+
+    @Input()
+    get value(): MyTel | null
+    {
+        let n = this.parts.value;
+        if ( n.area.length == 3 && n.exchange.length == 3 && n.subscriber.length == 4 )
+        {
+            return new MyTel(n.area, n.exchange, n.subscriber);
+        }
+        return null;
+    }
+
+    set value(tel: MyTel | null)
+    {
+        tel = tel || new MyTel('', '', '');
+        this.parts.setValue({
+            area      : tel.area,
+            exchange  : tel.exchange,
+            subscriber: tel.subscriber
+        });
+        this.stateChanges.next();
+    }
+
+    constructor(fb: FormBuilder, private fm: FocusMonitor, private elRef: ElementRef,
+                renderer: Renderer2
+    )
+    {
+        this.parts = fb.group({
+            'area'      : '',
+            'exchange'  : '',
+            'subscriber': ''
+        });
+
+        fm.monitor(elRef.nativeElement, renderer, true).subscribe((origin) => {
+            this.focused = !!origin;
+            this.stateChanges.next();
+        });
+    }
+
+    ngOnDestroy()
+    {
+        this.stateChanges.complete();
+        this.fm.stopMonitoring(this.elRef.nativeElement);
+    }
+
+    setDescribedByIds(ids: string[])
+    {
+        this.describedBy = ids.join(' ');
+    }
+
+    onContainerClick(event: MouseEvent)
+    {
+        if ( (event.target as Element).tagName.toLowerCase() != 'input' )
+        {
+            this.elRef.nativeElement.querySelector('input').focus();
+        }
+    }
+}
+
+/** @title Form field with custom telephone number input control. */
+@Component({
+    selector: 'form-field-custom-control-example',
+    template: `
+    <mat-form-field>
+      <my-tel-input placeholder="Phone number" required></my-tel-input>
+      <mat-icon matSuffix>phone</mat-icon>
+      <mat-hint>Include area code</mat-hint>
+    </mat-form-field>
+  `
+})
+export class FormFieldCustomControlExample
+{
+}

src/assets/angular-material-examples/form-field-error/form-field-error-example.css

@@ -0,0 +1,8 @@
+.example-container {
+    display: flex;
+    flex-direction: column;
+}
+
+.example-container > * {
+    width: 100%;
+}

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

@@ -0,0 +1,6 @@
+<div class="example-container">
+    <mat-form-field>
+        <input matInput placeholder="Enter your email" [formControl]="email" required>
+        <mat-error *ngIf="email.invalid">{{getErrorMessage()}}</mat-error>
+    </mat-form-field>
+</div>

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

@@ -0,0 +1,20 @@
+import { Component } from '@angular/core';
+import { FormControl, Validators } from '@angular/forms';
+
+/** @title Form field with error messages */
+@Component({
+    selector   : 'form-field-error-example',
+    templateUrl: 'form-field-error-example.html',
+    styleUrls  : ['form-field-error-example.css']
+})
+export class FormFieldErrorExample
+{
+    email = new FormControl('', [Validators.required, Validators.email]);
+
+    getErrorMessage()
+    {
+        return this.email.hasError('required') ? 'You must enter a value' :
+            this.email.hasError('email') ? 'Not a valid email' :
+                '';
+    }
+}

src/assets/angular-material-examples/form-field-hint/form-field-hint-example.css

@@ -0,0 +1,8 @@
+.example-container {
+    display: flex;
+    flex-direction: column;
+}
+
+.example-container > * {
+    width: 100%;
+}

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

@@ -0,0 +1,13 @@
+<div class="example-container">
+    <mat-form-field hintLabel="Max 10 characters">
+        <input matInput #input maxlength="10" placeholder="Enter some input">
+        <mat-hint align="end">{{input.value?.length || 0}}/10</mat-hint>
+    </mat-form-field>
+
+    <mat-form-field>
+        <mat-select placeholder="Select me">
+            <mat-option value="option">Option</mat-option>
+        </mat-select>
+        <mat-hint align="end">Here's the dropdown arrow ^</mat-hint>
+    </mat-form-field>
+</div>

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

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+/** @title Form field with hints */
+@Component({
+    selector   : 'form-field-hint-example',
+    templateUrl: 'form-field-hint-example.html',
+    styleUrls  : ['form-field-hint-example.css']
+})
+export class FormFieldHintExample
+{
+}

src/assets/angular-material-examples/form-field-overview/form-field-overview-example.css

@@ -0,0 +1,8 @@
+.example-container {
+    display: flex;
+    flex-direction: column;
+}
+
+.example-container > * {
+    width: 100%;
+}

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

@@ -0,0 +1,15 @@
+<div class="example-container">
+    <mat-form-field>
+        <input matInput placeholder="Input">
+    </mat-form-field>
+
+    <mat-form-field>
+        <textarea matInput placeholder="Textarea"></textarea>
+    </mat-form-field>
+
+    <mat-form-field>
+        <mat-select placeholder="Select">
+            <mat-option value="option">Option</mat-option>
+        </mat-select>
+    </mat-form-field>
+</div>

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

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+/** @title Simple form field */
+@Component({
+    selector   : 'form-field-overview-example',
+    templateUrl: 'form-field-overview-example.html',
+    styleUrls  : ['form-field-overview-example.css']
+})
+export class FormFieldOverviewExample
+{
+}

src/assets/angular-material-examples/form-field-placeholder/form-field-placeholder-example.css

@@ -0,0 +1,20 @@
+.example-container {
+    display: flex;
+    flex-direction: column;
+}
+
+.example-container > * {
+    width: 100%;
+}
+
+.example-container form {
+    margin-bottom: 20px;
+}
+
+.example-container form > * {
+    margin: 5px 0;
+}
+
+.example-container .mat-radio-button {
+    margin: 0 5px;
+}

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

@@ -0,0 +1,31 @@
+<div class="example-container">
+    <form class="example-container" [formGroup]="options">
+        <mat-checkbox formControlName="hideRequired">Hide required marker</mat-checkbox>
+        <div>
+            <label>Float placeholder: </label>
+            <mat-radio-group formControlName="floatPlaceholder">
+                <mat-radio-button value="auto">Auto</mat-radio-button>
+                <mat-radio-button value="always">Always</mat-radio-button>
+                <mat-radio-button value="never">Never</mat-radio-button>
+            </mat-radio-group>
+        </div>
+    </form>
+
+    <mat-form-field
+        [hideRequiredMarker]="options.value.hideRequired"
+        [floatPlaceholder]="options.value.floatPlaceholder">
+        <input matInput placeholder="Simple placeholder" required>
+    </mat-form-field>
+
+    <mat-form-field
+        [hideRequiredMarker]="options.value.hideRequired"
+        [floatPlaceholder]="options.value.floatPlaceholder">
+        <mat-select required>
+            <mat-option>-- None --</mat-option>
+            <mat-option value="option">Option</mat-option>
+        </mat-select>
+        <mat-placeholder>
+            <mat-icon>favorite</mat-icon>
+            <b> Fancy</b> <i> placeholder</i></mat-placeholder>
+    </mat-form-field>
+</div>

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

@@ -0,0 +1,21 @@
+import { Component } from '@angular/core';
+import { FormBuilder, FormGroup } from '@angular/forms';
+
+/** @title Form field with placeholder */
+@Component({
+    selector   : 'form-field-placeholder-example',
+    templateUrl: 'form-field-placeholder-example.html',
+    styleUrls  : ['form-field-placeholder-example.css']
+})
+export class FormFieldPlaceholderExample
+{
+    options: FormGroup;
+
+    constructor(fb: FormBuilder)
+    {
+        this.options = fb.group({
+            hideRequired    : false,
+            floatPlaceholder: 'auto'
+        });
+    }
+}

src/assets/angular-material-examples/form-field-prefix-suffix/form-field-prefix-suffix-example.css

@@ -0,0 +1,17 @@
+.example-container {
+    display: flex;
+    flex-direction: column;
+}
+
+.example-container > * {
+    width: 100%;
+}
+
+.example-right-align {
+    text-align: right;
+}
+
+input.example-right-align::-webkit-outer-spin-button,
+input.example-right-align::-webkit-inner-spin-button {
+    display: none;
+}

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

@@ -0,0 +1,12 @@
+<div class="example-container">
+    <mat-form-field>
+        <input matInput placeholder="Enter your password" [type]="hide ? 'password' : 'text'">
+        <mat-icon matSuffix (click)="hide = !hide">{{hide ? 'visibility' : 'visibility_off'}}</mat-icon>
+    </mat-form-field>
+
+    <mat-form-field>
+        <input matInput placeholder="Amount" type="number" class="example-right-align">
+        <span matPrefix>$&nbsp;</span>
+        <span matSuffix>.00</span>
+    </mat-form-field>
+</div>

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

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+/** @title Form field with prefix & suffix */
+@Component({
+    selector   : 'form-field-prefix-suffix-example',
+    templateUrl: 'form-field-prefix-suffix-example.html',
+    styleUrls  : ['form-field-prefix-suffix-example.css']
+})
+export class FormFieldPrefixSuffixExample
+{
+    hide = true;
+}

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

@@ -0,0 +1,8 @@
+.example-container {
+    display: flex;
+    flex-direction: column;
+}
+
+.example-container > * {
+    width: 100%;
+}

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

@@ -0,0 +1,14 @@
+<form class="example-container" [formGroup]="options" [style.fontSize.px]="getFontSize()">
+    <mat-form-field [color]="options.value.color">
+        <mat-select placeholder="Color" formControlName="color">
+            <mat-option value="primary">Primary</mat-option>
+            <mat-option value="accent">Accent</mat-option>
+            <mat-option value="warn">Warn</mat-option>
+        </mat-select>
+    </mat-form-field>
+
+    <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-form-field>
+</form>

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

@@ -0,0 +1,26 @@
+import { Component } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+
+/** @title Form field theming */
+@Component({
+    selector   : 'form-field-theming-example',
+    templateUrl: 'form-field-theming-example.html',
+    styleUrls  : ['form-field-theming-example.css']
+})
+export class FormFieldThemingExample
+{
+    options: FormGroup;
+
+    constructor(fb: FormBuilder)
+    {
+        this.options = fb.group({
+            'color'   : 'primary',
+            'fontSize': [16, Validators.min(10)]
+        });
+    }
+
+    getFontSize()
+    {
+        return Math.max(10, this.options.value.fontSize);
+    }
+}

src/assets/angular-material-examples/list-sections/list-sections-example.html

@@ -1,15 +1,15 @@
 <mat-list>
-    <h3 matSubheader>Folders</h3>
+    <h3 mat-subheader>Folders</h3>
     <mat-list-item *ngFor="let folder of folders">
         <mat-icon mat-list-icon>folder</mat-icon>
-        <h4 matLine>{{folder.name}}</h4>
+        <h4 mat-line>{{folder.name}}</h4>
-        <p matLine> {{folder.updated | date}} </p>
+        <p mat-line> {{folder.updated | date}} </p>
     </mat-list-item>
     <mat-divider></mat-divider>
-    <h3 matSubheader>Notes</h3>
+    <h3 mat-subheader>Notes</h3>
     <mat-list-item *ngFor="let note of notes">
         <mat-icon mat-list-icon>note</mat-icon>
-        <h4 matLine>{{note.name}}</h4>
+        <h4 mat-line>{{note.name}}</h4>
-        <p matLine> {{note.updated | date}} </p>
+        <p mat-line> {{note.updated | date}} </p>
     </mat-list-item>
 </mat-list>

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

@@ -10,12 +10,12 @@ import { PageEvent } from '@angular/material';
 })
 export class PaginatorConfigurableExample
 {
-    // MdPaginator Inputs
+    // MatPaginator Inputs
     length = 100;
     pageSize = 10;
     pageSizeOptions = [5, 10, 25, 100];
 
-    // MdPaginator Output
+    // MatPaginator Output
     pageEvent: PageEvent;
 
     setPageSizeOptions(setPageSizeOptionsInput: string)

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

@@ -1 +1,3 @@
-/** No CSS for this example */
+.mat-radio-button ~ .mat-radio-button {
+    padding-right: 16px;
+}

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

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

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

@@ -1,9 +1,11 @@
 <form>
-    <mat-select placeholder="Favorite food" [(ngModel)]="selectedValue" name="food">
+    <mat-form-field>
-        <mat-option *ngFor="let food of foods" [value]="food.value">
+        <mat-select placeholder="Favorite food" [(ngModel)]="selectedValue" name="food">
-            {{food.viewValue}}
+            <mat-option *ngFor="let food of foods" [value]="food.value">
-        </mat-option>
+                {{food.viewValue}}
-    </mat-select>
+            </mat-option>
+        </mat-select>
+    </mat-form-field>
 
     <p> Selected value: {{selectedValue}} </p>
 </form>

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

@@ -1,5 +1,7 @@
-<mat-select placeholder="Favorite food">
+<mat-form-field>
-    <mat-option *ngFor="let food of foods" [value]="food.value">
+    <mat-select placeholder="Favorite food">
-        {{ food.viewValue }}
+        <mat-option *ngFor="let food of foods" [value]="food.value">
-    </mat-option>
+            {{ food.viewValue }}
-</mat-select>
+        </mat-option>
+    </mat-select>
+</mat-form-field>

src/assets/angular-material-examples/snack-bar-component/snack-bar-component-example-snack.css

@@ -1,3 +0,0 @@
-.example-pizza-party {
-    color: hotpink;
-}

src/assets/angular-material-examples/snack-bar-component/snack-bar-component-example.ts

@@ -25,7 +25,7 @@ export class SnackBarComponentExample
 @Component({
     selector   : 'snack-bar-component-example-snack',
     templateUrl: 'snack-bar-component-example-snack.html',
-    styleUrls  : ['snack-bar-component-example-snack.css']
+    styles     : [`.example-pizza-party { color: hotpink; }`]
 })
 export class PizzaPartyComponent
 {

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

@@ -109,7 +109,7 @@ export class ExampleDataSource extends DataSource<GithubIssue>
                          .startWith(null)
                          .switchMap(() => {
                              setTimeout(() => {
-                                 this.isLoadingResults = true;
+                             this.isLoadingResults = true;
                              });
                              return this.exampleDatabase.getRepoIssues(
                                  this.sort.active, this.sort.direction, this.paginator.pageIndex);
@@ -125,8 +125,8 @@ export class ExampleDataSource extends DataSource<GithubIssue>
                          .catch(() => {
                              // Catch if the GitHub API has reached its rate limit. Return empty data.
                              setTimeout(() => {
-                                 this.isLoadingResults = false;
+                             this.isLoadingResults = false;
-                                 this.isRateLimitReached = true;
+                             this.isRateLimitReached = true;
                              });
                              return Observable.of([]);
                          });

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

@@ -122,10 +122,10 @@ export class ExampleDatabase
     {
         // Fill up the database with 100 users.
         setTimeout(() => {
-            for ( let i = 0; i < 100; i++ )
+        for ( let i = 0; i < 100; i++ )
-            {
+        {
-                this.addUser();
+            this.addUser();
-            }
+        }
         });
     }
 

src/assets/angular-material-examples/tooltip-position/tooltip-position-example.html

@@ -1,11 +1,13 @@
 <div class="example-tooltip-host" matTooltip="Tooltip!" [matTooltipPosition]="position">
     <span>Show tooltip</span>
-    <mat-select class="example-select" [(ngModel)]="position">
+    <mat-form-field>
-        <mat-option value="before">Before</mat-option>
+        <mat-select class="example-select" [(ngModel)]="position">
-        <mat-option value="after">After</mat-option>
+            <mat-option value="before">Before</mat-option>
-        <mat-option value="above">Above</mat-option>
+            <mat-option value="after">After</mat-option>
-        <mat-option value="below">Below</mat-option>
+            <mat-option value="above">Above</mat-option>
-        <mat-option value="left">Left</mat-option>
+            <mat-option value="below">Below</mat-option>
-        <mat-option value="right">Right</mat-option>
+            <mat-option value="left">Left</mat-option>
-    </mat-select>
+            <mat-option value="right">Right</mat-option>
+        </mat-select>
+    </mat-form-field>
 </div>