@geoapify/angular-geocoder-autocomplete - Angular component

@geoapify/angular-geocoder-autocomplete is a library that wraps @geoapify/geocoder-autocomplete into an Angular component.

Installation

@geoapify/angular-geocoder-autocomplete has a peer dependancy on @geoapify/geocoder-autocomplete:

npm install @geoapify/geocoder-autocomplete @geoapify/angular-geocoder-autocomplete

yarn add @geoapify/geocoder-autocomplete @geoapify/angular-geocoder-autocomplete

Usage

You will require an API key to be able make requests to Geocoding API. Register and get an API key for Free on myprojects.geoapify.com.

1. Import GeoapifyGeocoderAutocompleteModule into your application module:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { GeoapifyGeocoderAutocompleteModule } from '@geoapify/angular-geocoder-autocomplete';
 
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    GeoapifyGeocoderAutocompleteModule.withConfig('YOUR_API_KEY')
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

2. Import Geocoder Autocomplete styles:

For example, you can add them to angular.json:

"styles": [
    ...
    "node_modules/@geoapify/geocoder-autocomplete/styles/round-borders.css",
    "src/styles.scss"
],

Learn more about provided styles and customization options on @geoapify/geocoder-autocomplete page.

3. Add Geoapify Geocoder Autocomplete component to your template:

<geoapify-geocoder-autocomplete 
    [value]="displayValue"
    [type]="options.type"
    [lang]="options.lang"
    [countryCodes]="options.countries"
    [position]="options.position"
    [limit]="options.limit" 
    (placeSelect)="placeSelected($event)" 
    (suggestionsChange)="suggestionsChanged($event)">
</geoapify-geocoder-autocomplete>

Learn more about the component Inputs and Outputs on @geoapify/angular-geocoder-autocomplete page.

Learn more