Angular 2 and fullscreen API

Question

I've looked trough the docs and examples, yet found no way to listen for the "onfullscreenchange" event and/or it's variants ("onwebkitfullscreenchange" etc.) on the "document" element.

What i've tried without success:

/*method 1*/    
host: {
      '(document:onwebkitfullscreenchange)': 'fullScreen()'
    }
/*method 2*/
    @HostListener("document:onwebkitfullscreenchange", []) fullScreen() {}
/*method 3*/
    renderer.listenGlobal('document', 'onwebkitfullscreenchange', (event) => {})

All of the above work with the more common events such as onclick event.

If you've figured out a way to integrate the fullscreen API with Angular 2 or have other ideas or suggestions on how to go about or attempt this, i'd be very appreciative of your help.

Edit: If you could point me to a helpful resource, that might demistify (even partially) this, i would greatly appreciate it. Thank you!

ANSWER document:webkitfullscreenchange (and so forth for the other browsers)

Answer 1

There is no such thing as an onfullscreenchange event type. That's the event handler, so you could do (but probably shouldn't, as it's not really the "Angular way" of doing this):

document.onfullscreenchange = () => console.log('fullscreenchange event fired!');

But there is a fullscreenchange event, so this should work fine:

@HostListener("document:fullscreenchange", []) fullScreen() {}