Google Places Autocomplete in Angular 16

Google Places or Address Autocomplete allows users to search and select locations as they type, making it a useful feature for location-based applications in angular.

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.

Angular 16 Google Places Autocomplete Example Tutorial

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:

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.

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