How can I open the chrome in F11 mode by navigation to another page in Angular Application?

Question

I am developing an application where i need user when user logs in screen should be full (Example like : Chrome f11) & after logout return to its original postilion.

Answer 1

If you dont want to add an extra library dependency, you can just implement a full-screen toggle function like this:

  /**
   * Toggles the fullscreen mode.
   */
  toggleFullscreen() {
    if (document.webkitIsFullScreen) {
      this._exitFullscreen();
    } else {
      this._activateFullscreen();
    }
  }

  /**
   * Activate Full Screen Mode.
   */
  private _activateFullscreen() {
    let fullscreenElement = document.documentElement;
    if (fullscreenElement.requestFullscreen) {
      fullscreenElement.requestFullscreen();
    } else if (fullscreenElement.mozRequestFullScreen) { 
      /* Firefox */
      fullscreenElement.mozRequestFullScreen();
    } else if (fullscreenElement.webkitRequestFullscreen) { 
      /* Chrome, Safari and Opera */
      fullscreenElement.webkitRequestFullscreen();
    } else if (fullscreenElement.msRequestFullscreen) { 
      /* IE/Edge */
      fullscreenElement.msRequestFullscreen();
    }
  }

  /**
   * Exits Full Screen Mode.
   */
  private _exitFullscreen() {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.mozCancelFullScreen) { 
      /* Firefox */
      document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) { 
      /* Chrome, Safari and Opera */
      document.webkitExitFullscreen();
    } else if (document.msExitFullscreen) { 
      /* IE/Edge */
      document.msExitFullscreen();
    }
  }

Link to example Code & Demo.

Answer 2

Take a look at this library: https://github.com/sindresorhus/screenfull.js/

There's an Angular 2 Example too:

import {Directive, HostListener} from '@angular/core';
import * as screenfull from 'screenfull';

@Directive({
    selector: '[toggleFullscreen]'
})
export class ToggleFullscreenDirective {

    @HostListener('click') onClick() {
        if (screenfull.enabled) {
            screenfull.toggle();
        }
    }
}

And then in your markup:

<button toggleFullscreen>Toggle fullscreen<button>

Then you can act based on your events and request fullscreen, toggle it on or off based on your needs.