npm package: @smartmaps/autocomplete-angular
Description: Angular directive for @smartmaps/autocomplete
Latest version: 5.2.0

# SmartMaps

<img src="https://www.smartmaps.net/wp-content/uploads/2022/09/SmartMaps_poweredby.svg"
     alt="SmartMaps - powered by YellowMap AG"
     width="500" /><br>
SmartMaps is a GDPR-compliant map platform developed by YellowMap AG. The focus of the platform is the digital sovereignty of users. Based on OpenStreetMap data, SmartMaps offers individually customizable functions such as maps, geocoding, autocomplete, routing as well as elevation, timezone and weather information for the visualization of points of interest, internal location analyses or address validations. SmartMaps is certified with the seals 'Software Hosted in Germany' and 'fair.digital'. These confirm a GDPR-compliant, transparent and data-saving handling of personal information.

To get started with SmartMaps, register for free at [SmartMaps](https://www.smartmaps.net/pricing)

For more information visit our [SmartMaps Documentation](https://docs.smartmaps.cloud/)

## Install

The @smartmaps/autocomplete-angular package wraps the service from @smartmaps-autocomplete in an angular directive.

```
// provide the api Key and options in application bootstrap
bootstrapApplication(AppComponent, {
	providers: [
		provideApiKey(// INSERT-API-KEY here or read it from environment options),
		provideAutocompleteOptions(environment.autocompleteOptions),
		// ... additional providers
	]
})



// import the AutocompleteDirective in Standalone Component or NgModule
@Component({
	standalone: true,
	imports: [
		AutocompleteDirective,
		// ... additional imports
	],
	// ... additional settings
})




// use the 'smartmapsAutocomplete' Directive in the html template
<input
	type="search"
	smartmapsAutocomplete
	placeholder="In SmartMaps suchen..."
	(selected)="onSelected($event)"
/>


// add the styles from @smartmaps/autocomplete in your styles
@import '~@smartmaps/autocomplete/autocomplete.css';


```

## Features

### SmartMaps GL ([@smartmaps/smartmaps-gl](https://www.npmjs.com/package/@smartmaps/smartmaps-gl))

SmartMaps GL JS is the globally usable vector map base to integrate interactive and costumizable maps into your web applications. Built on top of MapLibre GL, SmartMaps GL JS provides a powerful and flexible solution for map rendering and location data visualization.

### Maps ([@smartmaps/maps](https://www.npmjs.com/package/@smartmaps/maps))

Maps is the globally usable map base for your industry-specific requirements. Whether you want to visualize location data, business data or socio-demographic data on the web, internal applications or an app.

### Autocomplete ([@smartmaps/autocomplete](https://www.npmjs.com/package/@smartmaps/autocomplete))

A few letters are enough to inspire your customers. With the Autocomplete function, suitable suggestions are already recommended when the first letters are entered in the address search. Autocomplete is easily customizable through parameters like local boosting.

### Geocoding ([@smartmaps/geocoding](https://www.npmjs.com/package/@smartmaps/geocoding))

With the help of geocoding, you convert postal addresses into coordinates and visualize them on the map with pinpoint accuracy. Reverse geocoding allows you to convert an existing coordinate from an automatic location into an address in the opposite way.

### Routing ([@smartmaps/routing](https://www.npmjs.com/package/@smartmaps/routing))

Show your customer the way to your location and navigate him safely to the desired destination - whether on foot, by bike or by car. Use the routing API not only for classic A-B routing, but also for matrix routing, the calculation of isochrones, trip planning or map match.

### Elevation ([@smartmaps/elevation](https://www.npmjs.com/package/@smartmaps/elevation))

The Elevation Service is a powerful tool that allows you to retrieve elevation data for any location on Earth. Whether you need to determine the height of a specific point or analyze the terrain profile along a route, the Elevation Service provides accurate and reliable data.

### Timezone ([@smartmaps/timezone](https://www.npmjs.com/package/@smartmaps/timezone))

The SmartMaps Timezone API allows you to retrieve detailed timezone information for any geographical location. By leveraging this API, you can access real-time data on local time, UTC offsets, and daylight saving time, enhancing your applications with precise temporal context.

### Weather ([@smartmaps/weather](https://www.npmjs.com/package/@smartmaps/weather))

The SmartMaps Weather API offers access to weather data and forecasts for specific locations across Europe. It supports querying weather information through various methods, including geographic coordinates, addresses, locations, rectangles, and polylines. The data is provided by "Deutsche Wetterdienst".

### Area ([@smartmaps/area](https://www.npmjs.com/package/@smartmaps/area))

The Area Service provides a comprehensive REST API for querying geographic boundaries and areas based on geographic coordinates or OpenStreetMap (OSM) IDs. This API supports both JSON and GeoJSON formats, ensuring seamless integration with a wide range of applications.