ngx-gp-autocomplete

Demo:

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

$3

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

`sh
npm install @googlemaps/js-api-loader
`

`sh
npm install --save @types/google.maps
`

$3

- Import NgxGpAutocompleteModule into your application module

`ts
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 -

- Add directive ngx-gp-autocomplete to your input field (options is an optional parameter)

`html

`

- Additionally you can reference directive in your component

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

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

GitHub

Please feel free to declare issues or contribute: