Angular 4 firebase dropdown select tag option

user_9003741 0
Viewed 1234

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.

angular firebase-realtime-database firebase angularjs html
2 Answers

Instead of value use ngModel

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

By default selecting option from dropdown selects whatever value provided in selected option tag. So when you select any value in dropdown it putspropertyName 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>
user_24354730
Related