I want to detect if the fullsceen mode is enabled by using the HTML5 fullscreen API. I'm using Chrome and Angular 4.x.

I've created an Angular ponent and added following @HostListener:

@HostListener('document:webkitfullscreenchange', [$event])
FSHandler(event: KeyboardEvent) {
  console.log('fullscreen mode changed...');
}

I want to detect if the fullsceen mode is enabled by using the HTML5 fullscreen API. I'm using Chrome and Angular 4.x.

I've created an Angular ponent and added following @HostListener:

@HostListener('document:webkitfullscreenchange', [$event])
FSHandler(event: KeyboardEvent) {
  console.log('fullscreen mode changed...');
}

This doesn't work for some reason. I've tried removing the browser prefix, capturing other events like webkitFullscreenEnabled, but all of that didn't help.

Any suggestions? Thanks.

• javascript
• angularjs
• html
• fullscreen
• addeventlistener

• Looks like that should work. I have something similar that's functional. Possibly you need to import HostListener still? I would expect TypeScript to have yelled at you already, though. – jmq Commented Nov 17, 2017 at 19:08

2 Answers 2

You need to handle the fullscreenchange event for Browser/browserkit that the app will be on, and from most guides I've seen, there's four of them. This is how I've done it (I'm an Angular novice, so there may be a nicer / cleaner way),

@HostListener('fullscreenchange', ['$event'])
@HostListener('webkitfullscreenchange', ['$event'])
@HostListener('mozfullscreenchange', ['$event'])
@HostListener('MSFullscreenChange', ['$event'])
screenChange(event) {
  console.log(event);
}

And that detects the change in every browser I've tried (Desktop ones on OSX, and mobile ones on Android).

I was able to do it in pure javascript

this.document.addEventListener('webkitfullscreenchange', () => {
  console.log('fullscreen mode changed...');
})

You could also do something like

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

Although do not forget in that last example that if you get multiple objects where you have this line, document is a singleton. So be aware. I personally at a function where I modified a variable inside, but multiple instance of the object containing that callback existed, so the same document got overwritten.

But then if you want to do it the Angular way. You got the proper approach. I do have the same code as but my event is of type 'any'. I don't think the event is of type KeyboardEvent. That might be your problem.