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