How to properly attach an Event Listener to global 'window' in Angular 6+? [duplicate]

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}

This question already has an answer here:

Angular window resize event

12 answers

Background

Our Angular 6 application contains an iframe with some 3rd party data. To enable a safe cross-domain communication the child iframe posts messages to parent Angular application using window.postMessage() API. In order to receive those messages parent window must attach an event listener like window.addEventListener("message", callback) to listen for MessageEvents

Question

I need to listen for message events inside Angular component and it's not obvious for me how to properly access global window in Angular way. The only solution I imagine at the moment is:

Create an Angular Service called MessageListenerService with the following method:

function listenForMessageEvent(callback) { this.renderer.listen('window', 'message', callback); }

Note: this.renderer here is Renderer2 from Angular core.

Just use MessageListenerService.listenForMessageEvent() in my custom component.

I feel like it's not the standard approach in Angular world. Could someone advise any best practise here?

Thanks a lot.

asked Nov 23 '18 at 15:41

Alexander

marked as duplicate by ConnorsFan, Community♦ Nov 26 '18 at 7:43

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

add a comment |

This question already has an answer here:

Angular window resize event

12 answers

Background

Question

I need to listen for message events inside Angular component and it's not obvious for me how to properly access global window in Angular way. The only solution I imagine at the moment is:

Create an Angular Service called MessageListenerService with the following method:

function listenForMessageEvent(callback) { this.renderer.listen('window', 'message', callback); }

Note: this.renderer here is Renderer2 from Angular core.

Just use MessageListenerService.listenForMessageEvent() in my custom component.

I feel like it's not the standard approach in Angular world. Could someone advise any best practise here?

Thanks a lot.

asked Nov 23 '18 at 15:41

Alexander

marked as duplicate by ConnorsFan, Community♦ Nov 26 '18 at 7:43

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

add a comment |

This question already has an answer here:

Angular window resize event

12 answers

Background

Question

I need to listen for message events inside Angular component and it's not obvious for me how to properly access global window in Angular way. The only solution I imagine at the moment is:

Create an Angular Service called MessageListenerService with the following method:

function listenForMessageEvent(callback) { this.renderer.listen('window', 'message', callback); }

Note: this.renderer here is Renderer2 from Angular core.

Just use MessageListenerService.listenForMessageEvent() in my custom component.

I feel like it's not the standard approach in Angular world. Could someone advise any best practise here?

Thanks a lot.

asked Nov 23 '18 at 15:41

Alexander

This question already has an answer here:

Angular window resize event

12 answers

Background

Question

I need to listen for message events inside Angular component and it's not obvious for me how to properly access global window in Angular way. The only solution I imagine at the moment is:

Create an Angular Service called MessageListenerService with the following method:

function listenForMessageEvent(callback) { this.renderer.listen('window', 'message', callback); }

Note: this.renderer here is Renderer2 from Angular core.

Just use MessageListenerService.listenForMessageEvent() in my custom component.

I feel like it's not the standard approach in Angular world. Could someone advise any best practise here?

Thanks a lot.

This question already has an answer here:

Angular window resize event

12 answers

javascript angular dom iframe postmessage

asked Nov 23 '18 at 15:41

Alexander

asked Nov 23 '18 at 15:41

Alexander

asked Nov 23 '18 at 15:41

Alexander

asked Nov 23 '18 at 15:41

Alexander

asked Nov 23 '18 at 15:41

Alexander

marked as duplicate by ConnorsFan, Community♦ Nov 26 '18 at 7:43

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

marked as duplicate by ConnorsFan, Community♦ Nov 26 '18 at 7:43

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

add a comment |

1 Answer
1

active

oldest

votes

The "Angular" way of doing this is to use HostListener

https://angular.io/api/core/HostListener

Here is a stackblitz example for your review. Open console and review the log when using keys on the keyboard to trigger events.

https://stackblitz.com/edit/hostlistener-1

edited Nov 26 '18 at 13:09

answered Nov 23 '18 at 16:29

Marshal

3,8372622

Thank you, looks like a correct solution

– Alexander
Nov 26 '18 at 7:44

No problem, please be sure to mark it as an accepted answer.

– Marshal
Nov 26 '18 at 13:08

add a comment |

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

The "Angular" way of doing this is to use HostListener

https://angular.io/api/core/HostListener

Here is a stackblitz example for your review. Open console and review the log when using keys on the keyboard to trigger events.

https://stackblitz.com/edit/hostlistener-1

edited Nov 26 '18 at 13:09

answered Nov 23 '18 at 16:29

Marshal

3,8372622

Thank you, looks like a correct solution

– Alexander
Nov 26 '18 at 7:44

No problem, please be sure to mark it as an accepted answer.

– Marshal
Nov 26 '18 at 13:08

add a comment |

The "Angular" way of doing this is to use HostListener

https://angular.io/api/core/HostListener

Here is a stackblitz example for your review. Open console and review the log when using keys on the keyboard to trigger events.

https://stackblitz.com/edit/hostlistener-1

edited Nov 26 '18 at 13:09

answered Nov 23 '18 at 16:29

Marshal

3,8372622

Thank you, looks like a correct solution

– Alexander
Nov 26 '18 at 7:44

No problem, please be sure to mark it as an accepted answer.

– Marshal
Nov 26 '18 at 13:08

add a comment |

The "Angular" way of doing this is to use HostListener

https://angular.io/api/core/HostListener

Here is a stackblitz example for your review. Open console and review the log when using keys on the keyboard to trigger events.

https://stackblitz.com/edit/hostlistener-1

edited Nov 26 '18 at 13:09

answered Nov 23 '18 at 16:29

Marshal

3,8372622

The "Angular" way of doing this is to use HostListener

https://angular.io/api/core/HostListener

Here is a stackblitz example for your review. Open console and review the log when using keys on the keyboard to trigger events.

https://stackblitz.com/edit/hostlistener-1

edited Nov 26 '18 at 13:09

answered Nov 23 '18 at 16:29

Marshal

3,8372622

edited Nov 26 '18 at 13:09

answered Nov 23 '18 at 16:29

Marshal

3,8372622

answered Nov 23 '18 at 16:29

Marshal

3,8372622

answered Nov 23 '18 at 16:29

Marshal

3,8372622

Thank you, looks like a correct solution

– Alexander
Nov 26 '18 at 7:44

No problem, please be sure to mark it as an accepted answer.

– Marshal
Nov 26 '18 at 13:08

add a comment |

Thank you, looks like a correct solution

– Alexander
Nov 26 '18 at 7:44

No problem, please be sure to mark it as an accepted answer.

– Marshal
Nov 26 '18 at 13:08

Thank you, looks like a correct solution

– Alexander
Nov 26 '18 at 7:44

No problem, please be sure to mark it as an accepted answer.

– Marshal
Nov 26 '18 at 13:08

add a comment |

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Wsrtjtyk