Cannot refer to in class function from facebook sdk api function
<p>I am having a problem in calling/accessing a in-class function AND a service function from a function which calls a external js lib/code... But I am able to access class variable using the 'this' keyword in angular 2 component</p>

<p>FB &lt;- is the facebook sdk function to get the facebook communicated values of the logged user</p>

<p>Here's the code </p>

<pre><code>statusChangeCallback(resp: any) {
        if (resp.status === 'connected') {
            this.access_token = resp.authResponse.accessToken; // this variable gets the correct value in it

            FB.api('/me?fields=name,email', function (resp: any) {
                this.email = resp.email; // this variable gets the correct value in it

                if (this.email !== '' &amp;&amp; this.access_token !== '') {
                    console.log('under if statement');
                    var auth = {};
                    auth['accesstoken'] = this.access_token;
                    auth['emailid'] = this.email;

                    console.log(auth);

                    this.send_registeration(auth); // this function throws ERROR
                    // this.http.fb_register(this.email, this.access_token);
                }
            }, { scope: 'email,public_profile' });
        } else if (resp.status === 'not_authorized') {

        } else {

        }
    }
</code></pre>

<p>Here's Error Description shown in chrome</p>

<pre><code>zone.js:260 Uncaught TypeError: this.send_registeration is not a function
</code></pre>

<p>here's the full component code to checkout</p>

<pre><code>import {Component, OnInit, Output} from '@angular/core';
import {ROUTER_DIRECTIVES, Router} from '@angular/router-deprecated';
import { HttpService } from '../../Service/http.service';

declare const FB: any;

@Component({
    selector: 'facebook-login',
    template: `
    &lt;div&gt;
        &lt;button class="btn btn-facebook" (click)="onFacebookLoginClick()"&gt;
            &lt;i class="fa fa-facebook"&gt;&lt;/i&gt;Sign in with Facebook
        &lt;/button&gt;
    &lt;/div&gt;
    `,
    providers: [HttpService],
    directives: [ROUTER_DIRECTIVES]
})

export class FacebookLoginComponent implements OnInit {

    access_token: string = '';
    email: string = '';


    constructor(private http: HttpService) {
        FB.init({
            appId: '****APP ID **********',
            cookie: false,  // enable cookies to allow the server to access
            // the session
            xfbml: true,  // parse social plugins on this page
            version: 'v2.5' // use graph api version 2.5
        });
    }

    onFacebookLoginClick() {
        FB.login(this.statusChangeCallback);
    }

    statusChangeCallback(resp: any) {
        if (resp.status === 'connected') {
            this.access_token = resp.authResponse.accessToken;
            // var self = this;
            FB.api('/me?fields=name,email', (resp: any) =&gt; {
                this.email = resp.email;

                if (this.email !== '' &amp;&amp; this.access_token !== '') {

                    var auth = {};
                    auth['accesstoken'] = this.access_token;
                    auth['emailid'] = this.email;

                    console.log(auth);

                    this.send_registeration(auth); //throws Error
                    // this.http.fb_register(this.email, this.access_token); // this Service function also throws Error just the same way
                }
            }, { scope: 'email,public_profile' });

        } else if (resp.status === 'not_authorized') {

        } else {

        }
    }

    send_registeration(auth: any) {
        this.http.postRequest(auth, 'fbinvestors')
            .subscribe(
            data =&gt; {
                console.log('Server respond is ');
                console.log(data);
            }
            );
    }
}
</code></pre>

<p>Here's the updated function ... Facebook sdk callback doesnt seems to be earlier as stated earlier ... but the problem still exits </p>

<pre><code>statusChangeCallback(resp: any) {

        if (resp.status === 'connected') {
            this.access_token = resp.authResponse.accessToken;

        FB.api('/me?fields=name,email,first_name,last_name,age_range,gender,picture', (resp: any) =&gt; {
                this.email = resp.email;
        }, { scope: 'email,public_profile' });


        } 

        var self = this;
        setTimeout(function () {
            if (this.email !== '' &amp;&amp; this.access_token !== '') {
                console.log('under if statement');
                var auth = {};
                auth['accesstoken'] = this.access_token;
                auth['emailid'] = this.email;

                console.log(auth); // show variable output as required
// no problem till here

            }
            self.http.postRequest(auth, 'fbinvestors') // this line throws error as shown below
                .subscribe(
                data =&gt; {
                    console.log('Server respond is ');
                    console.log(data);
                }
                );

        }, 7000);
    }
</code></pre>

<p>the new Error is similiar to the old one ... but now its not calling the service method - Error shown is </p>

<pre><code>TypeError: Cannot read property 'postRequest' of undefined
</code></pre>

<p>UPDATE: on line self.http.postRequest(auth, 'fbinvestors') ... self is undefined basically ... so now I solve this problem if 
1. I can pass class scope ('this') as a parameter to this callback function
2. If I can provide a array of callback functions instead of just one callback function</p>

<p>Please help - I am trying this to get solved from 2 days now....</p>