Developing applications with Angular 4 and AppInventor window

Currently, I have a local Angular 4 application that utilizes localStorage on a desktop browser for data persistence. Within the application, I have implemented a WebViewer in AI.

It is clear that localStorage cannot function in AI2, so alternative data storage options such as WebViewString must be utilized. Additionally, I am aware of how to identify whether the application is running on AI or a desktop browser by utilizing window.AppInventor in Javascript.

Now, my query is this - How can I determine if the application is operating in AI while using Angular 4? This identification will enable me to utilize localStorage for desktop browsers and WebViewString for AI

I have attempted incorporating window.AppInventor into my Angular code but encountered an error

Property 'AppInventor' does not exist on type 'window'
angularapp-inventor

Answer №1

Successfully discovered the solution!

In my quest to obtain the reference for the Javascript window object in Typescript, I found that once acquired, using it is akin to how one would utilize the window object in plain Javascript.

For those interested, check out this informative link:

If you wish to delve deeper into obtaining the native window reference, the above resource offers a wealth of information. Once we secure the reference, we can incorporate it as follows:

if (this.winRef.nativeWindow.AppInventor) {
    this.persistData = JSON.parse(this.winRef.nativeWindow.AppInventor.getWebViewString());
} else {
    this.persistData = JSON.parse(localStorage.getItem("floodPersist"));
}

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

Learn how to easily toggle table column text visibility with a simple click

I have a working Angular 9 application where I've implemented a custom table to showcase the data. Upon clicking on a column, it triggers a custom modal dialog. The unique feature of my setup is that multiple dialog modals can be opened simultaneously ...

javascriptcssangulartypescript

Issue with calling a function to change the CSS color class of a button in Angular

Within my Angular code, I am attempting to set a CSS color for my button by calling a TypeScript function that will return the appropriate CSS class name. This is the code I have tried: <button style="height: 10%" class="getColor(days.date)">{{days ...

cssangulartypescript

Angular Material (8) error code S2591: The variable 'require' is not defined in the current scope

Currently, I am attempting to record the date and time in the JavaScript console. Despite the code successfully logging the dates, an error message persists: Note: The code is functioning properly, with the dates being displayed in the console. It is only ...

javascriptnode.jsangulartypescriptecmascript-6

Unable to assign to 'options' as it is not recognized as a valid property of 'p-multiSelect'

I am currently in the process of incorporating the datatable filter from primeng into my project. Here is the code snippet I have written: <p-column field="time" header="Time" [filter]="true" filterPlaceholder="&#xf0b0;"> <ng-template pTe ...

angulardatatableprimeng

Encountering an error in Angular 8 where attempting to access an element in ngOnInit results in "Cannot read property 'focus' of null"

My html code in modal-login.component.html includes the following: <input placeholder="Password" id="password" type="password" formControlName="password" class="form-input" #loginFormPassword /> In m ...

angulartypescript

The Angular router-outlet is refusing to display any content

I am new to Angular and currently learning through a lecture with hands-on practice. I have written the code below as instructed by my teacher, but it's not displaying anything on the screen. Can someone please assist me? app.module.ts : @NgModule({ ...

angularrouter-outlet

What is the best way to differentiate between the legend and chart when working with three separate

I have encountered an issue with my pie charts. The first chart has 10 legends displayed below it, while the second chart only has 4 legends. When I adjust the padding to accommodate the 10 legends in the first chart, the names of the 4 legends in the se ...

angularchartshighchartslegendpie-chart

Angular's HTTP client allows developers to easily make requests to

I am struggling with grasping the concept of async angular http client. In my Java backend, I have endpoints that return data in the same format but with different meanings. To handle this, I created the following code: export class AppComponent implement ...

angularhttpasynchronoussubscribe

Error: Unable to install Angular on WSL due to permission denied for Node

Struggling to set up angular on WSL2, with node version 17.3.1 and npm version 8.3.0 already installed. Received an error when trying the command npm install -g @angular/cli: npm ERR! code 127 npm ERR! path /root/.nvm/versions/node/v17.3.1/lib/node_module ...

angularnpmangular-cliwindows-subsystem-for-linux

Keep an eye on the output of Firebase database in Angular 2

Just starting out in angular, so please be patient :) Using Angular 2 (version 1.0.4), Angular CLI, and NodeJs 7.9. I've been trying to create a centralized service that checks if a user is logged in, retrieves their data, and sends it back for the ...

angulartypescriptangular2-services

ERROR TypeError: Unable to access the 'nativeElement' property since it is undefined in Angular 5

I have encountered a problem while working on my application. Although similar issues have been asked before, I believe mine is slightly different. In my application, when a user deletes products from their cart, I want to automatically close the modal wi ...

angulartypescript

Issue: Unable to locate the name 'ContactField' in Ionic 2

While attempting to use Ionic2 to save a contact, an error occurs when running the app through the command line. The cordova-plugin-contacts has been properly installed. Below is the code snippet: import { Component } from '@angular/core'; impo ...

cordovaangulartypescriptcordova-pluginsionic2

How can you utilize Angular 2 Services for sharing global variables?

Within our NG starter boilerplate, the file app.component.ts contains the following code: export class AppComponent {title = "Website Title"} The title variable will be displayed in the appropriate app.component.html as shown below: <p>{{title}}&l ...

angular

The optimal location to declare a constructor in Typescript

When it comes to adding properties in an Angular component, the placement of these properties in relation to the constructor function can be a topic of discussion. Is it best to declare them before or after the constructor? Which method is better - Method ...

angulartypescript

Discover the method for dynamically setting the rangeSelector's min and max values multiple times in Angular Highcharts

I'm looking to dynamically set the range of an angular highstock chart by interacting with another component such as a table or button. For example, attempting to use setExtremes for selecting range T1 or T2 does not seem to work properly in this cod ...

angularhighchartsangular-highcharts

Positioning CSS for a Responsive Button

Currently, I am working on making my modal responsive. However, I am encountering an issue with the positioning of the "SAVE" button. The button is not staying in the desired position but instead disappears. Below is the snippet of my HTML and CSS: .dele ...

javascripthtmlcssangular

Internationalization of deferred-loaded modules within the JHipster application

I created My App using JHipster, which utilizes the JhiLanguageService in the ng-jhipster library. This service relies on the JhiConfigService to configure ngx-translate without requiring manual imports and configuration of the TranslateModule in my app.mo ...

angularjhipsterngx-translate

How can I display JSON values without revealing the parent in Angular 5 and Ionic 3?

I am trying to extract values from JSON without the parent keys. Here is the JSON structure I have: [ { "companies": [{ "id": 1, "name": "Prueba", "company_number": "23423423A", "latitude": 241241.12, "lo ...

angulartypescriptionic-frameworkangular5

When attempting to display an identical image on two distinct canvas elements in Angular 6

I am facing an issue where the image is only rendered on the second canvas instead of both canvases. I need assistance in finding a solution to render the same image on both canvases. Below is a screenshot demonstrating that the image is currently only re ...

javascriptangularimagetypescript

sending arguments to angular directive

It was causing me some concern to see the number of global Angular change detections triggered every time an event occurs. That's why I stumbled upon Angular 2 runOutsideAngular still change the UI and decided to implement the 'OutSideEventHandle ...

angularangular6angular-directive