Ng-gplace-autocomplete NPM

This project was generated with Angular CLI version 8.1.2.

ng-gplace-autocomplete

This is a demo project for ng-gplace-autocomplete angular component.

ng autocomplete demo

Integration

The first thing we have to do, is to install the ng-gplace-autocomlete in our project via npm.

npm i ng-gplace-autocomplete

Then, once the component has been successfully downloaded, we need to update our project with the types of google maps. This is done through the command bellow via npm again.

npm i @types/googlemaps

After that, we need to update our projects index.html with the Google Maps JavaScript API. To link this page with the api, we must add the script bellow in our index.html inside the head tag.

<script src="https://maps.googleapis.com/maps/api/js?key=<Your API KEY>&libraries=places&language=en"></script>

Replace with google places . Ref - Google Maps API

At this point, the component installation is complete. On the nex section, we will go through the component instalation.

Usage

Add the NgAutocompleteModule into your application module ( e.g. app.module.ts )

import { NgAutocompleteModule } from 'ng-gplace-autocomplete';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NgAutocompleteModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Add the ng-autocomplete component to your app.component.html like bellow

 <ng-autocomplete [addressType]="type" [country]="countryRestrictions" (onAddressChange)="onAddressChange($event)"></ng-autocomplete>

Create two consts in your app.component.ts for addresType and country parameters

  type:'address';  //This value could be address | geocode | establishment
  countryRestrictions=['gr']; //If not set, default is ['us']

Attach a function to the (onAddressChange) event like above and add this function to you app.component.ts file.

onAddressChange(event:any){
    //Do some staff
    console.log(event);
  }

After that, on every address selection, we should get a json object about the selected address like the following:

Screenshot from 2019-08-01 02-23-40

Styling

You can easily style the ng-autocomplete component by adding your styles as an object to the style property like below:

 <ng-autocomplete [addressType]="type" [country]="countryRestrictions" [style]="{'width':'400px','font-size':'1.1em'}" (onAddressChange)="onAddressChange($event)"></ng-autocomplete>