I am trying to pass a callback function to when a method from a third party javascript widget library.
Details are here: https://addressfinder.nz/docs/widget_docs/
The method I am trying out is
Method name: on()
Parameters: event_name:String, callback:Function
Return value: AddressFinder.Widget
Description: Subscribes to a specified event.
My component code is :
import { Component, OnInit } from "@angular/core";
declare var AddressFinder: any;
@Component({
selector: "app-address",
templateUrl: "./address.component.html",
styleUrls: ["./address.component.css"]
})
export class AddressComponent implements OnInit {
ngOnInit() {
let script = document.createElement("script");
script.src = "https://api.addressfinder.io/assets/v3/widget.js";
script.async = true;
script.onload = this.initAf;
document.body.appendChild(script);
}
initAf() {
let widget = new AddressFinder.Widget(
...
);
var vm = this;
widget.on("address:select",vm.addressSelected);
/* this works fine but cannot get angular component inside the function*/
/*widget.on("result:select", function(fullAddress, metaData) {
console.log(metaData);
});*/
}
addressSelected = (function(address, metaData) {
console.log(metaData);
}).bind(this);
}
When I run I get an error
ERROR Error: Cannot read property 'apply' of undefined
Here is the demo: https://stackblitz.com/edit/angular-external-js