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 {



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

google.maps.event.addListener(autocomplete, 'place_changed', () => { => {
        var  place = autocomplete.getPlace();
        //handle your logic using place variable

Answered By – Sudheer KB

Answer Checked By – Katrina (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.