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

Having trouble with my JQuery image slider... Can anyone help troubleshoot what I might have missed?

I am trying to create a simple image slider, but it doesn't seem to be working. I followed a tutorial on YouTube closely, but since I can't compare my code with theirs on a website, I'm having trouble identifying the mistake. Despite followi ...

Observables do not provide any results when used in a pipe with an image src

I recently created a custom pipe for the image src in my application: It is applied to selectors like this: <img [src]="myobject?.URL | secure" /> Here's the code snippet for the pipe: import { Pipe, PipeTransform } from '@angular/c ...

Reverse changes made to a massive object and then redo them

My current project requires the implementation of undo-redo functionality for a product. At the moment, I am managing a substantial Object retrieved from a MongoDB collection The structure is as follows: { cart:{ products:[ { name: " ...

Determine the status of all jqXHR requests within an array to confirm completion

My goal is to execute a block of code once all the jqXHR elements in an array have completed, whether they have succeeded or failed. For the full code, you can check it out here: http://jsfiddle.net/Lkjcrdtz/4/ Essentially, I am anticipating the use of t ...

Prevent coverage tracking for files or paths enclosed in square brackets in jest

I am trying to exclude a specific file from test coverage in Jest by modifying the collectCoverageFrom array. The file name contains square brackets, and I have added an entry with a negation for this file. collectCoverageFrom: [ './src/**/*.{js ...

Transferring data from client to server: Weighing the pros and cons of

When dealing with 1-5 variables on the client side that need to be sent to the server using AJAX (Post Method), there are two primary methods of getting them there. One option is to use JSON to encode and decode the variables, sending them as a JSON stri ...

What is the process for integrating a gltf model into Aframe & AR.js with an alpha channel?

--Latest Update-- I've included this code and it appears to have made a difference. The glass is now clear, but still quite dark. Note: I'm new to WebAR (and coding in general).... but I've spent days researching online to solve this issue. ...

Information regarding gender vanishes upon refreshing the page

When the page is refreshed, the variable called jso disappears. Is there an alternative method for storing information that does not involve using a button? The goal is to have it work seamlessly when the page is reloaded without requiring any user action. ...

Encountering a fatal error in the Next.js application: "Mark-compacts near heap limit allocation failed issue is hindering the smooth

When I'm working in Next.js, I often encounter the issue of not being able to run my project after work. https://i.stack.imgur.com/IA5w3.png ...

Removing users from a Socket.IO chat room using Node.js

I am facing an issue with removing users from Socket.IO when their browser is closed. The 'user' in the array 'users[]' is not getting removed or updated. Additionally, I would like to update the users on the client side as well. Can so ...

Angular module structure, is it appropriate to utilize shared components within the module?

I have been deliberating on the correct approach for designing my Angular project. The main entity in this application is an Order. An Order can be used in three different ways: Distribution Assigning Execution My decision was to create three modules: ...

ngFor filter based on user input

I am working on a 2-step stepper feature where I need to filter the values in my amountArray based on the age of the person. If the person is above 50 years old, display only the values 10000 and 15000. For Euro currency, show values 25000 and 50000. I att ...

Why is the jQuery datepicker malfunctioning when nested within ng-repeat in AngularJS?

I am currently facing an issue with the jquery ui date picker in my AngularJS application. The date picker is functioning correctly outside of any ng-repeat loops, but it stops working when placed within one. <input type="text" class="form-control date ...

Why does the return value of a function in Node.js and JavaScript sometimes appear as undefined?

I am completely stumped by this issue. I've been trying to figure it out, but so far, no luck.. this is the code snippet function part1(sql, controltime, headers_view, results_view, tmp){ var timerName = "QueryTime"; var request = ne ...

The CSS and Bundle script path may need adjustment following the creation of the index.html file by WebPack

There seems to be an issue with webpack trying to add 'client' to the href of script tags for my CSS and bundle files. This is causing a problem as it's incorrect and I'm unsure how to remove it. Prior to switching to webpack, here&apo ...

Is it possible for a Javascript code to execute multiple tasks upon being inserted into the browser's URL bar?

Is it feasible for JavaScript to simulate a user clicking on a link, triggering a pop-up, automatically clicking a button within the pop-up, and then redirecting the user to a final page once a specific code is copied and pasted into the browser's add ...

Optimal approach for designing interfaces

I have a situation where I have an object retrieved from the database, which includes assignee and author ID properties that refer to user objects. As I transform a number into a user object, I am unsure about the best practice for defining the type of the ...

Customize the popover in React Material-UI to your liking

I am currently utilizing a Select component within my application. https://i.stack.imgur.com/hjXlY.png I have created a custom modal component that I wish to display instead of the default list items when the select is clicked. Is there a method to overr ...

Encountering difficulty in implementing two modals simultaneously on a single web page while utilizing the useDisclosure() hook in Ch

ChakraUI provides a custom hook called useDisclosure() which gives you access to isOpen, onClose , onOpen. const { isOpen, onOpen, onClose } = useDisclosure() You can use the onOpen function as an onClick handler for a button to open a modal. <Modal ...

Introducing NextAuth: Empowering multiple users to access a single account

I've been pondering if it's possible to have multiple users for a single account provider. One idea is to create a session with a specific field indicating the active user (the one currently logged in) and then allow for easy switching between us ...