Stop fullscreen mode in Angular after initiating in fullscreen mode

Issue with exiting full screen on Angular when starting Chrome in full-screen mode.

HTML:

<hello name="{{ name }}"></hello>
<a href="https://angular-go-full-screen-f11-key.stackblitz.io" target="_blank" style="display: block;">
  Open in new window
</a>
<button (click)="openFullscreen()">Go full screen</button>
<button (click)="closeFullscreen()">Exit full screen</button>

TypeScript:

import { DOCUMENT } from '@angular/common';
import { Component, Inject, OnInit } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
  constructor(@Inject(DOCUMENT) private document: any) {}
  elem;

  ngOnInit() {
    this.elem = document.documentElement;
  }

  openFullscreen() {
    // Code for going full screen
  }

  closeFullscreen() {
    // Code for exiting full screen
  }
}

Solution sample here.

The "Go full screen" and "Exit full screen" buttons work correctly when opening the sample.

However, when opening in full-screen mode using the command below, the "Exit full screen" button does not work.

chrome.exe --start-fullscreen https://angular-go-full-screen-f11-key.stackblitz.io

Why is the "Exit full screen" functionality affected by starting in full-screen mode?

How can this issue be resolved?

Answer №1

There appears to be a distinction between initiating a "Go fullscreen" action through the user-agent (such as using the --start-fullscreen flag or pressing F11) and utilizing the Fullscreen-API's `requestFullscreen` call.

Upon inspecting document.fullscreenElement with Live-expressions in DevTools, it is evident that this property remains unset when triggering fullscreen via F11 or --start-fullscreen, but it is set when employing the Fullscreen-API. document.exitFullscreen() will only function correctly when document.fullscreenElement is defined.

For more information, refer to https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/fullscreenElement

To address this issue, one potential solution could involve relying on a URL-parameter and implementing fullscreen toggling within your component's logic if the parameter is present?

Take a look at this demo showcasing fullscreen functionality: https://stackblitz.com/edit/angular-go-full-screen-f11-key-xiq6va?file=src%2Fapp%2Fapp.component.ts

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to identify the type of an element using AngularJS?

Is it possible to use ng-model to identify the type of an element? For example: How can we determine if a specific element is a dropdown or a checkbox? HTML Code Snippet <select multiple ng-model='p.color'> <option value="red">Re ...

Separating screens for logged in and logged out users in React Router with Firebase is not possible

I'm currently developing an application using React and Firebase. The app has a requirement for user authentication to access their own timeline. To achieve this, I have decided to split the app into LoggedIn screens and LoggedOut screens. In the App ...

Locating a Guild Member using their Alias

I need help locating a GuildMember using their nickname. The nickname is linked to their Roblox name upon joining the server, and I've configured a webhook to transmit a message in a specific channel containing their username and other related details ...

Is it possible to target elements based on a specific CSS3 property they use?

Is there a method to target all elements in the DOM with a border-radius other than 0? If anyone has suggestions, it would be greatly appreciated! ...

Transform date format using VueJS in JavaScript

I need to convert a date format from 19 Oct 2017 to 20171019. Is there a way to do this quickly? I am using FlatPickr in VueJs. Here is the code snippet for reference: import flatPickr from 'vue-flatpickr-component'; import 'flatpickr/dist/ ...

Error Message: SCRIPT5 - Permission Denied When Trying to Open PDF with Javascript

Despite searching through multiple posts on SO, I have yet to find a solution to my issue. We operate a web form within our LAN that utilizes Javascript's OPEN function to open PDF files. Up until recently, everything was working smoothly. However, ...

The checkbox component is currently not displaying on the ngx-datatable

The following HTML code snippet demonstrates a sample layout. The operations are functioning correctly, however, the checkbox is not visible. <ngx-datatable style="width: 90%" class="material" [rows]="rows" ...

Combining various DTOs in a seamless manner for validation in TypeScript is made easy with the class-validator fusion technique

As I delved into my NestJS project, I found the class-validation aspect to be quite bothersome. It felt like I was constantly repeating the same classes with identical decorators. For example: export class DTO1 { @IsDefined() @IsString() name: ...

Encountering issues with deploying an Angular 8 website using a specific configuration

My current project is built on Angular 8, and I am in the process of publishing it locally before deploying it. When running the build step, I specify an environment name called internalprod: src ├───app ├───environments │ environme ...

The server is taking too long to respond, resulting in a 504 Timeout error

I currently have an Angular frontend paired with a .NET CORE backend. The issue I am experiencing is related to a specific request that is resource-intensive and takes a significant amount of time to complete. Whenever I check the browser console, I receiv ...

Tips for determining the defaultValue type in React.context usage

'use client'; import { useState, createContext, useMemo } from 'react'; type MessageStatus = 'default' | 'success' | 'error'; export type MessageProps = { type: MessageStatus; payload: string; }; ty ...

Encountering an error with $mdDialog.alert

I am attempting to activate an Alert Dialog using Angular Material Design. Within my controller, I have: angular.module('KidHubApp') .controller('ActivityCtrl', ['$scope','$meteor', '$stateParams', &apo ...

Get a specific attribute of an object instead of directly accessing it

Is there a way to retrieve a specific object property in my checkForUrgentEvents method without referencing it directly? I attempted using Object.hasOwnProperty but it didn't work due to the deep nesting of the object. private checkForUrgentEvents(ur ...

Troubleshooting a Problem with the Horizontal Scrollbar in Dynamic jqGrid

Currently, I am working on an ASP.net MVC project where I have implemented both dynamic and static jq grids. However, I am encountering an issue with the horizontal scroll bar in my application. To address this problem, I attempted to modify the overflow ...

How to incorporate dynamic form elements into jquery.validate?

Even though I found a similar question on this link, the solutions provided there do not seem to work for me. I am currently using the query.validate plugin for my form, which works well in most cases. However, I have encountered an issue when adding new r ...

Tips on accessing the returned value from the controller within a JSP page using Ajax

This is a snippet of my JavaScript code: <script type="text/javascript"> function callMe() { var districtId = $("#district").val(); alert(districtId); $.ajax({ type: "POST", ...

Building a hierarchical object structure from an array

I am working with an array of objects that looks like this: const sorted = [ { IsoCode: "EUR", Buy: 1.948, Sell: 1.963 }, { IsoCode: "GBP", Buy: 2.1184, Sell: 2.1894 }, { IsoCode: "USD", Buy: 1.5781, Sell: 1.6484 }, ] and my ...

The error occurred in Commands.ts for Cypress, stating that the argument '"login"' cannot be assigned to the parameter of type 'keyof Chainable<any>))`

Attempting to simplify repetitive actions by utilizing commands.ts, such as requesting email and password. However, upon trying to implement this, I encounter an error for the login (Argument of type '"login"' is not assignable to parameter of t ...

Exploring the potential of AssemblyScript in creating immersive WebXR

I have been exploring three.js and webXR for some time now, and I wanted to incorporate it into assembly script. While I know how to make webXR work in TypeScript, I encounter an error when trying to use it in assembly script with the import statement. Her ...

JS/Chrome Extension: Ways to Verify if a User is Currently Logged In

After building a Chrome extension, I am now looking to seamlessly integrate it with my existing PHP-based website. This website allows users to have their own accounts and save their favorite items, similar to a Pinterest platform. My main question is whe ...