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