address comments

Author: mmalerba

src/lib/select/select.md

@@ -16,10 +16,15 @@ The select component is set up as a custom value accessor, so you can manipulate
 using any of the form directives from the core `FormsModule` or `ReactiveFormsModule`: `ngModel`,
 `formControl`, etc. As with native `<select>`, `<mat-select>` also supports a `compareWith`
 function. (Additional information about using a custom `compareWith` function can be found in the
-[angular forms documentation](https://angular.io/api/forms/SelectControlValueAccessor#caveat-option-selection)).
+[Angular forms documentation](https://angular.io/api/forms/SelectControlValueAccessor#caveat-option-selection)).
 
 <!-- example(select-form) -->
 
+`<mat-select>` also supports 2-way binding to the `value` property without the need for Angular
+forms.
+
+<!-- example(select-value-binding) -->
+
 ### Form field features
 
 There are a number of `<mat-form-field>` features that can be used with any `<mat-select>`. These
@@ -62,8 +67,8 @@ on the group.
 
 ### Selecting multiple options
 
-By default the `<mat-select>` only supports selecting a single option at a time. However you can use
-the `multiple` property to allow the user to select multiple values at once. When using the
+By default, the `<mat-select>` only supports selecting a single option at a time. However, you can 
+use the `multiple` property to allow the user to select multiple values at once. When using the
 `<mat-select>` in multiple selection mode, its value will be a sorted list of all selected values
 rather than a single value.
 
@@ -78,7 +83,7 @@ If you want to display a custom trigger label inside a select, you can use the
 
 ### Disabling the ripple effect
 
-By default when a user clicks on a `<mat-option>` a ripple animation is shown. This can be disabled
+By default, when a user clicks on a `<mat-option>`, a ripple animation is shown. This can be disabled
 by setting the `disableRipple` property on `<mat-select>`.
 
 <!-- example(select-no-ripple) -->

src/material-examples/example-module.ts

@@ -85,6 +85,7 @@ import {SelectOptgroupExample} from './select-optgroup/select-optgroup-example';
 import {SelectOverviewExample} from './select-overview/select-overview-example';
 import {SelectPanelClassExample} from './select-panel-class/select-panel-class-example';
 import {SelectResetExample} from './select-reset/select-reset-example';
+import {SelectValueBindingExample} from './select-vlaue-binding/select-value-binding-example';
 import {SidenavFabExample} from './sidenav-fab/sidenav-fab-example';
 import {SidenavOverviewExample} from './sidenav-overview/sidenav-overview-example';
 import {SlideToggleConfigurableExample} from './slide-toggle-configurable/slide-toggle-configurable-example';
@@ -542,6 +543,12 @@ export const EXAMPLE_COMPONENTS = {
     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,
@@ -755,6 +762,7 @@ export const EXAMPLE_LIST = [
   SelectOverviewExample,
   SelectPanelClassExample,
   SelectResetExample,
+  SelectValueBindingExample,
   SidenavFabExample,
   SidenavOverviewExample,
   SlideToggleConfigurableExample,

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

@@ -5,6 +5,7 @@ import {FormControl} from '@angular/forms';
 @Component({
   selector: 'select-custom-trigger-example',
   templateUrl: 'select-custom-trigger-example.html',
+  styleUrls: ['select-custom-trigger-example.css'],
 })
 export class SelectCustomTriggerExample {
   toppings = new FormControl();

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

@@ -5,6 +5,7 @@ import {FormControl} from '@angular/forms';
 @Component({
   selector: 'select-disabled-example',
   templateUrl: 'select-disabled-example.html',
+  styleUrls: ['select-disabled-example.css'],
 })
 export class SelectDisabledExample {
   disableSelect = new FormControl(false);

src/material-examples/select-error-state-matcher/select-erorr-state-matcher-example.html renamed to src/material-examples/select-error-state-matcher/select-error-state-matcher-example.html

@@ -14,6 +14,7 @@ export class MyErrorStateMatcher implements 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', [

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

@@ -6,6 +6,7 @@ import {Component} from '@angular/core';
 @Component({
   selector: 'select-form-example',
   templateUrl: 'select-form-example.html',
+  styleUrls: ['select-form-example.css'],
 })
 export class SelectFormExample {
   selectedValue: string;

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

@@ -5,6 +5,7 @@ import {FormControl, Validators} from '@angular/forms';
 @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]);

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

@@ -5,6 +5,7 @@ import {FormControl} from '@angular/forms';
 @Component({
   selector: 'select-multiple-example',
   templateUrl: 'select-multiple-example.html',
+  styleUrls: ['select-multiple-example.css'],
 })
 export class SelectMultipleExample {
   toppings = new FormControl();

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

@@ -1,8 +1,9 @@
 import {Component} from '@angular/core';
 
-/** @title Select with cno option ripple */
+/** @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/material-examples/select-no-ripple/select-no-ripple-example.ts

@@ -5,6 +5,7 @@ import {FormControl} from '@angular/forms';
 @Component({
   selector: 'select-optgroup-example',
   templateUrl: 'select-optgroup-example.html',
+  styleUrls: ['select-optgroup-example.css'],
 })
 export class SelectOptgroupExample {
   pokemonControl = new FormControl();

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

@@ -6,6 +6,7 @@ import {Component} from '@angular/core';
 @Component({
   selector: 'select-overview-example',
   templateUrl: 'select-overview-example.html',
+  styleUrls: ['select-overview-example.css'],
 })
 export class SelectOverviewExample {
   foods = [

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

@@ -7,6 +7,7 @@ import {FormControl} from '@angular/forms';
 @Component({
   selector: 'select-panel-class-example',
   templateUrl: 'select-panel-class-example.html',
+  styleUrls: ['select-panel-class-example.css'],
 })
 export class SelectPanelClassExample {
   panelColor = new FormControl('red');

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

@@ -4,6 +4,7 @@ import {Component} from '@angular/core';
 @Component({
   selector: 'select-reset-example',
   templateUrl: 'select-reset-example.html',
+  styleUrls: ['select-reset-example.css'],
 })
 export class SelectResetExample {
   states = [

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

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

src/material-examples/select-vlaue-binding/select-value-binding-example.css

@@ -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/material-examples/select-vlaue-binding/select-value-binding-example.html

@@ -0,0 +1,11 @@
+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';
+}