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>