How to make the window go full screen in Angular 2 + / Typescript?
1 min readApr 21, 2022
Follow the below code to make your angular project go fullscreen on button click.
In HTML:<button (click)="fullscreen()"></button>In .ts:elem:any;
isFullscreen: any = false;ngOnInit(): void {
this.elem = document.documentElement;
}// code for Toggle fullscreen
fullscreen() {
if (this.isFullscreen) {
const docWithBrowsersExitFunctions = document as Document & {
mozCancelFullScreen(): Promise<void>;
webkitExitFullscreen(): Promise<void>;
msExitFullscreen(): Promise<void>;};if (docWithBrowsersExitFunctions.exitFullscreen) {
docWithBrowsersExitFunctions.exitFullscreen();
} else if (docWithBrowsersExitFunctions.mozCancelFullScreen) { /* Firefox */docWithBrowsersExitFunctions.mozCancelFullScreen();
} else if (docWithBrowsersExitFunctions.webkitExitFullscreen) { /* Chrome, Safari and Opera */docWithBrowsersExitFunctions.webkitExitFullscreen();
} else if (docWithBrowsersExitFunctions.msExitFullscreen) { /* IE/Edge */docWithBrowsersExitFunctions.msExitFullscreen();
}this.isFullscreen = false;}else {const docElmWithBrowsersFullScreenFunctions = document.documentElement as HTMLElement & {mozRequestFullScreen(): Promise<void>;webkitRequestFullscreen(): Promise<void>;msRequestFullscreen(): Promise<void>;};if (docElmWithBrowsersFullScreenFunctions.requestFullscreen) {docElmWithBrowsersFullScreenFunctions.requestFullscreen();} else if (docElmWithBrowsersFullScreenFunctions.mozRequestFullScreen) { /* Firefox */docElmWithBrowsersFullScreenFunctions.mozRequestFullScreen();} else if (docElmWithBrowsersFullScreenFunctions.webkitRequestFullscreen) { /* Chrome, Safari and Opera */docElmWithBrowsersFullScreenFunctions.webkitRequestFullscreen();} else if (docElmWithBrowsersFullScreenFunctions.msRequestFullscreen) { /* IE/Edge */docElmWithBrowsersFullScreenFunctions.msRequestFullscreen();}this.isFullscreen = true;}}