Reputation: 107

How to call angular8 component's function on webview?

My environment is webview, and I want to call Angular's function from Java, so I have to find out the function. How can I do ?

Upvotes: 2

Answers (3)

Manzer A

Reputation: 3816

In order to get the JavaScript function’s return value, you need to use the evaluateJavascript method:

webView.evaluateJavascript("javascript:myTestFunction();", new ValueCallback<String>() {
    @Override
    public void onReceiveValue(String s) {
            // Do what you want with the return value
        }
    });

1) Calling Method of Java application from Angular2+ application:-

Suppose, JavaFunction.SomeJavaMethod() is defined in Java app then,

.ts

 let data = {
    'key' : 2
    }
    JavaFunction.SomeJavaMethod(data);// call from angular

2) Calling Angular method from webview/JavaApplication:-

index.html

<body>
    <app-root></app-root>
    <script type="text/javascript">
         // data send from webview java app...call from java app
        function updateFromJAVAapp(data) {
            window['componentRef'].zone.run(() => {
                window['componentRef'].component.updateFromMyJavaApp(data);
            });
        }

    </script>
</body>

.ts

 constructor(
        private zone: NgZone
    ) {
        window['componentRef'] = {
            zone: this.zone,
            componentFn: (value) => this.updateFromMyJavaApp(value),
            component: this
        };
    }

    updateFromMyJavaApp(data) {
        console.log( JSON.stringify(data)); <=== data passed from java app webview
    }

Refer Link:-

https://www.tanelikorri.com/tutorial/android/communication-between-application-and-webview/

http://shripalsoni.com/blog/nativescript-webview-native-bi-directional-communication/

Upvotes: 3

Damian Pioś

Reputation: 483

ngOnInit{
 (window as any).name_visible_from_console = this.class_function.bind(this);
}

i think it's good to clear it in ngOnDestory

you also need to use ApplicationRef#tick in called method, cause angular won't update view

Upvotes: 1

Lam Nguyen

Reputation: 196

On browser, click on the html tag represents Component you want to find.

Then ng.probe($0).componentInstance