Angular 16 Google Places Autocomplete Example Tutorial

The angular 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 16.

In this tutorial, you will learn how to implement Google Places or address autocompletes in Angular 16 applications using the ngx-google-places-autocomplete library without showing maps.

Google Places Autocomplete in Angular 16

Steps to implement google places or address autocomplete in angular 16 projects using ngx-google-places-autocomplete and google API without showing maps:

• Step 1: Set up a new Angular project
• Step 2: Install the ngx-google-places-autocomplete library
• Step 3: Get Google Map API Key
• Step 4: Configure Google Maps API Key
• Step 5: Import the GooglePlaceModule in your Angular app
• Step 6: Create the Autocomplete input component
• Step 7: Implement the Autocomplete input component
• Step 8: Include the Autocomplete input component
• Step 9: Run the 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 16 project:

ng new google-autocomplete-angular-project
cd new 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

To use the Google Places API, you’ll need an API key. If you don’t have one, create a new project in the Google Cloud Console and enable the “Places API.” Then, generate an API key.

Once you have the API key, add it to your Angular project’s src/environments/environment.ts file:

export const environment = {
  production: false,
  googleMapsApiKey: 'YOUR_GOOGLE_MAPS_API_KEY',
};

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 { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { GooglePlaceModule } from 'ngx-google-places-autocomplete';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, 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 16 Google Autocomplete Example with 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 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