ngx-gplaces-autocomp
v1.0.1
Published
This module is a wrapper for Google Places Autocomplete js library.
Downloads
180
Maintainers
Readme
ngx-gplaces-autocomplete
This module is a wrapper for Google Places Autocomplete js library.
Installation
npm
npm install ngx-gplaces-autocomplete
yarn
yarn add ngx-gplaces-autocomplete
Integration
- Add google library in your index.html file :
<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)
import { GooglePlaceModule } from "ngx-gplaces-autocomplete";
@NgModule({
imports: [GooglePlaceModule, BrowserModule, FormsModule, ...],
....
})
- Add directive ngx-gplaces-autocomplete to your input field (options is an optional parammeter)
<input ngx-gplaces-autocomplete [options]='options' #placesRef="ngx-places" (onAddressChange)="handleAddressChange($event)"/>
- Additionally you can reference directive in your component
@ViewChild("placesRef") placesRef : GooglePlaceDirective;
public handleAddressChange(address: Address) {
// Do some stuff
}
Angular Universal
In order to use under angular universal please check that comment https://github.com/skynet2/ngx-gplaces-autocomplete/issues/15#issuecomment-465371214
Options
Refer to original google maps api - https://developers.google.com/maps/documentation/javascript/places-autocomplete Options object - https://github.com/skynet2/ngx-gplaces-autocomplete/blob/master/src/objects/options/options.ts Google doc for Options : https://developers.google.com/maps/documentation/javascript/reference/places-widget#AutocompleteOptions Example :
[options]="{
types: [],
componentRestrictions: { country: 'UA' }
}"
GitHub
Please feel free to declare issues or contribute: https://github.com/skynet2/ngx-gplaces-autocomplete