ngp

ngx-google-places-autocomplete

Google Places autocomplete for angular web project

Showing:

Popularity

Downloads/wk

14.7K

GitHub Stars

75

Maintenance

Last Commit

1yr ago

Contributors

7

Package

Dependencies

0

Size (min+gzip)

1.0KB

License

MIT

Type Definitions

Built-In

Tree-Shakeable

No?

Categories

Readme

ngx-google-places-autocomplete

This module is a wrapper for Google Places Autocomplete js library.

NPM

Installation

npm

npm install ngx-google-places-autocomplete

yarn

yarn add ngx-google-places-autocomplete

Integration

  1. 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>
  1. Replace with google places api key. Ref - https://developers.google.com/places/web-service/get-api-key

Usage

  1. Add a module into your application (as a rule app.module.ts)
import { GooglePlaceModule } from "ngx-google-places-autocomplete";

@NgModule({
    imports: [GooglePlaceModule, BrowserModule, FormsModule, ...],
        ....
        })
  1. Add directive ngx-google-places-autocomplete to your input field (options is an optional parammeter)
<input ngx-google-places-autocomplete [options]='options' #placesRef="ngx-places" (onAddressChange)="handleAddressChange($event)"/>
  1. 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-google-places-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-google-places-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-google-places-autocomplete

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100