Facebook API Question posted in
The official documentation for the Facebook APIs can be found here.

Angular 2 value is not updating in html – Facebook api

I am working on an application where facebook login is required. Here is my ts file

 ngOnInit() {
    setTimeout(() => {
      this.initialize();
    })
  }

  initialize() {
    (function (d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      js.src = "//connect.facebook.net/en_US/sdk.js";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));


    setTimeout(() => {
      window.fbAsyncInit =  () =>{
        FB.init({
          appId: 'your-app-id', //I gave my app id here
          cookie: true,  // enable cookies to allow the server to access 
          // the session
          xfbml: true,  // parse social plugins on this page
          version: 'v2.8' // use graph api version 2.8
        });
        this.checkFBLoginStatus();
      }
    })

  }

  checkFBLoginStatus() {
    FB.getLoginStatus((response) =>{
      this.verifyResponse(response);
    });
  }


 verifyResponse(response){
    this.response = response;

   console.log(this.response) // I am getting the console output
 }

Here is my HTML

<!--For Testing purpose-->
Response is->
<p *ngIf="response">{{response.status}}</p>
<!--For Testing purpose-->

<button *ngIf="response && response.status && response.status == 'unknown'" class="btn blue fb-login-button" (click)="loginUsingFacebook()"><span class="fa fa-facebook white-text"></span>Login Using Facebook</button>

<button *ngIf="response && response.status && response.status == 'not_authorized'" class="btn blue fb-login-button" (click)="continueUsingFacebook()"><span class="fa fa-facebook white-text"></span>Continue Using Facebook</button>

<button *ngIf="response && response.status && response.status == 'connected'" class="btn blue fb-login-button" (click)="logoutFacebook()"><span class="fa fa-facebook white-text"></span>Logout Facebook</button>

The response.status is showing in console. But its not getting binded to html. And so i am not able to see the respective buttons.

I am trying to detect whether the user is logged in or if not, what is the best way i can capture the onlogin function of javascript (facebook attr) in typescript.

Thanks

Tags:

2

Answers


  1. 0

    This is because the return event from the fbAsyncInit method is not recognized by the zone.js monkey patched event listeners. In other words, you are working outside the angular zone.

    You should inject NgZone in your component, and reenter it using run:

    constructor(private _ngZone: NgZone){}

ngOnInit() {
   this.initialize();
}

initialize() {
   window.fbAsyncInit =  () => {
     this._ngZone.run(() => {
       FB.init({
           ...
       });
       this.checkFBLoginStatus();
     });
   }
}
    Login or Signup to reply.
  2. 0

    Here you will have to manually refresh model data. And for that you can use NgZone

    In below way

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

constructor() {
   this.zone = new NgZone({enableLongStackTrace: false});
}


 verifyResponse(response){
    this.zone.run(() => { 
      this.response = response;
    });

   console.log(this.response) // I am getting the console output
 }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search