Clash Royale CLAN TAG#URR8PPP

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

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.

2 Answers
2

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.

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.

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.