The test function is not recognized by Cordova when the device is ready

Within my app.component.ts file, I have the following code snippet:

export class AppComponent implements OnInit {
  constructor(private auth: AuthService, private fireBaseService: FirebaseService, ) {}

  ngOnInit() {
    this.auth.run();
    document.addEventListener('deviceready',  this.fireBaseService.onDeviceReady, false);

  }

In the Firebase service, my simplified code (in reality I intend to do more than console.log()) looks like this:

export class FirebaseService {
  output = '';

  private audioObj = new Audio();

  constructor() {
    console.log('initialized firebaseservice');

  }

  test() {
    console.log('test');
  }


  onDeviceReady() {
    this.test();
  }
}

When running the application, the console outputs:

initialized firebaesservice

this.test is not a function.

What is the best way to call the test() method from within onDeviceReady() in the firebaseservice?

https://i.stack.imgur.com/I6pRj.png

Answer №1

It appears that the scope of this is different in this context. For more information, you can search for "javascript this context" to get a better explanation.

Give this a try:

ngOnInit() {
    this.auth.run();
    document.addEventListener('deviceready',  this.fireBaseService.onDeviceReady.bind(this), false);

  }

Alternatively, a cleaner approach could be:

ngOnInit() {
    this.auth.run();
    document.addEventListener('deviceready',  () => {
        this.fireBaseService.onDeviceReady(); 
    }, false);
  }

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

After triggered window.print() in Angular, the window:afterprint event is failing to work as

I am triggering window.print() with a button click <button class="btn btn-primary" type="button" (click)="printDocument()"> Print </button> Inside the printDocument method, I open the document in a new window and ...

What is the process for incorporating personalized variables into the Material Ui Theme?

In the process of developing a react app with TypeScript and Material UI, I encountered an issue while attempting to define custom types for my themes. The error message I received is as follows: TS2322: Type '{ mode: "dark"; background: { default: s ...

Preserve data even after refreshing the browser in Angular

Is there a reliable method to preserve my data after refreshing my browser? I've experimented with rxjs behavior subject, but it hasn't worked for me. I prefer not to use local/session storage due to security concerns and best practices, especia ...

Issues encountered while developing a ReactJS application using TypeScript

While attempting to create a React app using the command npx create-react-app client-app --use-npm --typescript, I expected to generate a project with TypeScript files, but instead ended up with index.js and app.js rather than index.tsx and app.tsx. Could ...

Step-by-step guide for adding an object to a Material UI select component

I am in the process of incorporating a Select component with reactjs material ui and typescript. Yet, I encounter this typing error: Property 'id' does not exist on type 'string'. Property 'name' does not exist on type ' ...

Incorporating and modifying a component's aesthetics using styled-components: A comprehensive guide

My OverviewItem component has 2 props and is a styled-component. I want to change just one style on this component, which can be done by using the technique of styling any component. Does creating a wrapper component remain the only option for sharing st ...

Documentation for npm package that has been published

Recently, I created my very first npm package using TypeScript. However, when I tried to use this package in another project, I realized that I wasn't getting the expected code completion and it was challenging to work with it without proper support. ...

Unable to set items as sticky within mat-tabs

Is there a way to make my image stick in place using the following CSS code? position: -webkit-sticky; position: sticky; top: 1px; I have tried implementing it but haven't been successful. HTML: <mat-tab-group class="user-tabs" (selectedTa ...

Looking for Angular 2 material components for dart with CSS styling? Need help centering a glyph on your page?

HTML: <div class="border"> <glyph class="center" [icon]="'star'" ></glyph> <div class="centerText"> This Is Text that is centered. </div> </div> Css: .centerText{ text-align: center ...

A feature that continues to operate even when the application is not in the foreground in Angular Ionic

Is there a way to create a function in an Angular Ionic service that will always execute if a certain condition is true (based on API response), even when the app is not in the foreground? The function is responsible for calling capacitor geolocation watch ...

Using the spread operator in React to distribute JSX elements within a map function

I am struggling with mapping over an array within another array to create a Picker and am having difficulty returning JSX elements instead of an array of JSX elements. Here is the code example: {modelA.map((mA) => { const pickerItems = mA.modelB.m ...

Troubleshooting: Difficulty with Angular 2 TypeScript interface array functionality

Currently, I am developing an Angular 2 application where I aim to showcase messages by utilizing an interface and storing all the messages in an array. Below is a snippet of my TypeScript component that highlights this functionality: export class ChatCom ...

Angula 5 presents a glitch in its functionality where the on click events fail

I have successfully replicated a screenshot in HTML/CSS. You can view the screenshot here: https://i.stack.imgur.com/9ay9W.jpg To demonstrate the functionality of the screenshot, I created a fiddle. In this fiddle, clicking on the "items waiting" text wil ...

Understanding the mechanisms of Promise functionality within Typescript can be challenging, particularly when encountering error messages such as "type void is not

Recently, I've delved into the world of Typescript. Despite my efforts to stay true to the typing system, I've encountered a challenge that forces me to resort to using the any type: The issue arises with a function that returns a promise: sav ...

Tips on typing a collection that may hold numerous instances of a particular object

When working with NgRx actions, I need to define the parameter. This parameter is an object that can contain a varying number of specific objects. These objects are already defined in an Interface. export interface CustomDistribution { maxWindowsActive ...

What are the steps to resolve the issue of assigning void type to type ((event: MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined in a react application?

I'm trying to update the state isOpen to true or false when clicking on a div element, but I keep getting an error with the following code: function Parent() { const [isOpen, setIsOpen] = React.useState(false); return ( <Wrapper> ...

Using checkboxes to filter a list within a ReactiveForm can result in a rendering issue

I have implemented a dynamic form that contains both regular input fields and checkboxes organized in a list. There is also an input field provided to filter the checkbox list. Surprisingly, I found out that when using the dot (.) character in the search f ...

Supporting Angular 5 on a variety of web browsers including Chrome, Edge, Mozilla, Opera, and Safari

I'm in need of the minimum browser support requirements for Angular 5. I tried looking on the official Angular website, but all they provide is vague information like "the word latest" for Chrome, Mozilla, and Edge, with no mention of Opera or Safari. ...

My inquiry was met with silence from the Angular project

I have encountered an issue with my dockerized angular project. Upon starting my container, it appears that the 4200 port is already in use, even though the CMD command within the container does not initiate the application startup. Here is how my Docke ...

What is the best way to create a props interface that includes state and setState values that are being

As I dive deeper into TypeScript, a hurdle has appeared in my app. Upon introducing React.FunctionComponent to my components, an issue arose with my Props interface. The error message reads: Type '({ value, setValue, }: Props) => JSX.Element' ...