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

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

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

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