How To Add Google Places Autocomplete Address Form In Angular ?

Hello Friends, In this article, we will learn how to Add Google Places Autocomplete Address Form in the Angular Application.
When the user will enter some address text in the input box then it will get the location recommendations and can autocomplete the location. we will use the ngx-google-places-autocomplete angular package for it.

First, we need to install ngx-google-places-autocomplete in the angular project

npm install ngx-google-places-autocomplete

Add the google maps API library in index.html

<script src=”https://maps.googleapis.com/maps/api/js?key=<Your API KEY>&libraries=places&language=en”></script>

Generate an API Key and replace it with that API Key in the above script tag in place of <Your API KEY>.

Add necessary imports of GooglePlaceModule in app.module.ts.

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

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

Now we are creating an address form and address auto-complete using google place API.

put the below code in your app.component.html page

<div id="locationField">
    <input type="text" id="autocomplete" placeholder="Search Location" ngx-google-places-autocomplete
        (onAddressChange)="placeChangedCallback($event)" />
</div>
<table id="address">
    <tr>
        <td class="label">Street Address</td>
        <td class="slimField">
            <input class="field" [(ngModel)]="street_number" disabled="true" />
        </td>
        <td class="wideField" colspan="2">
            <input class="field" [(ngModel)]="address" disabled="true" />
        </td>
    </tr>
    <tr>
        <td class="label">City</td>
        <td class="wideField" colspan="3">
            <input class="field" [(ngModel)]="city" disabled="true" />
        </td>
    </tr>
    <tr>
        <td class="label">State</td>
        <td class="slimField">
            <input class="field" [(ngModel)]="state" disabled="true" />
        </td>
        <td class="label">Zip code</td>
        <td class="wideField">
            <input class="field" [(ngModel)]="zip" disabled="true" />
        </td>
    </tr>
    <tr>
        <td class="label">Country</td>
        <td class="wideField" colspan="3">
            <input class="field" [(ngModel)]="country" disabled="true" />
        </td>
    </tr>
</table>

Now we add a method in the app.compont.ts file when we are select address form suggestion we are filled in address form

put the below code in your app.component.ts file

placeChangedCallback(place: any) {
    this.street_number = "";
    this.address = "";
    this.city = "";
    this.state = "";
    this.country = "";
    this.zip = "";

    const addressFrom = {
      street_number: "short_name",
      route: "long_name",
      locality: "long_name",
      sublocality_level_1: "sublocality_level_1",
      administrative_area_level_1: "short_name",
      country: "long_name",
      postal_code: "short_name",
    };

    place.address_components.forEach((add: any) => {
      add.types.forEach((addType: any) => {
        if (addType == "street_number")
          this.street_number = add.short_name;
        if (addType == "route")
          this.address = add.long_name;
        if (addType == "locality" || addType == "sublocality_level_1")
          this.city = add.long_name;
        if (addType == "administrative_area_level_1")
          this.state = add.long_name;
        if (addType == "country")
          this.country = add.long_name;
        if (addType == "postal_code")
          this.zip = add.long_name;
      });
    });
  }

Now run the application and search any places and it will suggest places based on your input.