Oauth 2 popup with Angular 2
<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>