0

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

Community
  • 1
  • 1
Aseem Chiplonkar
  • 198
  • 3
  • 17

0 Answers0