title: Angular 2 Facebook Login
body: <p>I am developing an website that needs to be logged in with Facebook account. I am using Angular 2 and, of course, TypeScript. It works But not exactly what I wanted. I can't take back the user's information.</p>
  
  <p>Let's go to the code:</p>
  
  <pre><code>import {Component} from 'angular2/core';
  import {Main} from './pages/main/main';
  
  declare const FB: any;
  
  @Component({
    selector: 'my-app',
    templateUrl: 'app/app.html',
    directives: [Main]
  })
  
  export class AppComponent implements OnInit { 
  
  token: any;
  loged: boolean = false;
  user = { name: 'Hello' };
  
  constructor() { }
  
  statusChangeCallback(response: any) {
      if (response.status === 'connected') {
          console.log('connected');
      } else {
          this.login();
      }
  }
  
  login() {
      FB.login(function(result) {
          this.loged = true;
          this.token = result;
      }, { scope: 'user_friends' });
  }
  
  me() {
      FB.api('/me?fields=id,name,first_name,gender,picture.width(150).height(150),age_range,friends',
          function(result) {
              if (result &amp;&amp; !result.error) {
                  this.user = result;
                  console.log(this.user);
              } else {
                  console.log(result.error);
              }
          });
  }
  
  ngOnInit() {
      FB.getLoginStatus(response =&gt; {
          this.statusChangeCallback(response);
      });
  }
  }
  </code></pre>
  
  <p>Basically, When the page loads I check if the user is logged in to Facebook, if not, I call the login method. The <em>me</em> method is used to fetch the users information, like its name, first name etc. When I logged in condition browser console print the following line:</p>
  
  <pre><code>Object {id: "666", name: "Paulo Henrique Tokarski Glinski", first_name: "Paulo", gender: "male", picture: Object…}
  </code></pre>
  
  <p>Everything ok! But I want to get that Object and put into a User object! Something like that:</p>
  
  <p><strong><em>me method</em></strong>:</p>
  
  <pre><code>this.user = result;    
  console.log(this.user);
  </code></pre>
  
  <p>But the user just exists inside the method. If I print it outside, its returns nothing.<br>
  I just want to print the users name etc. at the website page. I did almost the same thing with Angular JS and worked well.</p>
  
  <p>Please! Help me!</p>