diff --git a/src/components-examples/material/list/list-single-selection-reactive-form/list-single-selection-form-example.html b/src/components-examples/material/list/list-single-selection-reactive-form/list-single-selection-reactive-form-example.html similarity index 97% rename from src/components-examples/material/list/list-single-selection-reactive-form/list-single-selection-form-example.html rename to src/components-examples/material/list/list-single-selection-reactive-form/list-single-selection-reactive-form-example.html index b7987183786b..d121016c525d 100644 --- a/src/components-examples/material/list/list-single-selection-reactive-form/list-single-selection-form-example.html +++ b/src/components-examples/material/list/list-single-selection-reactive-form/list-single-selection-reactive-form-example.html @@ -7,4 +7,4 @@
Option selected: {{shoesControl.value ? shoesControl.value[0] : 'None'}}
- \ No newline at end of file + diff --git a/src/components-examples/material/list/list-single-selection-reactive-form/list-single-selection-reactive-form-example.ts b/src/components-examples/material/list/list-single-selection-reactive-form/list-single-selection-reactive-form-example.ts index 792f785200a0..15638f509367 100644 --- a/src/components-examples/material/list/list-single-selection-reactive-form/list-single-selection-reactive-form-example.ts +++ b/src/components-examples/material/list/list-single-selection-reactive-form/list-single-selection-reactive-form-example.ts @@ -6,12 +6,13 @@ interface Shoes { value: string; name: string; } + /** * @title List with single selection using Reactive forms */ @Component({ selector: 'list-single-selection-reactive-form-example', - templateUrl: 'list-single-selection-form-example.html', + templateUrl: 'list-single-selection-reactive-form-example.html', imports: [MatListModule, FormsModule, ReactiveFormsModule], }) export class ListSingleSelectionReactiveFormExample { diff --git a/src/components-examples/material/list/list-single-selection/list-single-selection-example.html b/src/components-examples/material/list/list-single-selection/list-single-selection-example.html index 03221a0f5159..0c653bd3b6da 100644 --- a/src/components-examples/material/list/list-single-selection/list-single-selection-example.html +++ b/src/components-examples/material/list/list-single-selection/list-single-selection-example.html @@ -1,10 +1,9 @@ - \ No newline at end of file ++ Option selected: {{shoes.selectedOptions.hasValue() ? shoes.selectedOptions.selected[0].value : 'None'}} +
diff --git a/src/components-examples/material/list/list-single-selection/list-single-selection-example.ts b/src/components-examples/material/list/list-single-selection/list-single-selection-example.ts index 4f9fbd0f29bf..7027d7c290a7 100644 --- a/src/components-examples/material/list/list-single-selection/list-single-selection-example.ts +++ b/src/components-examples/material/list/list-single-selection/list-single-selection-example.ts @@ -1,32 +1,14 @@ import {Component} from '@angular/core'; -import {FormControl, FormGroup, FormsModule, ReactiveFormsModule} from '@angular/forms'; import {MatListModule} from '@angular/material/list'; -interface Shoes { - value: string; - name: string; -} + /** - * @title List with single selection using Reactive Forms + * @title List with single selection */ @Component({ selector: 'list-single-selection-example', templateUrl: 'list-single-selection-example.html', - imports: [MatListModule, FormsModule, ReactiveFormsModule], + imports: [MatListModule], }) export class ListSingleSelectionExample { - form: FormGroup; - shoes: Shoes[] = [ - {value: 'boots', name: 'Boots'}, - {value: 'clogs', name: 'Clogs'}, - {value: 'loafers', name: 'Loafers'}, - {value: 'moccasins', name: 'Moccasins'}, - {value: 'sneakers', name: 'Sneakers'}, - ]; - shoesControl = new FormControl(); - - constructor() { - this.form = new FormGroup({ - clothes: this.shoesControl, - }); - } + typesOfShoes: string[] = ['Boots', 'Clogs', 'Loafers', 'Moccasins', 'Sneakers']; }