What's the best way to invoke a component method from an asynchronous function?

Here is my code snippet:

export class TestComponent implements OnInit {

  constructor() { }

  ngOnInit() {
    FB.getLoginStatus(function (response) {
      this.ParseFacebookLoginStatus(response);
    });
  }

  ParseFacebookLoginStatus(response) {
    console.log(response.status);
  }

The error message in my console states: 

ERROR TypeError: this.ParseFacebookLoginStatus is not a function
.

It seems like the issue might be related to the asynchronous nature of getLoginStatus and the context of 'this' not referencing my TestComponent. How can I properly handle this callback and return to my TestComponent?

angulartypescript

Answer №1

To switch from using the keyword function, consider using arrow functions instead. For example:

FB.getLoginStatus((response)=>{

Another option is to save this in a variable before calling FB.getLoginStatus. This ensures that this refers to the component, not the new function.

ngOnInit() {
  let $this = this;
  FB.getLoginStatus(function (response) {
    $this.ParseFacebookLoginStatus(response);
  });
}

The issue at hand does not involve whether the function is async or sync, but rather the context of this.

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

What is the proper way to arrange dates within strings in Angular?

I'm currently facing an issue with sorting two strings. The strings in question are: "2022 | Dec (V2 2022)" "2022 | Jul (V1 2022)" Although I am attempting to sort them using localeCompare, it is not yielding the correct result. T ...

angulartypescript

After the component has been initialized for the second time, the elementId is found to be null

When working with a component that involves drawing a canvas chart, I encountered an issue. Upon initializing the component for the first time, everything works fine. However, if I navigate away from the component and return to it later, document.getElemen ...

javascriptangularcharts

Can TypeScript identify and eliminate any undefined values within an array effectively?

Is there a simple and efficient method to achieve the following: const x: (string|undefined)[] = ['aaa', undefined, 'ccc']; const y = _.filter(x, it => !!it); in order for TypeScript to correctly identify y as string[], without nee ...

typescript

Convert an array of objects into a singular object while preserving data types in TypeScript

I have an array filled with objects containing keys name and value. My goal is to merge these objects into a single object, where the keys correspond to the name property and the values correspond to the value property of the input objects. type Input = { ...

typescripttypescript-generics

When utilizing Immer with an Image, an error occurs stating: "Type 'Element' is not compatible with type 'WritableDraft<Element>'."

My goal is to store and retrieve cached images for future rendering on canvas using the drawImage method. To achieve this, I have created a type definition for the cache: type Cache = { image: Record<string, HTMLImageElement>, }; const initialCac ...

reactjstypescriptimmer.js

Issue with ADFS 2016 oAuth: Users not being redirected to login page post logout

Having an issue with ADFS 2016 and my Angular application using ng2-adal js for authentication and authorization. After users logout, they are not redirected back to the login page. Debug traces in Event Viewer show the following error: Error: OAuthSignou ...

angularoauth-2.0logoutadfs4.0

Trouble with using the date pipe in Angular specifically for the KHMER language

<span>{{ value | date: 'E, dd/MM/yyyy':undefined:languageCode }}</span> I am facing a challenge where I need to identify the specific locale code for the KHMER language used in Cambodia. Despite trying various cod ...

javascriptangulartypescriptlocalizationdate-pipe

I am facing difficulty in deploying my Next.js app with Firestore

Having trouble deploying my application using npm run build, Vercel, or another service. It works fine locally without showing any errors. I am using Firebase, Next.js, and TypeScript. The issue seems to be related to getStaticProps. When requesting data, ...

typescriptfirebasenext.jsfirebase-hosting

Tips for accurately defining prop types in next.js when utilizing typescript?

Here is the content of my index.tsx file: import type { NextPage } from "next"; type AppProps = { articles: { userId: number; id: number; title: string; body: string; }; }; con ...

typescriptnext.js

Using Angular to dynamically modify the names of class members

I am working with an Angular typescript file and I have a constant defined as follows: const baseMaps = { Map: "test 1", Satellite: "test 2" }; Now, I want to set the member names "Map" and "Satellite" dynam ...

angulartypescript

What is the method for retrieving the second type of property from an array of objects?

I have a collection of objects that map other objects with unique identifiers (id) and names (name). My goal is to retrieve the name corresponding to a specific id. Here is my initial approach: const obj = { foo: { id: 1, name: 'one' }, ...

typescripttypestypescript-generics

Lazy loading implemented with BootstrapVue's b-nav component

Having some trouble wrapping my head around the following issue: I've created a Vue.js component with tabs that have routes. I opted for a variation of the b-nav Tabs style (official docs) and it's functioning well in terms of tabs and routing. ...

typescriptvue.jstabslazy-loadingbootstrap-vue

What is causing the Typescript compiler to interpret an element in a string array as the type 'never'?

My Typescript function compiled without issue in version 3.5.3, but after updating to 3.8.3, it now throws a confusing error during compilation. import { isNumber, toInteger, padNumber } from './math'; parse(value: string): NgbDateStruct { if ...

typescript

Inform the Angular2 Component regarding the creation of DOM elements that are placed outside of the

The Challenge In my Angular2 project, I am using Swiper carousel and building it with Webpack. However, Angular2 adds random attributes like _ngcontent-pmm-6 to all elements in a component. Swiper generates pagination elements dynamically, outside of Ang ...

angulartypescriptangular2-templateangular2-directives

FIREBASE_AUTHCHECK_DEBUG: Error - 'self' is undefined in the debug reference

I'm encountering an issue while trying to implement Firebase Appcheck in my Next.js Typescript project. firebase.ts const fbapp = initializeApp(firebaseConfig); if (process.env.NODE_ENV === "development") { // @ts-ignore self.FIREBASE_ ...

typescriptfirebasenext.jsfirebase-app-check

Issue with Angular5: Spinner malfunctioning during initialization of the page

My service emits two events dataLoaded and loadingData. I want to display a GIF image when data is loading and hide it when data is loaded. In the component, I handle both events and update a Boolean variable accordingly. However, on the initial page load, ...

htmlangulartypescriptservicecomponents

To toggle the state of an md-checkbox in Angular 2 (or 4) by referencing its unique identifier

<md-checkbox [align]="end" *ngFor="issueConfid in issueConfidences" (change)=onIssueConfidenceFilterChange(issueConfid)" id="favoriteCheck1.name"> {{issueConfid.name}} </md-checkbox> Is there a way to programmatically uncheck or check the ...

angularmaterial-design

Showing key-value pairs from an array of objects using Angular TypeScript

Within my angular application, I am fetching a dynamic list of objects from an API. A sample of the data structure is as follows: [ { "_id": "some id", "DATE": "2021/01/08", "COUNT&qu ...

javascriptangulartypescript

Is `TypeDefinition for React v15.0` compatible with React v0.14.7?

Within the project I am currently working on, we have incorporated React v0.14.7. After using npm, I executed the following command: npm install --save <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ccbea9adafb88cfce2fdf8e2fb ...

reactjstypescriptnpmtypescript-typings

Is it possible to dynamically close the parent modal based on input from the child component?

As I follow a tutorial, I am working on importing the stripe function from two js files. The goal is to display my stripe payment in a modal. However, I am unsure how to close the modal once I receive a successful payment message in the child. Below are s ...

javascriptreactjstypescript