FullScreen Request on Angular 2/4

Question

I'm building a new project on Angular 2/Angular 4, and i need to use Enter FullScreen Button on my Application.

I was searching and i've Found the code:

  toggleFullScreen() {
    if (!document.fullscreenElement &&    // alternative standard method
        !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement )
        {  // current working methods
      if (document.documentElement.requestFullscreen) {
        document.documentElement.requestFullscreen();
      } else if (document.documentElement.msRequestFullscreen) {
        document.documentElement.msRequestFullscreen();
      } else if (document.documentElement.mozRequestFullScreen) {
        document.documentElement.mozRequestFullScreen();
      } else if (document.documentElement.webkitRequestFullscreen) {
        document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
      }
    } else {
      if (document.exitFullscreen) {
        document.exitFullscreen();
      } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
      } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
      }
    }
  }

When i use "ng serve" to compile the application, FullScreen Button works, but it gives me the follow errors:

ERROR in src/app/commom/breadcrumb/breadcrumb.component.ts(41,64): error TS2339: Property 'mozRequestFullScreen' does not exist on type 'HTMLElement'.
src/app/commom/breadcrumb/breadcrumb.component.ts(41,127): error TS2551: Property 'msRequestFullscreen' does not exist on type 'HTMLElement'. Did you mean 'requestFullscreen'?
src/app/commom/breadcrumb/breadcrumb.component.ts(42,56): error TS2339: Property 'mozCancelFullScreen' does not exist on type 'Document'.
src/app/commom/breadcrumb/breadcrumb.component.ts(42,111): error TS2551: Property 'msExitFullscreen' does not exist on type 'Document'. Did you mean 'exitFullscreen'?
src/app/commom/breadcrumb/breadcrumb.component.ts(44,41): error TS2339: Property 'mozFullScreenElement' does not exist on type 'Document'.
src/app/commom/breadcrumb/breadcrumb.component.ts(44,102): error TS2551: Property 'msFullscreenElement' does not exist on type 'Document'. Did you mean 'fullscreenElement'?
src/app/commom/breadcrumb/breadcrumb.component.ts(103,19): error TS2339: Property 'mozFullScreenElement' does not exist on type 'Document'.
src/app/commom/breadcrumb/breadcrumb.component.ts(103,90): error TS2551: Property 'msFullscreenElement' does not exist on type 'Document'. Did you mean 'fullscreenElement'?
src/app/commom/breadcrumb/breadcrumb.component.ts(107,43): error TS2551: Property 'msRequestFullscreen' does not exist on type 'HTMLElement'. Did you mean 'requestFullscreen'?
src/app/commom/breadcrumb/breadcrumb.component.ts(108,34): error TS2551: Property 'msRequestFullscreen' does not exist on type 'HTMLElement'. Did you mean 'requestFullscreen'?
src/app/commom/breadcrumb/breadcrumb.component.ts(109,43): error TS2339: Property 'mozRequestFullScreen' does not exist on type 'HTMLElement'.
src/app/commom/breadcrumb/breadcrumb.component.ts(110,34): error TS2339: Property 'mozRequestFullScreen' does not exist on type 'HTMLElement'.
src/app/commom/breadcrumb/breadcrumb.component.ts(112,9): error TS2554: Expected 0 arguments, but got 1.
src/app/commom/breadcrumb/breadcrumb.component.ts(112,66): error TS2339: Property 'ALLOW_KEYBOARD_INPUT' does not exist on type '{ new (): Element; prototype: Element; }'.
src/app/commom/breadcrumb/breadcrumb.component.ts(117,27): error TS2551: Property 'msExitFullscreen' does not exist on type 'Document'. Did you mean 'exitFullscreen'?
src/app/commom/breadcrumb/breadcrumb.component.ts(118,18): error TS2551: Property 'msExitFullscreen' does not exist on type 'Document'. Did you mean 'exitFullscreen'?
src/app/commom/breadcrumb/breadcrumb.component.ts(119,27): error TS2339: Property 'mozCancelFullScreen' does not exist on type 'Document'.
src/app/commom/breadcrumb/breadcrumb.component.ts(120,18): error TS2339: Property 'mozCancelFullScreen' does not exist on type 'Document'.

Can someone help me, pls?

Answer 1

The solution by @kshetline worked really good! So I decided to put it into a Service

import {Injectable} from '@angular/core';

@Injectable()
export class FullscreenService {
  private doc = <FullScreenDocument>document;

  enter() {
    const el = this.doc.documentElement;
    if (el.requestFullscreen) el.requestFullscreen();
    else if (el.msRequestFullscreen) el.msRequestFullscreen();
    else if (el.mozRequestFullScreen) el.mozRequestFullScreen();
    else if (el.webkitRequestFullscreen) el.webkitRequestFullscreen();
  }

  leave() {
    if (this.doc.exitFullscreen) this.doc.exitFullscreen();
    else if (this.doc.msExitFullscreen) this.doc.msExitFullscreen();
    else if (this.doc.mozCancelFullScreen) this.doc.mozCancelFullScreen();
    else if (this.doc.webkitExitFullscreen) this.doc.webkitExitFullscreen();
  }

  toggle() {
    if (this.enabled) this.leave();
    else this.enter();
  }

  get enabled() {
    return !!(
      this.doc.fullscreenElement ||
      this.doc.mozFullScreenElement ||
      this.doc.webkitFullscreenElement ||
      this.doc.msFullscreenElement
    );
  }
}

interface FullScreenDocument extends HTMLDocument {
  documentElement: FullScreenDocumentElement;
  mozFullScreenElement?: Element;
  msFullscreenElement?: Element;
  webkitFullscreenElement?: Element;
  msExitFullscreen?: () => void;
  mozCancelFullScreen?: () => void;
  webkitExitFullscreen?: () => void;
}

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

Usage

@Component()
export class SomeComponent {
  constructor(private fullscreenService: FullscreenService) {}

  onToggleFullscreen() {
    this.fullscreenService.toggle();
  }
}

Answer 2

The typings for HTMLElement and Element don't have some of those properties like mozFullScreenElement and ALLOW_KEYBOARD_INPUT defined, so even though the generated JavaScript code will work just fine, the TypeScript compiler isn't happy.

The quick-and-dirty fix is to just cast everything giving you trouble to <any>. A more sophisticated way would be to define your own interfaces that extend HTMLElement and Element like this:

interface MyHTMLElement extends HTMLElement {
  mozFullScreenElement?: boolean;
  webkitFullscreenElement?: boolean;
  // ...etc...
}

...and cast your element objects like that instead of to <any>.

Edit: I wanted to use this full-screen code myself, so I've whipped up a full TypeScript-friendly version:

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

So far I've run this in Chrome, Firefox and Safari, all on macOS, and it works great.

Answer 3

Because these properties mozFullScreenElement, msFullscreenElement... are vendor-based, there's no defined type for it. One quick way to get around it is to change all of these properties to something like document['mozFullScreenElement']