Skip to content
Related Articles
Get the best out of our app
GeeksforGeeks App
Open App

Related Articles

How to Add Google Locations Autocomplete to your Angular Application ?

Improve Article
Save Article
Like Article
Improve Article
Save Article
Like Article

The task here is to Add Google Locations Autocomplete to your Angular Application. When user will enter some text for a location in the Textfield, he/she will get locations recommendations and can autocomplete the location. For achieving the target, we will use ngx-google-places-autocomplete angular package.

What is ngx-google-places-autocomplete ?

This module is a wrapper for Google Places Autocomplete js library. It allows us to integrate locations autocomplete to our project.


  • First install ngx-google-places-autocomplete to your angular project>

For npm:

npm install ngx-google-places-autocomplete

For yarn:

yarn add ngx-google-places-autocomplete
  • Add library to your index.html in src of your project app.

<script src=”<Your API KEY>&libraries=places&language=en”></script>

import { GooglePlaceModule } from "ngx-google-places-autocomplete";


  imports: [
  • In HTML file for appcomponent. Define code for input field, in that input field user defined function  AddressChange() will be called by (onAddressChange) passing $event and options will take care of country set in country array of component.ts file.
  • In component.ts file ,  user defined function take formatted_address from $event address which is then used to set address in input field by interpolation binding.

Note: In country Array there is “AU” added for Australia, you can add any other country according to you. 




import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import '@angular/compiler';
//import for GooglePlaceModule
import { GooglePlaceModule } from "ngx-google-places-autocomplete";
  declarations: [
  imports: [
    //Adding to imports
  providers: [],
  bootstrap: [AppComponent]
export class AppModule { }



<div class="container">
    <h2>Google Places Autocomplete</h2>
<input ngx-google-places-autocomplete [options]=
   'options'  (onAddressChange)="AddressChange($event)"/>
{{ formattedaddress }}



import { Component } from '@angular/core';
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
export class AppComponent {
  title = 'rou';
  //Local Variable defined
  formattedaddress=" ";
  public AddressChange(address: any) {
  //setting address from API to local variable


Run development server using ng serve and write some location to input field to see Autocomplete locations.

My Personal Notes arrow_drop_up
Last Updated : 05 Jun, 2020
Like Article
Save Article
Similar Reads
Related Tutorials