README

How do I get set up?

• run npm install "@autoaddress.com/aa3-control" to download the library

• Reference the autoaddress.min.js file inside your html header tag, pointing to the appropriate directory

	<script src="node_modules/@autoaddress.com/aa3-control/autoaddress/autoaddress.min.js"></script>
	<link rel="stylesheet" href="node_modules/@autoaddress.com/aa3-control/autoaddress/autoaddress-style.css">

• Add the folowing tag inside your html body tag

	<div id="aa-control"></div>

• Add the following in a script tag after the body, replacing the apiKey parameter with your autoaddress ApiKey.

	<script>
        var aa = Autoaddress({
            apiKey: "my_key",
            element: "aa-control"
        });
	</script>

Angular Setup

In your Angular Project. Run the following steps:

• run npm install "@autoaddress.com/aa3-control" to download the library

• In your angular.json file in your Angular environment, add these references to the autoaddress files from the node_modules in your styles and scripts section of your build scripts as shown below:

"styles": [
    "node_modules/@autoaddress.com/aa3-control/autoaddress/autoaddress-style.css",
],
"scripts": [
    "node_modules/@autoaddress.com/aa3-control/autoaddress/autoaddress.min.js",
]

• Also add the code block shown below to the asset section of the angular.json in your build script:

 "assets": [
    { 
    	"glob": "**/*", 
        "input": "./node_modules/@autoaddress.com/aa3-control/autoaddress/assets/images/", 
        "output": "./assets/images/" 
    },
	"src/favicon.ico",
    "src/assets"
],

• In your component, declare the Autoaddress function as shown in the example component below in your component's typescript file (*.component.ts file):

import { Component, OnInit } from '@angular/core';
declare function Autoaddress(options: any): void

@Component({
  selector: 'app-custom',
  templateUrl: './custom.component.html',
  styleUrls: ['./custom.component.scss']
})
export class CustomComponent implements OnInit {

• To call the Autoaddress, follow the example below. The example demonstrates intializing the Autoaddress control, setting the options for the Autoaddress control (Please refer to our Helpscout page for a list of additional options),and using callbacks when interacting with the control.

import { Component, OnInit } from '@angular/core';
declare function Autoaddress(options: any): void

@Component({
  selector: 'app-custom',
  templateUrl: './custom.component.html',
  styleUrls: ['./custom.component.scss']
})
export class CustomComponent implements OnInit {

  control: any;

  constructor() { }

  ngOnInit(): void {

    this.control = Autoaddress({
      apiKey: "pub_xxxxxxxxxxxxxxxxx",
      elementId: "aa-control",
      onPostLookup: function (result: any) {
        console.log(result);
      }
    });
  }

}

In this example we are initializing Autoaddress when the Init event for our custom component is called.

Once Autoaddress has been set up in typescript, go to the html part of your component (*.component.html). and add the following:

<div id="aa-control"></div>

• You can call functions for the Autoaddress control once it has been initialized as show below using the example from above. (Please refer to our Helpscout page to get a list of functions for the control):

this.control.setSearch("89-94 Capel Street");