Angular 4 firebase dropdown select tag option

Question

I am using Angular 4 and firebase. I'm trying to build a dropdown selector for a list of properties.

Once a property is selected from the dropdown list, the property location should appear in another input field below.

properties.component.html

 <select [(ngModel)]="selectedProperty" (change)="onSelect($event, property)"> <option>--select property--</option> <option *ngFor="let property of properties">{{property.propertyName}}</option> </select> <div *ngIf="selectedProperty"> <label >Location </label> <input type="text" value="{{selectedProperty.location}}"> </div> 

properties.component.ts

 import { Component, OnInit } from '@angular/core'; import { PropertyService } from './../services/property.service'; import { Property } from './../models/property'; import { Observable } from 'rxjs/Observable'; @Component({ selector: 'app-property-list', templateUrl: './property-list.component.html', styleUrls: ['./property-list.component.scss'] }) export class PropertyListComponent implements OnInit { properties: Observable<Property[]>; selectedProperty: Property; constructor(private propertyService: PropertyService) {} ngOnInit() { this.propertyService.getProperties().subscribe(properties => { this.properties = properties; }) } onSelect(event, property: Property){ this.selectedProperty = property; } } 

I am able to select the property from the dropdown list but the property location does not appear on the input field. I'll appreciate your help.

Answer 1

Instead of value use ngModel

<div *ngIf="selectedProperty">
    <label >Location </label>
    <input type="text"  [(ngModel)]="selectedProperty.location">
</div>

Answer 2

By default selecting option from dropdown selects whatever value provided in selected option tag. So when you select any value in dropdown it puts propertyName inside respective ngModel .

As you want to select the whole object use ngValue in option, what that will do is, when user selects an option it will take down ngValue object value and assigned it to ngModel of select field.

<option [ngValue]="property" *ngFor="let property of properties">
  {{property.propertyName}}
</option>