How to implement fullscreen mode in Angular?

Nowadays, most of the websites implementing that feature especially the video player websites, enter fullscreen mode, exit fullscreen mode

Using document.fullscreenElement, we can detect whether we’re in the fullscreen mode or not and previously it is used as document.fullscreen

For this, you can refer https://developer.mozilla.org/en-US/docs/Web/API/Document/fullscreen

Let’s create two buttons or icons in the HTML file, and we show only the button/icon at a time but first let’s show both at the same time

If you’re using Angular material then they are providing these icons by the name of fullscreen and fullscreen_exit

HTML File 
<mat-icon class="screen" (click)="openFullscreen()">fullscreen</mat-icon>
            <mat-icon class="screen" (click)="closeFullscreen()">fullscreen_exit</mat-icon>

The above code should be in the header file or you can say navbar or toolbar whatever you like.

TS File
import { DOCUMENT } from '@angular/common';
import { Component, OnDestroy, OnInit } from '@angular/core';
export class MyHeaderComponent implements OnInit, OnDestroy {
elem: any;
constructor(
        @Inject(DOCUMENT) private document: any
    ) {
}
ngOnInit(): void {
    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();
        }
      }

}

That’s it now we have implemented the fullscreen feature in our Angular app, we can make it much better by showing one button at a time.

If it is in fullscreen mode, then fullscreen_exist icon and if it is not in fullscreen, then we can show fullscreen icon.

In Html File, we need to add *ngIf condition so that we can show only one but to detect the close fullscreen mode, we need to add some event too, as a user can close the fullscreen from ESC key, we can handle the close event if the user clicks on our Icon, but if not then how can we achieve that feature.

So we need to detect fullscreen change event, for more details please refer to https://developer.mozilla.org/en-US/docs/Web/API/Document/fullscreenchange_event

Let’s implement that event in Angular

Updated HTML
<mat-icon class="screen" *ngIf="!isFullScreen" (click)="openFullscreen()">fullscreen</mat-icon>
            <mat-icon class="screen" *ngIf="isFullScreen" (click)="closeFullscreen()">fullscreen_exit</mat-icon>

Here in the above HTML, I added condition so only one icon shows at one time.

Updated TS
//import Host Listner 
import { Component, OnDestroy, OnInit, HostListener } from '@angular/core';
export class ToolbarComponent implements OnInit, OnDestroy{
//declare variable 
elem: any; isFullScreen: boolean;
  @HostListener('document:fullscreenchange', ['$event'])
  @HostListener('document:webkitfullscreenchange', ['$event'])
   @HostListener('document:mozfullscreenchange', ['$event'])
   @HostListener('document:MSFullscreenChange', ['$event'])
fullscreenmodes(event){
      this.chkScreenMode();
    }
chkScreenMode(){
      if(document.fullscreenElement){
        //fullscreen
        this.isFullScreen = true;
      }else{
        //not in full screen
        this.isFullScreen = false;
      }
    }
}

So we detect the fullscreen change event and by using document.fullscreenElement property we invert the isFullScreen variable

One thing more, mostly in the admin panel generally you saw that toolbar is not there and it comes only in the dashboard, so we need to check whether our website is already in fullscreen or not

so the combined TS for that should be like:-

Final TS with all things implemented
import { Component, OnDestroy, OnInit, HostListener } from '@angular/core';
import { DOCUMENT } from '@angular/common';
export class MyHeaderComponent implements OnInit, OnDestroy {
elem: any; isFullScreen: boolean;
constructor(
        @Inject(DOCUMENT) private document: any
    ) {
}
ngOnInit(): void {
    this.chkScreenMode();
    this.elem = document.documentElement;
}
@HostListener('document:fullscreenchange', ['$event'])
   @HostListener('document:webkitfullscreenchange', ['$event'])
   @HostListener('document:mozfullscreenchange', ['$event'])
   @HostListener('document:MSFullscreenChange', ['$event'])
fullscreenmodes(event){
      this.chkScreenMode();
    }
chkScreenMode(){
      if(document.fullscreenElement){
        //fullscreen
        this.isFullScreen = true;
      }else{
        //not in full screen
        this.isFullScreen = false;
      }
    }
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();
        }
      }
}

Enjoy the Full Screen View with Mozilla Javascript Event and Angular 😊

Happy Coding — Angular Framework Love ❣❣❣