{"id":20612383,"url":"https://github.com/skynet2/ngx-google-places-autocomplete","last_synced_at":"2025-04-05T08:05:03.007Z","repository":{"id":27193369,"uuid":"112847481","full_name":"skynet2/ngx-google-places-autocomplete","owner":"skynet2","description":"Google Places autocomplete for angular web project","archived":false,"fork":false,"pushed_at":"2022-12-06T20:56:04.000Z","size":4158,"stargazers_count":93,"open_issues_count":56,"forks_count":79,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-03-29T07:04:01.908Z","etag":null,"topics":["angular","google-place-api","google-places","ngx","places-autocomplete","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/skynet2.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-12-02T14:14:23.000Z","updated_at":"2025-02-21T09:58:09.000Z","dependencies_parsed_at":"2022-09-13T20:50:33.014Z","dependency_job_id":null,"html_url":"https://github.com/skynet2/ngx-google-places-autocomplete","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skynet2%2Fngx-google-places-autocomplete","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skynet2%2Fngx-google-places-autocomplete/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skynet2%2Fngx-google-places-autocomplete/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skynet2%2Fngx-google-places-autocomplete/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/skynet2","download_url":"https://codeload.github.com/skynet2/ngx-google-places-autocomplete/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247305933,"owners_count":20917208,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","google-place-api","google-places","ngx","places-autocomplete","typescript"],"created_at":"2024-11-16T10:24:14.436Z","updated_at":"2025-04-05T08:05:02.986Z","avatar_url":"https://github.com/skynet2.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ngx-google-places-autocomplete\nThis module is a wrapper for Google Places Autocomplete js library.\n\n[![NPM](https://nodei.co/npm/ngx-google-places-autocomplete.png)](https://nodei.co/npm/ngx-google-places-autocomplete/)\n\n# Installation\n#### npm\n```\nnpm install ngx-google-places-autocomplete\n```\n#### yarn\n```\nyarn add ngx-google-places-autocomplete\n```\n# Integration\n1. Add google library in your index.html file : \n```\n    \u003cscript src=\"https://maps.googleapis.com/maps/api/js?key=\u003cYour API KEY\u003e\u0026libraries=places\u0026language=en\"\u003e\u003c/script\u003e\n```\n2. Replace \u003cYou API KEY\u003e with google places api key. Ref - https://developers.google.com/places/web-service/get-api-key\n\n# Usage\n1. Add a module into your application (as a rule app.module.ts)\n```ts\nimport { GooglePlaceModule } from \"ngx-google-places-autocomplete\";\n\n@NgModule({\n    imports: [GooglePlaceModule, BrowserModule, FormsModule, ...],\n        ....\n        })\n```\n2. Add directive ngx-google-places-autocomplete to your input field (options is an optional parammeter)\n```\n\u003cinput ngx-google-places-autocomplete [options]='options' #placesRef=\"ngx-places\" (onAddressChange)=\"handleAddressChange($event)\"/\u003e\n```\n3. Additionally you can reference directive in your component\n```ts\n    @ViewChild(\"placesRef\") placesRef : GooglePlaceDirective;\n    \n        public handleAddressChange(address: Address) {\n        // Do some stuff\n    }\n```\n\n# Angular Universal\nIn order to use under angular universal please check that comment https://github.com/skynet2/ngx-google-places-autocomplete/issues/15#issuecomment-465371214\n\n## Options\nRefer to original google maps api - https://developers.google.com/maps/documentation/javascript/places-autocomplete\nOptions object - https://github.com/skynet2/ngx-google-places-autocomplete/blob/master/src/objects/options/options.ts\nGoogle doc for Options : https://developers.google.com/maps/documentation/javascript/reference/places-widget#AutocompleteOptions\nExample : \n```html  \n[options]=\"{\n    types: [],\n    componentRestrictions: { country: 'UA' }\n    }\"\n```\n\n# GitHub\nPlease feel free to declare issues or contribute: https://github.com/skynet2/ngx-google-places-autocomplete\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fskynet2%2Fngx-google-places-autocomplete","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fskynet2%2Fngx-google-places-autocomplete","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fskynet2%2Fngx-google-places-autocomplete/lists"}