Call Angular method from GWT

Question

I have a legacy GWT application. We developed an Angular frontend part that we compiled as Angular element ( web component ) and loaded it in GWT with the script injector:

ScriptInjector.fromUrl( "messaging.js").setWindow(ScriptInjector.TOP_WINDOW).setCallback(
                new Callback<Void, Exception>() {
                    public void onFailure(Exception reason) {
                    }
                    public void onSuccess(Void result) {
                    }
                }).inject();

This specific angular app has a service, that provides a method that I need to call (chat.service.ts):

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class ChatService {

 
  /*
    onTabChange close chat window.
  */
  onCloseChatWindow() {
    this.closeChatWindow.next(true)
  }
}

What I tried was:

public static native void closeActiveChatwindow() /*-{
    // I tried different variants:
    $wnd.onCloseChatWindow();
    $doc.onCloseChatWindow();
    $wnd.ChatService.onCloseChatWindow();
    $doc.ChatService.onCloseChatWindow();
}-*/;

But I always get the error message that the error:

SEVERE: (TypeError) : $doc.onCloseChatWindow is not a function

Any ideas?

Answer 1

try using an input property on the angular element to call the service method.

@Input()
doFoo() {
   this.chatService.onCloseChatWindow();
}

How to call a method on a Angular Web Component (Custom Element)