I am trying to create a simple select box using the angular material in angular 2 application. For that, I have created an array of floors in my component.ts file also created the one string selectedValue
for binding data.
Now, I am trying to pick data from the select box and print it in next paragraph tag for checking binding.
Here is my .ts file code:
export class SpaceadminComponent implements OnInit {
selectedValue: String;
floors = [
{value: 'floor1', viewValue: 'Floor 1'},
{value: 'floor2', viewValue: 'Floor 2'},
{value: 'floor3', viewValue: 'Floor 3'}
];
This is my html file:
<mat-form-field>
<mat-select placeholder="Floor" [(ngModel)]="selectedValue" name="floor" >
<mat-option *ngFor="let floor of floors" [value]="floor.value">
{{ floor.viewValue }}
</mat-option>
</mat-select>
</mat-form-field>
<h2>Selected Item:{{selectedValue}}</h2>
Please correct my confusion regarding data binding.