Accessing a variable from inside FB.getLoginStatus when using Facebook Javascript SDK in Angular 2

Question

I am using the facebook login functionality of the Facebook Javascript SDK inside my Angular 2 application. I am doing this to return a profile picture of the logged in user.

I have got it working to an extent however I am trying to save the picture into a variable so that it can be used in different components as the user browses between components/pages. The problem is I can't seem to access my picture variable from within FB.getLoginStatus. Here is the code I have:-

import { Component, OnInit } from '@angular/core';

declare const FB: any;

@Component({
  selector: 'app-my-page',
  templateUrl: './my-page.component.html',
  styleUrls: ['./my-page.component.css']
})
export class MyPageComponent implements OnInit {

  picture:any;

  constructor() { }

  ngOnInit() {}

  facebookLogin(){

        FB.getLoginStatus(function(response) {
          if (response.status === 'connected') {
                FB.api(
                    "/12345678901234567/picture?type=large",
                    function (response) {
                      if (response && !response.error) {
                        this.picture = response;
                      }
                    }
                );
          }
          else {
            FB.login();
          }
        });
  }

}

In the above the picture variable will be bound as the source of an image on the site. Any help is greatly appreciated.

Answer 1

Modify the facebookLogin function definition like below:

facebookLogin(){

    FB.getLoginStatus(function(response) {
      if (response.status === 'connected') {
            FB.api(
                "/12345678901234567/picture?type=large",
                response => {
                  if (response && !response.error) {
                    this.picture = response;
                  }
                }
            );
      }
      else {
        FB.login();
      }
    }); }

I have faced this issue manny time writing callback functions in angular2. Instead I use lambda exppression and then I can access the variables. Do share if it works!