Angular 2 window.postmessage

Question

I\'m working on an eCommerce application in Angular 2 with a node and express api backend. I\'m currently working on the social login section where I am using passport-faceb

Answer 1

Combining @PierreDuc's .bind(this) technique and @Mikeumus's comment:

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

@Component({
  selector: 'my-component',
  templateUrl: './my_component.ng.html',
})
export class MyComponent implements OnDestroy {
  stopListening: Function;

  constructor(private renderer: Renderer2) {
    this.stopListening =
        renderer.listen('window', 'message', this.handleMessage.bind(this));
  }

  handleMessage(event: Event) {
    const message = event as MessageEvent;

    // Only trust messages from the below origin.
    if (message.origin !== 'http://example.com:8080') return;

    console.log(message.data);
  }

  ngOnDestroy() {
    this.stopListening();
  }
}

You can still directly do this if you prefer:

this.stopListening =
    renderer.listen('window', 'message', (even: Event) => { ... });

You can test it by commenting out the origin check and writing this in the developer JavaScript console:

window.postMessage("test message data", "http://localhost:8080")

Update the 2nd arg to be the URL of the page you are currently on. This command makes the page think it received a message from itself.