How to make google chrome go full screen in Angular 4 Application?

Question

I am developing an application where I want to implement such a thing where if user leaves from one component & enters other component, then in other component's ngOnInit method chrome browser should go full screen same as when we press Fn + F11 Key.

Any help or references are appreciated.

Possible duplicate of [How can we programmatically enter and exit the fullscreen mode in javascript?](https://stackoverflow.com/questions/25110166/how-can-we-programmatically-enter-and-exit-the-fullscreen-mode-in-javascript) — Adrian Fâciu, Aug 24 '18 at 06:49
Also, Possible duplicate of https://stackoverflow.com/questions/23913111/firefox-browser-rejected-fullscreen-change — IgnoranceIsBliss, Jan 18 '23 at 08:44

score 39 · Answer 1 · answered Aug 24 '18 at 06:43

How To - Fullscreen - https://www.w3schools.com/howto/howto_js_fullscreen.asp

This is the current "angular way" to do it.

HTML

<h2 (click)="openFullscreen()">open</h2>
<h2 (click)="closeFullscreen()">close</h2>

Component

import { DOCUMENT } from '@angular/common';
import { Component, Inject, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  constructor(@Inject(DOCUMENT) private document: any) {}
  elem;

  ngOnInit() {
    this.elem = document.documentElement;
  }

  openFullscreen() {
    if (this.elem.requestFullscreen) {
      this.elem.requestFullscreen();
    } else if (this.elem.mozRequestFullScreen) {
      /* Firefox */
      this.elem.mozRequestFullScreen();
    } else if (this.elem.webkitRequestFullscreen) {
      /* Chrome, Safari and Opera */
      this.elem.webkitRequestFullscreen();
    } else if (this.elem.msRequestFullscreen) {
      /* IE/Edge */
      this.elem.msRequestFullscreen();
    }
  }

  /* Close fullscreen */
  closeFullscreen() {
    if (this.document.exitFullscreen) {
      this.document.exitFullscreen();
    } else if (this.document.mozCancelFullScreen) {
      /* Firefox */
      this.document.mozCancelFullScreen();
    } else if (this.document.webkitExitFullscreen) {
      /* Chrome, Safari and Opera */
      this.document.webkitExitFullscreen();
    } else if (this.document.msExitFullscreen) {
      /* IE/Edge */
      this.document.msExitFullscreen();
    }
  }
}

"current way" is 2018 - this is 2022: https://stackoverflow.com/a/71572615/1461862 — Mauricio Gracia Gutierrez, Mar 22 '22 at 13:56

Krishna Rathore · Accepted Answer · 2018-08-24T06:47:44.930

7

You can try with requestFullscreen

I have create a demo on Stackblitz

fullScreen() {
    let elem = document.documentElement;
    let methodToBeInvoked = elem.requestFullscreen ||
      elem.webkitRequestFullScreen || elem['mozRequestFullscreen']
      ||
      elem['msRequestFullscreen'];
    if (methodToBeInvoked) methodToBeInvoked.call(elem);
}

edited Aug 24 '18 at 06:47

answered Aug 24 '18 at 06:33

Krishna Rathore

9,389
5
24
48

Tried Brother It gives me this error -> Property 'mozRequestFullScreen' does not exist on type 'HTMLElement – Jignesh Mistry Aug 24 '18 at 06:35
Sure I want when i go from one component to other component it should automatically trigger – Jignesh Mistry Aug 24 '18 at 06:36
Brother this works fine but user needs to press i want to do automatically so i just called your function directly from ngOnInit now it is show this error -> Failed to execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture. – Jignesh Mistry Aug 24 '18 at 06:54
1

You can't force a website to display in fullscreen mode. Imagine the security concerns if that were possible. Malicious websites could "Hijack" a less computer literate person's desktop for all kinds of dubious business. All of JS fullscreen api's will throw a error like this: "Failed to execute 'requestFullScreen' on 'Element': API can only be initiated by a user gesture." If you try to simply call it from your code. – Krishna Rathore Aug 24 '18 at 06:58
@KrishnaRathore I tried to put the script in ngOnInit. It didn't work. Can you please help me... Thanks in advance... – SK. Nov 28 '18 at 17:06
document.exitFullscreen in order to exit fullscreen? – Ashwin Mar 07 '19 at 13:06

Mauricio Gracia Gutierrez · Answer 3 · 2022-04-20T14:05:01.107

6

Most of the answer above are from 2018, nowdays to achieve compatibility in Chrome, Firefox, other browsers and mobile, I have determined that using requestFullScreen is enough

https://developer.mozilla.org/en-US/docs/Web/API/Element/requestFullScreen

Here is an example on to be able to toggle between full screen and normal screen:

docElement: HTMLElement;
isFullScreen: boolean = false;

ngOnInit(): void {
    this.docElement = document.documentElement;
}

toggleFullScreen() {
    if (!this.isFullScreen) {
      this.docElement.requestFullscreen();
    }
    else {
      document.exitFullscreen();
    }
    this.isFullScreen = !this.isFullScreen;
}

The request to change to fullscreen can only be made when a user interacts with an element, for example a button

<button (click)="toggleFullScreen()">SWITCH SCREEN MODE</button>

edited Apr 20 '22 at 14:05

answered Mar 22 '22 at 13:08

Mauricio Gracia Gutierrez

10,288
6
68
99

1

This approach will cause problems for cases where you enter or exit fullscreen mode without using the button, such as using *F11*, for example. – Edu Müller Jun 24 '22 at 18:18
and for you which other answer is better or what is missing from mine ? – Mauricio Gracia Gutierrez Jun 24 '22 at 19:37
Use the `fullscreenElement` attribute of the *document* (https://developer.mozilla.org/en-US/docs/Web/API/Document/fullscreenElement). – Edu Müller Jun 24 '22 at 19:48
Well my code does not aim to detect if the currrent scrreen is in fullscreen mode, is actually outside the scope of the question, but is important to keep that in mind. – Mauricio Gracia Gutierrez Jun 24 '22 at 19:53

score 4 · Answer 4 · answered Aug 24 '18 at 06:43

put the following code on the top of the component (before @Component) you want to trigger:

    interface FsDocument extends HTMLDocument {
      mozFullScreenElement?: Element;
      msFullscreenElement?: Element;
      msExitFullscreen?: () => void;
      mozCancelFullScreen?: () => void;
    }

    export function isFullScreen(): boolean {
      const fsDoc = <FsDocument> document;

      return !!(fsDoc.fullscreenElement || fsDoc.mozFullScreenElement || fsDoc.webkitFullscreenElement || fsDoc.msFullscreenElement);
    }

    interface FsDocumentElement extends HTMLElement {
      msRequestFullscreen?: () => void;
      mozRequestFullScreen?: () => void;
    }

    export function toggleFullScreen(): void {
      const fsDoc = <FsDocument> document;

      if (!isFullScreen()) {
        const fsDocElem = <FsDocumentElement> document.documentElement;

        if (fsDocElem.requestFullscreen)
          fsDocElem.requestFullscreen();
        else if (fsDocElem.msRequestFullscreen)
          fsDocElem.msRequestFullscreen();
        else if (fsDocElem.mozRequestFullScreen)
          fsDocElem.mozRequestFullScreen();
        else if (fsDocElem.webkitRequestFullscreen)
          fsDocElem.webkitRequestFullscreen();
      }
      else if (fsDoc.exitFullscreen)
        fsDoc.exitFullscreen();
      else if (fsDoc.msExitFullscreen)
        fsDoc.msExitFullscreen();
      else if (fsDoc.mozCancelFullScreen)
        fsDoc.mozCancelFullScreen();
      else if (fsDoc.webkitExitFullscreen)
        fsDoc.webkitExitFullscreen();
    }

    export function setFullScreen(full: boolean): void {
      if (full !== isFullScreen())
        toggleFullScreen();
    }

and on the ngOnInit method make a call to the setFullScreen(full: boolean) function:

ngOnInit(): void {
    setFullScreen(true);
}

Throws error-> core.js:1598 ERROR Error: Uncaught (in promise): Error: Unexpected value 'DashboardDefaultComponent' declared by the module 'DashboardDefaultModule'. Please add a @Pipe/@Directive/@Component annotation. — Jignesh Mistry, Aug 24 '18 at 06:50
I was using this but in angular 7.0.0 this stopped working it will throw an error now. — Swoox, Nov 13 '18 at 07:39

score 0 · Answer 5 · answered Mar 14 '21 at 10:09

This is the current "angular way" to do it.

HTML: Use This in Html:

(click)="openFullscreen()

NgOninit:

this.elem = document.documentElement;

TS: Put this Function it will work...

 openFullscreen() {
if (this.elem.requestFullscreen) {
  this.elem.requestFullscreen();
} else if (this.elem.mozRequestFullScreen) {
  /* Firefox */
  this.elem.mozRequestFullScreen();
} else if (this.elem.webkitRequestFullscreen) {
  /* Chrome, Safari and Opera */
  this.elem.webkitRequestFullscreen();
} else if (this.elem.msRequestFullscreen) {
  /* IE/Edge */
  this.elem.msRequestFullscreen();
}`]`

}

score 0 · Answer 6 · answered Feb 15 '23 at 07:10

You need to use the Full Screen API, which is provided by almost all browsers. You can read about it here.

In short, to display an Element in full-screen mode, you need to call requestFullscreen() on it. Exiting it is done via exitFullscreen(). To check if a browser is in full-screen mode, you can access the fullscreenElement document property. You can also handle the fullscreenchange event to be notified when full-screen mode is toggled.

Since this API has compatibility issues with Webkit-based browsers, I would suggest that you use the webkit prefix.

If you want to implement the full-screen feature in an 'Angular way,' I would suggest creating a directive. You can use a third-party library if you prefer, such as the ngx-fullscreen-directive.

How to make google chrome go full screen in Angular 4 Application?

6 Answers6

Linked