Executing an Angular 5 function directly from an Android WebView

I am attempting to invoke an Angular 5 function from my Android WebView.

Within the Android code:

if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.KITKAT){
this.mWebView.evaluateJavascript("fooBar();", null);
} else {
this.mWebView.loadUrl("fooBar();");
}

In my Angular component, I have included the fooBar function

Within the Angular Component:

fooBar=function(){
console.log("fooBar");
}

However, the above code is resulting in an

Error Message: 

VM772:1 Uncaught ReferenceError: fooBar is not defined at <anonymous>:1:1

Can anyone provide guidance on how to call a TypeScript function from an Android Webview?

androidtypescriptandroid-webviewangular5

Answer №1

Check out this link for information on exposing Angular 2 methods publicly: How do expose angular 2 methods publicly?

I'm not sure why you would want to do this in your Android webview. It might be worth reconsidering that decision, although I don't have all the details. (Couldn't comment directly)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Typescript errors in console not being displayed by swc-loader

I have decided to make the switch from ts-loader to swc-loader based on the guidance provided in this article. However, after completing the migration, I am encountering an issue where basic Typescript errors are not being displayed in the console. For ins ...

typescriptwebpack-5swc

Issues arising with PhoneGap involving ajax and jsonp

My goal is to make an AJAX call to my remote server, send some parameters, and retrieve content. While this script functions well in a web browser, I'm encountering issues when trying to run it with PhoneGap (specifically testing on Ripple and Chrome) ...

androidajaxcordovajsonpripple

Updating the string resources from the AAR library

I am facing an issue in my app where an external library (AAR) that I have added is not fully translated into all the languages my own app supports. As a result, I am planning to manually translate the missing strings by adding them to the app's strin ...

androidtranslationaar

Comparing angular2/core and @angular/core: What sets them apart?

Maybe this is a silly question, but I've noticed that there are multiple instances of import {Component} from 'angular2/core' and import {Component} from '@angular/core' However, I can't seem to grasp when to use one ove ...

typescriptangular

The signed APK experiences crashes when utilizing Google Maps API v2, whereas the unsigned APK does not encounter any

When developing my android app, I utilize the Google Maps API v2 to display a map with markers. Everything runs smoothly with local debug and release versions. However, once I generate a signed APK, the app crashes whenever the map is supposed to be displa ...

androidgoogle-mapsnullpointerexceptionsigned-apk

What is the best way to make a generic type nullable?

In the code snippet below, you can see a logging method: private logData<T, S>(operation: string, responseData: T, requestData?: S) { this.logger.log(operation + ' ' + this.url); if (requestData) { this.logger.log('SENT ...

genericstypescript

Unexpected TypeError when using Response.send()

Here is a snippet of my simple express code: const api = Router() api.post('/some-point', async (req, res, next) => { const someStuffToSend = await Promise.resolve("hello"); res.json({ someStuffToSend }); }) In my development environmen ...

node.jstypescriptexpressnpm

Difficulty with Implementing Swipe Animation for RecyclerView Item

Currently, I am developing an Android app that includes RecyclerView and swipe-to-dismiss functionality. During the process of implementing the swipe-to-show-options animation, I encountered a unique problem. Below is the code snippet for my custom swipe- ...

androidkotlin

Utilize the power of PIXI.js to effortlessly convert your canvas into a high-quality image without encountering

I'm currently working on exporting the entire canvas as a PNG using PIXI.js within a React app that incorporates react-pixi. My version is 6.5 and I've been trying out the following code: // MyComponent.tsx <button onClick={exportImage} /> ...

javascriptreactjstypescripthtml5-canvaspixi.js

When you import objects in Typescript, they may be undefined

I have a file called mock_event that serves as a template for creating an event object used in unit testing. Below, you can find the code snippet where this object is initialized: mock_event.ts import {Event} from "../../../models/src/event"; im ...

typescriptimport

Retrieving a variable value set within a jQuery function from within an Angular 2 component

In the current project, I am facing a situation where I need to work around and initialize jQuery datetimepicker inside an Angular 2 application (with plans to refactor it later). However, when I assign a datetime value to a variable, I encounter a proble ...

javascriptjquerytypescriptangular

Retrieve the image using the API

I've been attempting to incorporate this code to make an API call for an image, but unfortunately, I haven't been successful: <kit-general-16 [isNew]="product.isNew" [isFavorite]="product.isFavorite" [image]="mainImag ...

angulartypescriptangular10

Prevent the 'unbound function' ESLint warning when supplying a static method reference to a superclass constructor in TypeScript

Looking to solve a technical problem in my code. I have a class that needs to call its superclass using a function passed as an argument. I specifically want to pass a static function from the same class: export abstract class ChildAdapter extends Adapter{ ...

typescripteslint

Missing NDK stack backtraces in Fabric Crashlytics due to incomplete frames

I have been working on an Android Studio project with multiple native shared libraries implemented. To enhance the crash reporting capability, I decided to integrate Crashlytics NDK support and uploaded symbols to Fabric by following the steps outlined in ...

androidandroid-ndkcrashlytics-android

Creating a customizable illustration

Can someone help me optimize my XML code to create a diagram like the one shown below? I've included my code so far, but I'm open to suggestions and examples from others. I also want to be able to easily copy and modify the code in the future whi ...

androidxmlandroid-layoutandroid-activityandroid-studio

Execute an Asynchronous Operation in NgRx After Triggering an Action

Please note that this is a question seeking clarification Instructions Needed I am currently working on dispatching an action to NgRx in order to add a task to a list of tasks. Additionally, I need to perform a put request to an API to save the changes ma ...

angulartypescriptngrx

The process of incorporating types into Node.js and TypeScript for handling req and res objects

Check out the repository for my project at https://github.com/Shahidkhan0786/kharidLoapp Within the project, the @types folder contains a file named (express.d.ts) where I have added some types in response. The (express.d.ts) file within the @types folde ...

javascriptnode.jstypescriptexpressmern

Load images in advance using the link tag to eliminate the warning (html/Javascript)

After attempting to insert <link rel="preload" as="image" href="path"> into the <head>, I received a warning in the console. {path to image} was preloaded using link preload but not used within a few seconds from t ...

javascripthtmlangulartypescriptconsole

Updated TypeScript definitions for Node.js version 2.0 available now with @

I've recently started using the new @typings feature, and I noticed that when I run npm install --save @types/react, it creates an @typings folder within the node_modules directory. Additionally, it adds the dependency @types/react: ^0.14.43 in the pa ...

typescriptnpm

Ensuring a component stays active while navigating in Angular 2

Currently, I have a javascript application that heavily relies on jquery. It's not the most visually appealing, difficult to maintain, and definitely in need of a framework upgrade. That's why I'm in the process of migrating it to be compati ...

javascripttypescriptangular