https://github.com/skynet2/ngx-google-places-autocomplete

Google Places autocomplete for angular web project
https://github.com/skynet2/ngx-google-places-autocomplete

angular google-place-api google-places ngx places-autocomplete typescript

Last synced: 5 days ago
JSON representation

Google Places autocomplete for angular web project

• Host: GitHub
• URL: https://github.com/skynet2/ngx-google-places-autocomplete
• Owner: skynet2
• License: mit
• Created: 2017-12-02T14:14:23.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2022-12-06T20:56:04.000Z (about 2 years ago)
• Last Synced: 2025-02-09T16:07:43.195Z (12 days ago)
• Topics: angular, google-place-api, google-places, ngx, places-autocomplete, typescript
• Language: TypeScript
• Homepage:
• Size: 3.97 MB
• Stars: 92
• Watchers: 4
• Forks: 77
• Open Issues: 56
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

        
# ngx-google-places-autocomplete

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

[![NPM](https://nodei.co/npm/ngx-google-places-autocomplete.png)](https://nodei.co/npm/ngx-google-places-autocomplete/)

# 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 : 

```

    

```

2. 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)

```ts

import { GooglePlaceModule } from "ngx-google-places-autocomplete";

@NgModule({

    imports: [GooglePlaceModule, BrowserModule, FormsModule, ...],

        ....

        })

```

2. Add directive ngx-google-places-autocomplete to your input field (options is an optional parammeter)

```

```

3. Additionally you can reference directive in your component

```ts

    @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 : 

```html  

[options]="{

    types: [],

    componentRestrictions: { country: 'UA' }

    }"

```

# GitHub

Please feel free to declare issues or contribute: https://github.com/skynet2/ngx-google-places-autocomplete