Thu. Mar 28th, 2024

Maybe you want to enable your users to switch to full-screen mode in their browser with your angular application. This is a nice little bonus feature you can add in, without adding to the size of your applicaiton. So first thing first, create a property:

fullScreen: boolean = false;

Set it to false to begin with. Now in your HTML/Template add the following:

<a (click)="goFullScreen(!fullScreen)">
    <mat-icon *ngIf="fullScreen">fullscreen_exit</mat-icon>
    <mat-icon *ngIf="!fullScreen">fullscreen</mat-icon>
    <span class="icon_space" *ngIf="fullScreen">Exit Full Screen</span>
    <span class="icon_space" *ngIf="!fullScreen">Full Screen</span>
</a>

This will switch you between the Full Screen and Exit Full Screen modes. Now because browsers are different and we do not have a consistent interface for doing this, we have to plan for our browser:

goFullScreen(fullScreen:boolean) {
        if(fullScreen) {
            this.openFullscreen();
        } else {
            this.closeFullscreen();
        }
    }

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

Special Thanks to you Stavm with https://stackoverflow.com/a/51998854/3602840. His solution was golden for dealing with the different browsers. Notice I didn’t change my this.fullScreen boolean in this code. I do that in the case if something fails. Instead I list and adjust it when the event indicates it actually takes place.

@HostListener('document:fullscreenchange', ['$event'])
    @HostListener('document:webkitfullscreenchange', ['$event'])
    @HostListener('document:mozfullscreenchange', ['$event'])
    @HostListener('document:MSFullscreenChange', ['$event'])
    fullScreenChange() {
        console.log("Recieved");
        this.fullScreen = !this.fullScreen;
    }

Again all the broswers are different so I list for them all.

F11 and Manual Full Screen change size is not detected here.

If your user changes to Full Screen size by pressing the F11 key on Chrome, or the equivalent on other browsers this will not trigger an event to be picked up by Angular.

By Jeffery Miller

I am known for being able to quickly decipher difficult problems to assist development teams in producing a solution. I have been called upon to be the Team Lead for multiple large-scale projects. I have a keen interest in learning new technologies, always ready for a new challenge.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d