Angular 17/16 Google Places Autocomplete Example Tutorial

The angular 17,16 ngx-google-places-autocomplete allows users to search and select locations as they type, making it a useful feature for location-based applications in angular projects.

In this example guide, we will integrate Google Places Autocomplete for search location in angular using the ngx-google-places-autocomplete module without showing Google Maps.

How To Integrate Google Places Autocomplete in Angular 17,16

Steps to implement Google Place autocomplete in angular using ngx-google-places-autocomplete module to enable search for places in angular application:

Step 1: Set up a new Angular project

First of all, open your cmd or command prompt and execute the following command into it to install and create a new Angular project:

ng new google-autocomplete-angular-project --no-standalone
cd google-autocomplete-angular-project

Step 2: Install the ngx-google-places-autocomplete library

Next, you need to install ngx google places autocomplete library. So, Execute the following command on cmd or command prompt to install the ngx-google-places-autocomplete library using npm:

npm install ngx-google-places-autocomplete --save

Step 3: Get Google Map API Key

In this step, you need to get google API key; So, first, you have to have the Maps API Key, and you can go here to get the complete instructions.

• Generate an API Key and place that API Key in the above script tag in place of <Your API KEY>.
• To Generate an API key follow the below steps:
  • Go to https://developers.google.com/places/web-service/get-api-key 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.

Step 4: Configure Google Maps API Key

Once you have the API key, add it to your Angular project’s index.html file:

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCaKbVhcX_22R_pRKDYuNA7vox-PtGaDkI&libraries=places&language=en"></script>

Step 5: Import the GooglePlaceModule in your Angular app

In your Angular module (app.module.ts), import the GooglePlaceModule and add it to the imports array:

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

@NgModule({
  declarations: [AppComponent],
  imports: [...., GooglePlaceModule],
  bootstrap: [AppComponent],
})
export class AppModule {}

Step 6: Create the Autocomplete input component

Next, you need to create a simple component to host the Google Autocomplete input field. Create a new component called autocomplete-input and add the following code to it:

ng generate component autocomplete-input

Step 7: Implement the Autocomplete input component

Next, Open the autocomplete-input.component.html file and add the following code:

<input
  ngx-google-places-autocomplete
  [ngxGooglePlacesAutocomplete]="autoCompleteConfig"
  (onAddressChange)="onAddressChange($event)"
  (onAddressComponentsChange)="onAddressComponentsChange($event)"
/>

Then, open the autocomplete-input.component.ts file and add the following code:

import { Component } from '@angular/core';
import { Address } from 'ngx-google-places-autocomplete/objects/address';

@Component({
  selector: 'app-autocomplete-input',
  templateUrl: './autocomplete-input.component.html',
  styleUrls: ['./autocomplete-input.component.css'],
})
export class AutocompleteInputComponent {
  public autoCompleteConfig = {
    types: [],
    componentRestrictions: { country: 'us' }, // Change 'us' to your desired country code
  };

  onAddressChange(address: Address) {
    console.log('Address:', address.formatted_address);
  }

  onAddressComponentsChange(address: Address) {
    console.log('Address Components:', address);
  }
}

Step 8: Include the Autocomplete input component

Now, you need to include the newly created component in the main app.component.html:

<div style="text-align: center; padding-top: 50px;">
  <h1>Angular Google Autocomplete using ngx-google-places-autocomplete</h1>
  <app-autocomplete-input></app-autocomplete-input>
</div>

Step 9: Run the application

Finally, execute your Angular application to see the Google Autocomplete in action:

ng serve

Visit http://localhost:4200 in your browser, and you should see the Google Autocomplete input field. As you type, it will suggest places, and you can select one from the dropdown.

If you found Error: src/app/xxx-app.module.ts:76:5 – error NG6002: ‘GooglePlaceModule’ does not appear to be an NgModule class. 76 GooglePlaceModule, ~~~~~~~~~~~~~~~~~ node_modules/ngx-google-places-autocomplete/ngx-google-places-autocomplete.module.d.ts:1:22 1 export declare class GooglePlaceModule { ~~~~~~~~~~~~~~~~~ This likely means that the library (ngx-google-places-autocomplete) which declares GooglePlaceModule is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library’s authors to see if the library is expected to be compatible with Ivy.

The error message indicates that there is an issue with the ‘ngx-google-places-autocomplete’ library and its compatibility with Angular Ivy. The library’s ‘GooglePlaceModule’ is not recognized as an NgModule class by Ivy.

To resolve this issue, you can try the following steps:

1. Update the library: Check if there is a newer version of ‘ngx-google-places-autocomplete’ available that claims to be compatible with Angular Ivy. If so, update your project’s dependency to that version. You can find the latest version on the npm package page.
2. Compatibility confirmation: Ensure that the library explicitly mentions support for Angular Ivy in its documentation or release notes. If it doesn’t mention Ivy compatibility, it might not be fully compatible, and you may need to look for alternative libraries or solutions.
3. Reach out to the library authors: If you can’t find an Ivy-compatible version or if the library’s documentation is unclear, you can contact the library’s authors or maintainers. They might be aware of the issue and provide guidance on how to make the library work with Ivy or if there are any upcoming updates for Ivy compatibility.
4. Temporary workaround: If you urgently need to use the ‘ngx-google-places-autocomplete’ library and there’s no Ivy-compatible version available, you might need to disable Ivy in your Angular project temporarily. To do that, you can set the enableIvy option to false in the ‘tsconfig.json’ file:
   • {
   • “angularCompilerOptions”: {
   • “enableIvy”: false
   • }
   • }
5. Please note that disabling Ivy might have some drawbacks, as Ivy brings many performance and compilation improvements. So, it’s best to use Ivy if possible and explore alternative solutions or libraries if necessary.

Conclusion

Congratulations! You have successfully implemented Google Autocomplete in an Angular 17,16 application using ngx-google-places-autocomplete without showing maps. You can now further customize the implementation and integrate it into your project as needed.

Recommended Tutorials