# ngx-autocom-place

> Angular GoogleMaps Places Api Autocomplete Directive

Latest version **4.0.1** (published 2022-04-03) · MIT license · 0 weekly downloads

## Install

```sh
npm install ngx-autocom-place
pnpm add ngx-autocom-place
yarn add ngx-autocom-place
bun add ngx-autocom-place
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 4.0.1 |
| Published | 2022-04-03 |
| First published | 2020-01-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 190.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 6 |
| Author | Valentin Lafranca |
| Maintainers | vlafranca |
| Keywords | Google, angular2, angular, angular4, angular5, angular6, angular7, angular8, angular9, place, places, autocomplete, google place, google maps, google maps api, ionic, location |

## Links

- npm: https://www.npmjs.com/package/ngx-autocom-place
- Repository: https://github.com/vlafranca/ngxAutocomPlace
- Homepage: https://github.com/vlafranca/ngxAutocomPlace#readme
- Issues: https://github.com/vlafranca/ngxAutocomPlace/issues
- npm.io page: https://npm.io/package/ngx-autocom-place

## Dependencies (2)

- [tslib](https://npm.io/package/tslib.md) ^2.0.0
- [@types/googlemaps](https://npm.io/package/@types/googlemaps.md) 3.37.7

## Recent versions

- 4.0.1 (latest) — 2022-04-03
- 4.0.0 — 2021-10-20
- 3.0.0 — 2021-10-20
- 2.0.0 — 2021-10-20
- 1.0.6 — 2021-02-01
- 1.0.5 — 2021-01-31
- 1.0.4 — 2020-09-13
- 1.0.3 — 2020-08-25
- 1.0.2 — 2020-08-24
- 1.0.0 — 2020-08-21
- 0.8.4 — 2020-08-21
- 0.8.2 — 2020-07-01
- 0.8.1 — 2020-01-14
- 0.8.0 — 2020-01-07
- 0.7.0 — 2020-01-06
- … 3 more at https://npm.io/package/ngx-autocom-place/versions

## README

# ngxAutocomPlace : Angular Google Places API Autocomplete Directive

Add this directive to any input to activate the google places autocomplete feature.  
It uses google place API programmatically instead of the ready to use autocomplete javascript widget provided by google. This allows to handle keydown.enter events to select the first result automatically, and access the predictions for further customisations.

Tested with :	

| Framwork | Version |
| -------- | -------- |
| Angular  | 8 +   |
| Ionic    | 4 + |

## Install
```sh
    npm i --save ngx-autocom-place
```
import `NgxAutocomPlaceModule` in your app module.

- Add this to index.html
```html
      <script src="https://maps.googleapis.com/maps/api/js?key=<YourApiKey>&libraries=places&language=en"></script>
```

## Usage

```html
    <input type="text" ngxAutocomPlace (selectedPlace)="placeChangedCallback($event)"/>
```
- attribute `[options]` (optional) can be added to pass (ref: https://developers.google.com/maps/documentation/javascript/reference/places-widget)

## Api
### ngxAutocomPlace
#### [options]
Use to customise the autocomplete options. (optional)
Default to :
```
{
    types: ["geocode"]
}
```
Format : https://developers.google.com/maps/documentation/javascript/reference/places-autocomplete-service#AutocompletionRequest

#### (selectedPlace)
Emit selected place result.  
Format : https://developers.google.com/maps/documentation/javascript/reference/places-service#PlaceResult

#### (predictions)
Emit predictions on user input. (optional)
Format : https://developers.google.com/maps/documentation/javascript/reference/places-autocomplete-service#AutocompletePrediction

#### [handleEnterKeydown]
Set handler for enter key press event by user with first result selection from google predictions dropdown. (optional)
Default: True

#### [hideResultDropdown]
Set to true to not display the result dorpdown and handle predictions by your own. (optional)
Default: False

#### [debounceTime]
Time to delay each input event (rxjs debounceTime) (optional)
Default: 150 (ms)

### NgxAutocomPlaceService
#### getPredictions
`getPlacePrediction` implementation : https://developers.google.com/maps/documentation/javascript/reference/places-autocomplete-service#AutocompleteService.getPlacePredictions

#### getPlaceDetails
`getDetails` implementation : https://developers.google.com/maps/documentation/javascript/reference/places-service#PlacesService.getDetails

---
_Source: https://npm.io/package/ngx-autocom-place · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._