call angular component method from external window

Question

I'm working on twitter login in my ASP .NET web application using Angular 2. I want to pass data from the pop-up window to the component .I have used the method mentioned in this link. But the callback to the component is not working.

Below is the code that loads in the external login window

window.dispatchEvent(new Event('socialSuccess'));

and in the component from which the pop-up window is invoked i have written the callback

 @HostListener('window:socialSuccess', ['$event'])

  onSocialSuccess(event) {
    alert("here");
    this.PopUpCallback(event)

  }

The onSocialSuccess method is not getting called.

Please guide

Thanks

score 1 · Accepted Answer · answered Mar 14 '18 at 08:59

What you are trying would not work, as you mentioned in your question that you are using twitter login API which opens a pop-up window to login.

The reason is, there are two windows, so you are having two different objects of window.

One is the main window (maybe your app window) and another one is the pop-up window.

Solution :

Let say you want to pass data from pop-up window to main window, so in your pop-up window, you should use the above method you tried already but with a caution that you use window.opener.disp...

The only difference this makes is, window.opener is the parent window which initiated the pop-up.

Note: window.opener might not work in IE, so you can refer this post for IE Browser.

Hope it helps :)

call angular component method from external window

1 Answers1