How to create a class with annonymous functions in Angular8

Question

I'm developing an Angular 8 app and need to use a library for displaying 3D models (JS + WASM). For interaction between my Tree Table and 3D model, I need to register an observer in this library.

The given codesample for registering the observer (for this library) is written in AngularJS:

Registration:

$scope.RegisterSelectionObserver = function() {
    if ($scope.selectionObserver == null) {
        $scope.selectionObserver = new $scope.MySelectionClass();
        $scope.session.RegisterSelectionObserver($scope.selectionObserver);
    }
}

Class Definition:

$scope.MySelectionClass = Module.SelectionEvents.extend("SelectionEvents", {
        __construct: function() {
            this.__parent.__construct.call(this);
            this.SetEventsFilter(Module.EVENTS_PICKS | Module.EVENTS_SELECTION);
        },

        OnSelectionBegin: function () {
            if ($scope.webglSettings.selectionLogging === 'YES') {
                console.log("OnSelectionBegin");
            }
        },
     });

My Adoption: I've tried to create a class with its constructor and pass it to observer registration, with an error.

My Custom class:

export class ExtSelectionEvents{
    constructor(){
    }

    OnSelectionBegin(){
        console.log('OnSelectionBegin');
    }
}

My Registering:

const extSelectionEventsInstance = new ExtSelectionEvents();
session.RegisterSelectionObserver(extSelectionEventsInstance);

Error:

zone.js:703 Unhandled Promise rejection: Cannot pass "[object Object]" as a SelectionEvents* ; Zone: ; Task: Promise.then ; Value: BindingError {name: "BindingError", message: "Cannot pass "[object Object]" as a SelectionEvents*", stack: "BindingError: Cannot pass "[object Object]" as a S…erences (http://localhost:4200/scripts.js:181:13)"}message: "Cannot pass "[object Object]" as a SelectionEvents*"name: "BindingError"stack: "BindingError: Cannot pass "[object Object]" as a SelectionEvents*↵
at BindingError. (http://localhost:4200/assets/js/libthingview_wasm.js:1:117337)↵
at new BindingError (eval at createNamedFunction (http://localhost:4200/assets/js/libthingview_wasm.js:1:116224), :4:34)↵ at throwBindingError (http://localhost:4200/assets/js/libthingview_wasm.js:1:118918)↵ at RegisteredPointer.nonConstNoSmartPtrRawPointerToWireType [as toWireType] (http://localhost:4200/assets/js/libthingview_wasm.js:1:134368)↵ at Session$RegisterSelectionObserver [as RegisterSelectionObserver] (eval at new_ (http://localhost:4200/assets/js/libthingview_wasm.js:1:142970), :8:26)↵ at OverviewComponent.push../src/app/views/mechportal/overview/overview.component.ts.OverviewComponent.callback (http://localhost:4200/views-mechportal-overview-overview-module.js:18109:17)↵ at http://localhost:4200/scripts.js:18:31↵ at http://localhost:4200/scripts.js:182:17↵ at _loadPreferences (http://localhost:4200/scripts.js:304:9)↵ at Object.LoadPreferences (http://localhost:4200/scripts.js:181:13)"proto: Error BindingError: Cannot pass "[object Object]" as a SelectionEvents* at BindingError. (http://localhost:4200/assets/js/libthingview_wasm.js:1:117337) at new BindingError (eval at createNamedFunction (http://localhost:4200/assets/js/libthingview_wasm.js:1:116224), :4:34)

Summary:

The library is expecting an annonymous function for OnSelectionBegin, because it is creating a named function of it.

What is happening in MySelectionClass and how can I translate the AngularJS Class definition with its annonymous function to work with Angular 8 / the library?

Answer 1

The class SelectionEvents was the missing peace.

After the global delcaration of Module (declare var Module: any) I finally could extend the SelectionEvents class and implement my methods.

The only difference between the implementations of Angular and AngularJS was the different scopes. In AngularJS it was bound to the scope of the controller and now it is in global scope.

   const MyEventsClass = Module.SelectionEvents.extend("SelectionEvents", {

  __construct: function () {
    this.__parent.__construct.call(this);
    this.SetEventsFilter(Module.EVENTS_PICKS | Module.EVENTS_SELECTION);
  },

  OnSelectionBegin: function () {
      console.log("OnSelectionBegin");
      console.dir(this);
  }
});

session.RegisterSelectionObserver(new MyEventsClass());