@scorpiosl4/ngx-google-auto-complete

Angular google auto complete (wrapper for ngx-google-places-autocomplete).

Working with latest Angular 11.

Installation

To install this library with npm, run below command:

$ npm install --save ngx-google-places-autocomplete @scorpiosl4/ngx-google-auto-complete

Example:

<ngx-google-auto-complete [options]="options" (onPlaceSelect)="onDataChange($event)"></ngx-google-auto-complete>

Usage

Configuration

First add your google maps autocomplete api key into following script tag and add it inside index.html header tag

<script defer
    src="https://maps.googleapis.com/maps/api/js?key=ADD_YOUR_API_KEY_HERE_&libraries=places"></script>

Next, Import GoogleAutoCompleteModule in root

import { GoogleAutoCompleteModule } from '@scorpiosl4/ngx-google-auto-complete' 

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

Then setup your component models as below :

import { Component, ViewChild } from '@angular/core';
import { Address } from '@scorpio/ngx-google-auto-complete';
import { AUTO_COMPLETE_TYPE, IGoogleAddressComponents, Options } from '@scorpiosl4/ngx-google-auto-complete';

@Component({
  selector: 'app-demo',
  templateUrl: './demo.component.html',
  styleUrls: ['./demo.component.scss']
})
export class DemoComponent {
  public data:any = {};
  public options: Options = {
    types: ['(cities)'],
  };

  public cssClass: string = 'form-control';
  
  public attributes: IAttribute[] = [
    {
      name: 'disabled',
      value: 'true',
    }
  ];

  public options2: Options = {
    componentRestrictions: { country: 'lk' }, //limit response for a specific country
  }

  public initialTextBoxValue: string = 'This is initial text';
  public placeHolder: string = 'This is place holder';
  public autoCompleteType1: AUTO_COMPLETE_TYPE = 'ADDRESS';
  public autoCompleteType2: AUTO_COMPLETE_TYPE = 'BUSINESS';
  public autoCompleteType3: AUTO_COMPLETE_TYPE = 'COMPLETE_ADDRESS';

  constructor() {
  }

  public onDataChange(data: Address | IGoogleAddressComponents[]) {
    this.data = data;
  }
}

Then use the component

<ngx-google-auto-complete [options]="options" (onPlaceSelect)="onDataChange($event)"></ngx-google-auto-complete>

Input configurations

Input	Input value type	Usage
autoCompleteType	AUTO_COMPLETE_TYPE	Get complete address or Only country and city
textboxValue	string	Set initial value of the text box
placeHolder	string	Set place holder text
options	Options	Change google results (eg cities only,limit for a specific country, etc..)
cssClass	string	Set css class to the input element
attributes	Array	Set attributes to the input element

Outputs

Output	Output value type	Usage
onPlaceSelect	Address OR IGoogleAddressComponents[]	Get the google data for the selected place
onInputInitialized	ElementRef	Apply any changes for the Input element

License

MIT(./LICENSE)