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.

Solution 1

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);
}

Solution 2

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

Solution 3

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);
}

Comments

[Jignesh Mistry]

Tried Brother It gives me this error -> Property 'mozRequestFullScreen' does not exist on type 'HTMLElement

[Jignesh Mistry]

Sure I want when i go from one component to other component it should automatically trigger

[Jignesh Mistry]

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]

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.

[Krishna Rathore]

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.

[Swoox]

I was using this but in angular 7.0.0 this stopped working it will throw an error now.

[SK.]

@KrishnaRathore I tried to put the script in ngOnInit. It didn't work. Can you please help me... Thanks in advance...

[Ashwin]

document.exitFullscreen in order to exit fullscreen?

[Mauricio Gracia Gutierrez]

"current way" is 2018 - this is 2022: stackoverflow.com/a/71572615/1461862