If you want to learn how to implement fullscreen functionality in an Angular application, check out this link: https://www.w3schools.com/howto/howto_js_fullscreen.asp

This code snippet shows the "angular way" of achieving fullscreen mode.

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

As technology has advanced, the method for achieving compatibility in various browsers and mobile devices has evolved. I have found that using requestFullScreen is now sufficient for ensuring a seamless experience across platforms.

https://developer.mozilla.org/en-US/docs/Web/API/Element/requestFullScreen

Below is an example demonstrating how 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;
}

A request to enter fullscreen mode can only be initiated by user interaction with an element, such as a button

<button (click)="toggleFullScreen()">SWITCH SCREEN MODE</button>

To enable full screen functionality in your component, add the following code snippet at the top of the component (before @Component):

    interface FsDocument extends HTMLDocument {
      mozFullScreenElement?: Element;
      msFullscreenElement?: Element;
      msExitFullscreen?: () => void;
      mozCancelFullScreen?: () => void;
    }

    export function isFullScreen(): boolean {
      const fsDoc = <FsDocument> document;

      return !!(fsDoc.fullscreenElement || fsDoc.mozFullScreenElement || fsDoc.webkitFullscreenElement || fsDoc.msFullscreenElement);
    }

    interface FsDocumentElement extends HTMLElement {
      msRequestFullscreen?: () => void;
      mozRequestFullScreen?: () => void;
    }

    export function toggleFullScreen(): void {
      const fsDoc = <FsDocument> document;

      if (!isFullScreen()) {
        const fsDocElem = <FsDocumentElement> document.documentElement;

        if (fsDocElem.requestFullscreen)
          fsDocElem.requestFullscreen();
        else if (fsDocElem.msRequestFullscreen)
          fsDocElem.msRequestFullscreen();
        else if (fsDocElem.mozRequestFullScreen)
          fsDocElem.mozRequestFullScreen();
        else if (fsDocElem.webkitRequestFullscreen)
          fsDocElem.webkitRequestFullscreen();
      }
      else if (fsDoc.exitFullscreen)
        fsDoc.exitFullscreen();
      else if (fsDoc.msExitFullscreen)
        fsDoc.msExitFullscreen();
      else if (fsDoc.mozCancelFullScreen)
        fsDoc.mozCancelFullScreen();
      else if (fsDoc.webkitExitFullscreen)
        fsDoc.webkitExitFullscreen();
    }

    export function setFullScreen(full: boolean): void {
      if (full !== isFullScreen())
        toggleFullScreen();
    }

In the ngOnInit method, include a call to the setFullScreen(full: boolean) function:

ngOnInit(): void {
    setFullScreen(true);
}

This is the latest approach recommended for Angular.

HTML: Use this code snippet in your HTML file:

(click)="openFullscreen()"

NgOnInit:

this.element = document.documentElement;

TS: Implement this function for it to be effective...

 openFullscreen() {
if (this.element.requestFullscreen) {
  this.element.requestFullscreen();
} else if (this.element.mozRequestFullScreen) {
  /* Firefox */
  this.element.mozRequestFullScreen();
} else if (this.element.webkitRequestFullscreen) {
  /* Chrome, Safari and Opera */
  this.element.webkitRequestFullscreen();
} else if (this.element.msRequestFullscreen) {
  /* IE/Edge */
  this.element.msRequestFullscreen();
}`]`

}

To enable fullscreen mode for an Element, utilize the Full Screen API supported by most browsers. More information can be found here.

Simply call requestFullscreen() to display an element in full-screen and use exitFullscreen() to exit this mode. Check if a browser is in full-screen using the fullscreenElement property or listen for the fullscreenchange event.

Note that there may be compatibility issues with Webkit-based browsers, so consider including the webkit prefix for better support.

If you prefer an 'Angular way' of implementing full-screen functionality, consider creating a directive. Alternatively, explore third-party libraries like ngx-fullscreen-directive.