@angular-magic/ngx-gp-autocomplete NPM

ngx-gp-autocomplete

Demo: https://ngx-gp-autocomplete.angularmagic.com

This module is a wrapper for Google Places Autocomplete js library. Initial code base was copied from this project ngx-google-places-autocomplete, this module applies some fixes and improvements. Like @types/google.maps and @googlemaps/js-api-loader

Installation

npm

npm install @angular-magic/ngx-gp-autocomplete

npm install @googlemaps/js-api-loader

npm install --save @types/google.maps

Integration

Import NgxGpAutocompleteModule into your application module

import { NgxGpAutocompleteModule } from "@angular-magic/ngx-gp-autocomplete";

@NgModule({
  imports: [
    NgxGpAutocompleteModule,
    BrowserModule,
    FormsModule,
    //...
  ],
  providers: [
    {
      provide: Loader,
      useValue: new Loader({
        apiKey: 'YOUR_API_KEY',
        libraries: ['places']
      })
    },
    //...
  ],
  //...
})

Replace YOUR_API_KEY with google places api key. Ref - https://developers.google.com/places/web-service/get-api-key
Add directive ngx-gp-autocomplete to your input field (options is an optional parameter)

<input #placesRef="ngx-places" ngx-gp-autocomplete [options]='options' (onAddressChange)="handleAddressChange($event)"/>

Additionally you can reference directive in your component

export class Component {
  @ViewChild('ngxPlaces') placesRef: NgxGpAutocompleteDirective;

  public handleAddressChange(place: google.maps.places.PlaceResult) {
    // Do some stuff
  }
}