Tips for triggering functions when a user closes the browser or tab in Angular 9

I've exhausted all my research efforts in trying to find a solution that actually works. The problem I am facing is getting two methods from two different services to run when the browser or tab is closed.

I attempted using the fetch API, which worked flawlessly on Chrome but failed to cooperate on Internet Explorer. Another approach I took was implementing a while loop like the one below:

@HostListener('window:beforeunload', ['$event'])
onBeforeUnload(): void {
    var sessionEnded = false;
this.userSessionService.EndSession(this.userSessionId).then(res => sessionEnded = res);;
while (sessionEnded == false) {
  console.log('session not ended');
}
  }

This method was successful on Chrome, however, it didn't quite cut it when trying to close the browser on IE.

Have I missed any other alternative solutions out there?

Could opening a new tab to carry out these functions and then closing upon completion be a feasible option?

Answer №1

@HostListener('window:beforeunload', ['$event'])
async handleBeforeUnload(): void {
    let hasEndedSession = false;
    await hasEndedSession = this.service.endUserSession(this.sessionId);
    while (!hasEndedSession) {
      console.log('Session is still active');
    }
  }

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

The background image shifts dynamically with a parallax effect as the page is scrolled

I need help solving a parallax issue that I'm currently facing. On my webpage, I have a background image positioned at the top with a parallax effect achieved through background-position: fixed. However, I now require the image to scroll along with t ...

When large spheres meet, Three.js/WebGL displays them as fractured

I must admit that I am not very experienced with 3D graphics. Issue In my WebGL model using Three.js, I have intentionally made two spheres collide. However, when the spheres are extremely large, they appear "broken" at the point of intersection, whereas ...

The error TS2339 is indicating that there is no property called myProperty on the type SetStateAction<User>

I'm encountering a TypeScript error while working with React that's leaving me puzzled: <html>TS2339: Property 'subEnd' does not exist on type 'SetStateAction&lt;User&gt;'.<br/>Property 'subEnd' d ...

Applying specific data types to object properties for precise value identification in Typescript

I've been working on creating a dynamic settings menu in TypeScript using the following data: const userSettings = { testToggle: { title: "Toggle me", type: "toggle", value: false, }, testDropdow ...

What is a more efficient approach to managing the response from an asynchronous call other than using setState?

Utilizing javascript async await, I have been making service calls to the server in componentDidMount or componentDidUpdate. However, when I need to pass the response data as props to other components, I find myself updating the component's state with ...

The Ng-zorro popover automatically closes when it is displayed on hover, and then you hover over the dropdown menu of a select component

Link for Reproduction https://stackblitz.com/edit/angular-tru7hd-xqtrkw?file=src%2Fapp%2Fapp.component.ts,src%2Findex.html Instructions to Reproduce Hover over the button Click on the selection List item List item Hover over one of the choices Expecte ...

Adding a border to dynamically generated content while excluding the outer borders using CSS - an easy guide

My current project involves establishing a grid system that dynamically populates content, resulting in an uncertain number of elements being created. At the moment, each element is placed within a flexbox container with 3 elements per row. If there are mo ...

Warning: The class name hydration discrepancy between server and client (Caution: Property `className` does not correspond between the Server and the Client)

Trying to figure out if my problem is a stubborn bug, a support issue, or just a configuration mismatch has been quite the journey. I've spent so much time on this, not exactly thrilled to be reaching out for help. After searching for 3 days and only ...

Encountering NullInjectorError in Angular 7 due to missing provider for MatSnackBarConfig

We are incorporating Angular 7 and Angular Material in our project. While everything functions smoothly on Google Chrome, we have hit a roadblock with Internet Explorer 11. Specifically, when running the app with the --aot flag, an error is triggered: ERR ...

Having trouble accessing the div element inserted by the Angular application

I've encountered an issue while trying to access a div that is injected into the DOM by an Angular app on the page. Below is the script I have placed at the end of the HTML page: $(document).ready(function () { var targetNode = document.querySelect ...

Vue.js is experiencing functionality issues on mobile devices and other connected devices, however, it is operating smoothly on desktop devices when localhost is running

I recently ran into an issue while trying to run my Laravel project on localhost and connect it to other devices like mobiles and desktops/laptops using the local address. The function works perfectly on the hosting desktop but fails to work on other devic ...

Is there a way to ensure that fields in a sub component are validated whenever we attempt to switch the Tab using a route

Hi there, I could really use your assistance. I've done some research, but I haven't been able to find a suitable solution for my problem. I have this shared component that contains the following code which enables tab navigation through various ...

How can I organize an array in JavaScript by date for presentation on a webpage?

Check out this code snippet: list.component.ts const data1 = [ { dateStart: "2020-02-14 00:00:01", name: 'Server1' }, { dateStart: "2020-02-13 14:00:01", name: 'Server1' }, ...

Encountered an issue while trying to install using the command npm install react router dom

For a project I'm working on, every time I attempt to use this command, an error message appears and the installation fails. I've tried multiple commands with no success. Here is the specific error message: npm ERR! code 1 npm ERR! path C:\ ...

The function Array.map is unavailable, causing the datalist to not update as expected

I've been closely following a tutorial series on YouTube, but I keep encountering an error during the process. The link to the tutorial is available here: https://www.youtube.com/watch?v=re3OIOr9dJI&t=11s&ab_channel=PedroTech. The purpose of ...

Different conversations are taking place concurrently. How can we determine which one is currently being attended to

In my application, multiple dialogs are open simultaneously, each with its own set of shortcuts. It is important to ensure that these shortcuts work correctly based on the focused dialog. Is there a way to determine which dialog is currently in focus? Ed ...

Errors may arise in Typescript when attempting to block the default behavior of DataGrid onRowEditStop

Hey there! I'm new to posting questions here and could use some help. I'm encountering a minor issue while trying to prevent the default behavior of the "Enter" key in the "onRowEditStop" method of the DataGrid component. Here's my code sni ...

Finding the percentage scores for five different subjects among a class

As a beginner in TypeScript, I am still learning the ropes. Here is the code snippet I used to calculate percentage: pere() { this.E=(((+this.English+ +this.Tamil+ +this.Maths+ +this.Science+ +this.Social)/500)*100); console.log(this.E); The result w ...

"Efficiently Distributing HTTP Requests Among Simultaneous Observers using RxJS

Currently, I am working on a feature in my Angular application that requires handling multiple concurrent fetches for the same data with only one HTTP request being made. This request should be shared among all the subscribers who are requesting the data s ...

Unleashing the Power of Dynamic JSON Data Access

I am facing an issue with my React Child component. Here is the code snippet: const SingleProject =(props)=>{ let data = projectData.VARIABLE_FROM_PROPS.projectDetails; let asideData = projectData.VARIABLE_FROM_PROPS.projectSideBar; useEffe ...