title: Oauth 2 popup with Angular 2
body: <p>I'm upgrading/rewriting an existing angular app to use angular2. My problem is that I want to open a OAuth flow in a new pop up window and once the OAuth flow is completed use window.postMessage to communicate back to the angular 2 app that the OAuth flow was successful.</p>
  
  <p>Currently what I have is in the angular 2 service is</p>
  
  <pre><code>export class ApiService { 
      constructor(private _loggedInService: LoggedInService) {
          window.addEventListener('message', this.onPostMessage, false);
       }
  
      startOAuthFlow() {
         var options = 'left=100,top=10,width=400,height=500';
         window.open('http://site/connect-auth', , options);
      }
  
      onPostMessage(event) {
        if(event.data.status === "200") {
            // Use an EventEmitter to notify the other components that user logged in
            this._loggedInService.Stream.emit(null);
        }
      }
  
  }
  </code></pre>
  
  <p>This template that is loaded at the end of the OAuth flow </p>
  
  <pre><code>&lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;OAuth callback&lt;/title&gt;
      &lt;script&gt;
        var POST_ORIGIN_URI = 'localhost:8000';
        var message = {"status": "200", "jwt":"2"};
        window.opener.postMessage(message, POST_ORIGIN_URI);
        window.close();
      &lt;/script&gt;
    &lt;/head&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Using <code>window.addEventListener</code> like this seems to completely break the angular 2 app, dereferencing <code>this</code>.</p>
  
  <p>So my question is can I use window.addEventListener or should I not use postMessage to communicate back to the angular2 app?</p>
  
  <p>** Complete angular2 noob so any help is appreciated </p>