How to Add Google Locations Autocomplete to your Angular Application ?

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.

Approach

• 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="https://maps.googleapis.com/maps/api/js?key=<Your API KEY>&libraries=places&language=en"></script>

• Generate an API Key and place that API Key in above script tag in place of <Your API KEY>.
• To Generate an API key follow the below steps:
  • Go to and follow all the steps to create an API key.
  • Enable Places API for your API Key.
  • Make sure your API is enabled, to enable your API follow the steps from this link https://support.google.com/googleapi/answer/6158841?hl=en.
• Do necessary imports of GooglePlaceModule in app.module.ts.

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

@NgModule({

 imports: [
 GooglePlaceModule
 ],

• 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. 

Implementation:

app.module.ts

app.component.html

app.component.ts

Output:

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

👁 Image