ngx-google-places-autocomplete
This module is a wrapper for Google Places Autocomplete js library.
Installation
npm i ngx-google-places-autocomplete
Integration
- Add google library in your index.html file :
|
1 |
<script src="https://maps.googleapis.com/maps/api/js?key=<Your API KEY>&libraries=places&language=en"></script> |
- Replace with google places api key. Ref – https://developers.google.com/places/web-service/get-api-key
Usage
- Add a module into your application (as a rule app.module.ts)
|
1 2 3 4 5 6 |
import { GooglePlaceModule } from "ngx-google-places-autocomplete"; @NgModule({ imports: [GooglePlaceModule, BrowserModule, FormsModule, ...], .... }) |
- Add directive ngx-google-places-autocomplete to your input field (options is an optional parammeter)
|
1 |
<input ngx-google-places-autocomplete [options]='options' #placesRef="ngx-places" (onAddressChange)="handleAddressChange($event)"/> |
- Additionally you can reference directive in your component
|
1 2 3 4 5 |
@ViewChild("placesRef") placesRef : GooglePlaceDirective; public handleAddressChange(address: Address) { // Do some stuff } |
FULL SOURCE CODE
