Loreno Loreno - 1 year ago 85
TypeScript Question

ngModel of textBox doesn't hold the correct value when using Google Places Autocomplete API

I want to use Google Places Autocomplete API with a textField, so that I can see proposals of cities when I type something. My textField is bound to a variable "searchFieldValue" using ngModel.
This variable holds the correct value if I type something into the textBox. But if I start typing, and then choose something from the Google Autocomplete, "searchFieldValue" won't update to that chosen thing - it only holds the part that I typed in.
I type: "Washi" and then I choose "Washington, USA" from the proposed cities, provided by Google API. Although in the textfield there is "Washington, USA", my variable "searchFieldValue" only has "Washi". I'd like this variable to contain the same data as in the textfield, which is "Washington, USA".

How do i do that?

Here's my component:

import { Component, OnInit } from '@angular/core';

import { WeatherAPIService } from './weatherAPI.service';

declare var google: any; //for Places Autocomplete API

selector: 'my-cities-search',

template: `
<input class="form-control input-lg" #box id="searchTextField" (keyup.enter)="searchBoxChanged()"
(blur)="searchBoxChanged()" [(ngModel)] = "searchFieldValue">

styleUrls: [ 'app/cities-search.component.css' ],


export class CitiesSearchComponent implements OnInit {

private weatherAPIService: WeatherAPIService

) { }

//content of searchbox field
searchFieldValue: string = "";

autoCompleteSearchBoxInit() {
var input = document.getElementById('searchTextField');
var autocomplete = new google.maps.places.Autocomplete(input);

searchBoxChanged () {
if (this.searchFieldValue != "")
this.weatherAPIService.cityName = this.searchFieldValue;

ngOnInit(): void {


Answer Source

In autoCompleteSearchBoxInit you can add the below and you can handle it.

google.maps.event.addListener(autocomplete, 'place_changed', () => {
    this.zone.run(() => {
        var  place = autocomplete.getPlace();
        //handle your logic using place variable
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download