Swiftcomplete Angular

Address and what3words search in an Angular wrapper around the <swiftcomplete-search> web component. Type to get suggestions, select to fill your form or handle the result via outputs and ref.

Features

• Address search - Postcodes, street names, full addresses.
• what3words search - Enable via API to search by three-word addresses.
• Device location - Optional biasing of results by user's location.
• Styling - Same as the web component: variant, size, theme inputs and CSS variables. Automatically follows prefers-color-scheme by default.
• Events via outputs - selectAddress, searchStart, searchEnd, searchClear, and more.
• Ref API - getElement(), getInput(), and imperative methods like populateFields().

Quick start

// app.component.ts
import { Component } from '@angular/core';
import { SwiftcompleteComponent } from '@swiftcomplete/angular';
import type { Address } from '@swiftcomplete/angular';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [SwiftcompleteComponent],
  template: `
    <swiftcomplete
      [apiKey]="apiKey"
      placeholder="Search address or postcode"
      (selectAddress)="onSelect($event)"
    />
  `,
})
export class AppComponent {
  apiKey = 'YOUR_API_KEY';
  onSelect(address: Address) {
    console.log('Selected:', address);
  }
}

Configure the API (API key, country, search options, device location) via configureSwiftcomplete(config). See Getting started.

Get an API key from Swiftcomplete.

Documentation

| Topic | Description | | ---------------------------------------------- | --------------------------------------------------------------------------- | | Getting started | Installation, API key, basic usage with ref and outputs | | Inputs (props) | apiKey, placeholder, country, variant, size, theme, overrides | | Styling | Variant, size, theme, CSS variables, custom icons | | Events (outputs) | selectAddress, searchStart, searchEnd, manualEntry, searchClear, focus/blur | | what3words search | Enabling what3words via the service | | Device location | Biasing results by the user's location | | Populate fields | Filling form fields from the selected address via ref | | Advanced | configureSwiftcomplete config, ref, overriding UI |

Browser support

Same as the underlying web component: modern browsers with custom elements and Shadow DOM. Angular 18+.