Skip to content

Commit b9dcfb5

Browse files
committed
address comments
1 parent b110cdd commit b9dcfb5

File tree

4 files changed

+27
-1
lines changed

4 files changed

+27
-1
lines changed

src/lib/select/select.md

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,10 +16,15 @@ The select component is set up as a custom value accessor, so you can manipulate
1616
using any of the form directives from the core `FormsModule` or `ReactiveFormsModule`: `ngModel`,
1717
`formControl`, etc. As with native `<select>`, `<mat-select>` also supports a `compareWith`
1818
function. (Additional information about using a custom `compareWith` function can be found in the
19-
[angular forms documentation](https://angular.io/api/forms/SelectControlValueAccessor#caveat-option-selection)).
19+
[Angular forms documentation](https://angular.io/api/forms/SelectControlValueAccessor#caveat-option-selection)).
2020

2121
<!-- example(select-form) -->
2222

23+
`<mat-select>` also supports 2-way binding to the `value` property without the need for Angular
24+
forms.
25+
26+
<!-- example(select-value-binding) -->
27+
2328
### Form field features
2429

2530
There are a number of `<mat-form-field>` features that can be used with any `<mat-select>`. These
Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
/** No CSS for this example */
Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<mat-form-field>
2+
<mat-select [(value)]="selected">
3+
<mat-option>None</mat-option>
4+
<mat-option value="option1">Option 1</mat-option>
5+
<mat-option value="option2">Option 2</mat-option>
6+
<mat-option value="option3">Option 3</mat-option>
7+
</mat-select>
8+
</mat-form-field>
9+
10+
<p>You selected: {{selected}}</p>
Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import {Component} from '@angular/core';
2+
3+
/** @title Select with 2-way value binding */
4+
@Component({
5+
selector: 'select-value-binding-example',
6+
templateUrl: 'select-value-binding-example.html',
7+
})
8+
export class SelectValueBindingExample {
9+
selected = 'option2';
10+
}

0 commit comments

Comments
 (0)