HostListener in Angular 17 for BeforeUnloadEvent

I am currently working on an Angular 17 application and I have come across the following block of code:

  @HostListener("window:beforeunload", ["$event"])
  onTabClose($event: BeforeUnloadEvent) {

    $event.preventDefault();
    $event.returnValue = "Here is some text";
    return "here is some text";
  }

While testing, I noticed that when a user navigates away from the page, a confirmation dialog appears as expected. However, closing the tab does not trigger the confirmation dialog to appear. I even tried setting a breakpoint in the method, but no dialog showed up.

Could this be due to a browser security issue?

Answer №1

Located the solution. In order for the confirmation message to display, the user needs to engage with the page before closing the tab.

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

Ensuring external library object properties are limited in Typescript

Trying to utilize the notify function from an external library has been a bit challenging. The declaration in the library is as follows: // library.js export declare const notify: { (args: NotificationsOptions | string): void; close(id: unknown): ...

Determining the location of the cursor within 'ng2-ckeditor'

I'm a beginner with Angular 2 and I'm using 'ng2-ckeditor 1.0.7' in my Angular 2 application. The editor is functioning well within the app. However, I am now faced with the challenge of appending text at the cursor position. Unfortunat ...

Error in Angular 6: Unable to access property 'mapName' as it is undefined

For my web project using the Mean Stack with Angular 6, I need to create a form that includes an uploaded file. Below is the HTML code snippet: <ng-template #content let-c="close" let-d="dismiss"> <div class="modal-header"> <h4 class= ...

Guide on How to Embed an Angular Module in a Next.js (React App)

I'm currently in the process of integrating Micro Front End. As part of this integration, we need to include an Angular app in Next.js. To do so, we have injected the angular remoteEntry.js as shown below: injectScript({ global: 'app', ...

Unable to locate a declaration file for the 'mymodule' module

After attempting to import my test module by installing it with npm i github.com/.../..., the code is functioning properly. However, when I opened it in VSCode, an error message popped up: Could not find a declaration file for module 'estrajs'. & ...

Guide to collapsing all menus in an Angular 4 Accordion

I am a beginner with Angular 4 and I have implemented an accordion with the structure of Categories, Groups, and Subgroups. When I click on a category, it displays all the groups within that category. Similarly, when I click on a group, it shows all the s ...

Setting the initial selection in an Angular 2 Select Component

My goal is to develop a select component wrapper in Angular 2 using ngModel. Although the events work correctly once the selection changes, I am facing an issue with setting the initial selection when it's first rendered. Here is the code for my comp ...

What is the best way to define the type of an object when the Key is already known?

If I have the code snippet below, how can I properly define the data object type based on the known value of data.type? In this scenario, I aim to assign a specific type to data when its type property is either "sms" or "email" const payload = '{&quo ...

Using Docker to Deploy an Angular Frontend alongside a NodeJS/Express Backend

I recently created a web application using Angular for the frontend and NodeJS/Express for the backend. While everything is working smoothly locally, I encountered an issue when trying to move the application to Docker containers. The problem arises with ...

Can TypeScript interfaces be used to achieve the same functionality as an abstract class?

I am currently working on developing a function that will return an array type with custom methods, allowing me to utilize it across various sections of the application. Typically, this is achieved using Abstract Classes where abstract methods are defined ...

Issue with Yarn and Webpack: Unable to locate module 'contextify' in Node

My current challenge involves running an app (which I am currently working on) by executing the command: yarn start However, upon trying to run the app, I encountered the following error message: ts-node ./src/engine/server/server Error: Cannot find mod ...

What are the steps to fix the configuration error caused by IIS?

I have successfully deployed my Angular application on IIS manager. After building the application with the command ng build --prod --base-href /home/, I added the data generated in the dist folder to the IIS application. Here are the files that were gen ...

Adding a unique font to the themeprovider within styled components: A step-by-step guide

In the process of developing a React application using material-ui styled-components along with TypeScript. The task at hand is to incorporate a custom font into my styled components, but I'm facing challenges in making it functional. My initial ste ...

Ionic 3 and Angular 6: Json Input Ended Abruptly

I've come across numerous discussions about the error I'm experiencing, but none of the solutions seem to apply to my situation. This morning, when I ran my code, I encountered the "Unexpected end of Json Input" error. Interestingly, I hadn' ...

Obtain data from a single module and incorporate it into a different one

In my Angular 2 application, I am dealing with two component files - home.ts and folder-selector.ts. Within the folder-selector.ts file, there is a variable named pathToNode. I am trying to figure out how to access this value from within the home.ts file ...

Typescript: Omitting mandatory fields from a type

Can anyone help me with defining the type ExcludeAllRequiredProps<T> in the code below to exclude all required properties? Any assistance would be greatly appreciated. Thank you. type A = { a: number, b: number, c?: number, d?: number } typ ...

A guide to incorporating Material-UI ThemeProvider and WithStyles with Typescript

I've been feeling frustrated lately as I've been dedicating the past few days to migrating my React application from JavaScript to TSX. While I appreciate the type checking that TSX provides, I'm struggling with understanding how to implemen ...

Is there a way to deactivate a tab when it's active and reactivate it upon clicking another tab in Angular?

<a class="nav-link" routerLink="/books" routerLinkActive="active (click)="bookTabIsClicked()" > Books </a> I am currently teaching myself Angular. I need help with disabling this tab when it is active ...

Having trouble installing Moment and Material Moment Adapter in Angular?

To customize the date format in datepicker controls, I need to have both Material and Material-Moment-Adapter installed. Here is how I installed moment: npm install moment --save And for Material-Moment-Adapter: npm i @angular/material-moment-adapter How ...

compileOnSave has ceased to function

After successfully building my ng4 project with "@angular/material": "^2.0.0-beta.6" and having the compileOnSave feature work fine, I decided to add the following dependencies: "@ngx-translate/core": "^8.0.0", "@ngx-translate/http-loader": "^2.0.0", "an ...