CODEWITHSUNDEEP
angulargoogle-chromeevent-handlingfullscreenchange
Yashwardhan Pauranik
Yashwardhan Pauranik

Reputation: 5556

Restrict user to exit the fullscreen mode in Angular 8

I'm using Angular v8 for my application. My problem is I want to restrict the user from exiting the fullscreen mode. I have looked various solution on Stack Overflow and found one. Below is my code where I have tried to implement this:

 ngOnInit() {
   this.attachEventListeners();
 }

 attachEventListeners() {
    document.addEventListener('fullscreenchange', this.onFullScreenChange(), false);
    document.addEventListener('webkitfullscreenchange', this.onFullScreenChange(), false);
    document.addEventListener('mozfullscreenchange', this.onFullScreenChange(), false);    
  }

  onFullScreenChange() {
    const fullscreenElement = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement;

    console.log(fullscreenElement);
    // if in fullscreen mode fullscreenElement won't be null
  }

But this code is throwing an error:

ExamComponent_Host.ngfactory.js? [sm]:1 ERROR TypeError: Cannot read property 'instance' of undefined
    at nodeValue (core.js:27236)
    at Object.eval [as handleEvent] (ExamComponent_Host.ngfactory.js? [sm]:1)
    at handleEvent (core.js:38098)
    at callWithDebugContext (core.js:39716)
    at Object.debugHandleEvent [as handleEvent] (core.js:39352)
    at dispatchEvent (core.js:25818)
    at core.js:37030
    at platform-browser.js:1789
    at ZoneDelegate.invokeTask (zone-evergreen.js:391)
    at Object.onInvokeTask (core.js:34182)

I don't know if there is something using @HostListener for angular is there for handling this. Please help.

Upvotes: 2

Views: 991

Answers (1)

e.k
e.k

Reputation: 66

I see that this question is a bit old, but probably it will be helpful for someone else — previously I faced with the same question and found following solution with @HostListener:

  @HostListener("document:fullscreenchange", []) 
  fullScreen() {
    if (document.fullscreenElement) {
        console.log(`Entered full-screen mode.`);
    } else {
        console.log('Leaving full-screen mode.');
    }
  }

from this answer: https://stackoverflow.com/a/42282972/1362723.

Upvotes: 1

Related Questions