Integrating what3words in Your Angular 18 Application

Matthias — Wed, 20 Nov 2024 20:54:03 +0000

what3words is a geocoding system that provides a simple way to identify precise locations using unique three-word combinations. This guide explains how to integrate official what3words components into an Angular 18 application.

Since Angular 17 there are issues with the official what3words Angular library due to a change in how Angular projects are built. The problems arised when Angular moved away from building with babel in v15 to vite in v17.

But with the following steps the components can still be used.

Step 1: Install the Required Packages

To get started, install the what3words Angular components and JavaScript components packages.

npm install @what3words/angular-components
npm install @what3words/javascript-components

Step 2: Replace the Angular Builder

For the what3words components to work, you need to replace Angulars default builder with an older version. To do that update the builder configuration in angular.json like this:

{
  "projects": {
    "test-ng-what3words": {
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "main": "src/main.ts"
        }
      }
    }
  }
}

The newer builder version (@angular-devkit/build-angular:application) uses the browser attribut to set the main.ts you need to replace that tag with main.

Step 3: Load Web Components from the JavaScript Components Library

Modify the main.ts file to load the what3words JavaScript components as web components to register them correctly in the Angular application.

import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component';
import { applyPolyfills, defineCustomElements } from "@what3words/javascript-components/loader";

bootstrapApplication(AppComponent, appConfig).catch((err) => console.error(err));

defineCustomElements(window).then(applyPolyfills);

Step 4: Add the Components

As an example we are going to implement the AutoSuggestComponent. This component allows users to search for three-word addresses.

First you need import the ComponentsModule from @what3words/angular-components in your Angular component.

import { ComponentsModule } from '@what3words/angular-components';

@Component({
  selector: 'app-my-component',
  standalone: true,
  imports: [ComponentsModule],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class MyComponent {}

Then you kann add the autosuggest component in the corresponding HTML file like this:

<what3words-autosuggest api_key="your_api_key">
  <input 
    type="text" 
    placeholder="Search for your business" 
    [value]="value" 
    (input)="onChange($event)" 
  />
</what3words-autosuggest>

Replace your_api_key with your actual what3words API key and use the value and onChange properties to manage the input value und changes dynamically.

Conclusion

With these steps, you have successfully integrated the what3words autosuggest component into your Angular 18 project. To expand further, consider integrating features like maps or reverse geocoding for a complete location-based solution. The integration steps are the same.