How to call angular8 component's function on webview?

Question

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 ?

Possible duplicate of [Call a service function from browser console in angular 6](https://stackoverflow.com/questions/54212288/call-a-service-function-from-browser-console-in-angular-6) — ReturnTable, Jul 11 '19 at 02:08

score 3 · Accepted Answer · answered Jul 11 '19 at 06:49

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/

score 1 · Answer 2 · answered Jul 11 '19 at 02:15

1

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

Then ng.probe($0).componentInstance

answered Jul 11 '19 at 02:15

Lam Nguyen

186
1
8

But ng.probe($0) is null ! – molysama Jul 11 '19 at 02:31
When click on a HTML tags, `$0` will be changed to its `Element` and `ng.probe($0)` is not null. – Lam Nguyen Jul 11 '19 at 02:34
Yes, I click the HTML tags, and $0 change to the element. But...still null. Besides I wanted to avoid the click. – molysama Jul 11 '19 at 02:42
Have you used debugMode in Angular? Because it's only available in development not production. – Lam Nguyen Jul 11 '19 at 02:43
In fact, my environment is webview. I want to call Angular's function from Java, so I have to find out the function. – molysama Jul 11 '19 at 04:58

score 1 · Answer 3 · answered Jul 11 '19 at 05:59

1

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

answered Jul 11 '19 at 05:59

Damian Pioś

473
2
5

How to call angular8 component's function on webview?

3 Answers3

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

.ts

2) Calling Angular method from webview/JavaApplication:-

index.html

.ts

Refer Link:-