Angular 2 and fullscreen API

angular fullscreen
ios safari fullscreen javascript
html5 video fullscreen javascript
javascript request fullscreen
browser full screen
javascript exit fullscreen event
fullscreen api github
angular fullscreen npm

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)

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() {}

screenfull, Simple wrapper for cross-browser usage of the JavaScript Fullscreen API, which lets you bring the page or any element into fullscreen. You can use the Angular​.js binding to do something like: <div ngsf-fullscreen>. <p>This  angular-bigscreen. AngularBigScreen is an Angular service to quickly use the HTML5 fullscreen API.. Install. Install angular-bigscreen node module through npm:

Here is an sample for check fullscreen or exit fullscreen use a boolean variable.

 @HostListener('document:fullscreenchange', ['$event'])
 @HostListener('document:webkitfullscreenchange', ['$event'])
 @HostListener('document:mozfullscreenchange', ['$event'])
 @HostListener('document:MSFullscreenChange', ['$event'])
  fullscreenmode(){

    if(this.toggleClass == 'ft-minimize'){
      this.toggleClass = 'ft-maximize';
    }
    else{
      this.toggleClass = 'ft-minimize';
    }
    console.log(this.toggleClass)
  }

Demo: https://stackblitz.com/edit/fullscreen-closefullscreen-check?file=src%2Fapp%2Fapp.component.ts

Fullscreen API, The Fullscreen API adds methods to present a specific Element (and its descendants) in full-screen mode, and to exit full-screen mode once it  Angular is a platform for building mobile and desktop web applications. Join the community of millions of developers who build compelling user interfaces with Angular.

@HostListener('document:fullscreenchange')
@HostListener('document:webkitfullscreenchange')
@HostListener('document:mozfullscreenchange')
@HostListener('document:MSFullscreenChange')
onScreenModeСhange() {
    //Do stuff
}

Element.requestFullscreen(), The Element.requestFullscreen() method issues an asynchronous request to make the element be displayed in full-screen mode. Angular screenfull is a wrapper around the Screenfull library, that allows you to use the HTML5 fullscreen API, in "the Angular way". You can see the API documentation with some demo examples.

Going Fullscreen with Angular Directives, HTML5 introduced an API for making elements full screen. In this post, I walk through one strategy for incorporating that nicely into Angular directives! the fullscreen state and 2) react when the fullscreen state changes. Angular2 full-screen menu/navigation. GitHub Gist: instantly share code, notes, and snippets.

full screen in angular 2 : Angular2, Hi folks, this is my first post on reddit. Ng-Matero is an open source of Angular Material dashboard. It has been released for nearly a year, and the project has  Fullscreen an element with Angular.js You can use the Angular.js binding to do something like: < div ngsf-fullscreen > < p >This is a fullscreen element</ p > < button ngsf-toggle-fullscreen >Toggle fullscreen</ button > </ div >

screenfull: Docs, Tutorials, Alternatives, Simple wrapper for cross-browser usage of the JavaScript Fullscreen API, which lets you bring the You can use the Angular.js binding to do something like: AngularJS HTML5 Fullscreen. An AngularJS service and a directive to quickly use the HTML5 fullscreen API and set the fullscreen to the document or to a specific element.

Comments
  • The "onfullscreenchange" is the standard, but if you look at the documentation for the API developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API you'll see that each browser implements a different eventhandler, not the standard, unless, i'm reading that wrong. That aside, i've just tested your suggestion it does not work. Perhaps i am missing something but i can't figure it out.
  • So it's actually browser prefixed -> for chrome document:webkitfullscreenchange. But it works. For some reason however, the event is not triggered if you fullscreen with the F11, default keybinding. You have trigger it manually, on F11/ESC via listeners on their respective keycodes.