Is there a way to interrupt the routerLink function when a user is prompted in Angular 4+?

Question

Is there a way to interrupt the routerLink function when a user is prompted in Angular 4+?

I am seeking to replicate the traditional functionality found in HTML where clicking a link triggers a confirmation pop-up before being redirected:

<a href='http://www.example.com' onclick="if ( window.confirm ('Are you sure you want to go there?') === false ) { return false; } ">goto example.com</a>

If the user clicks cancel, the browser remains on the current page. Simple and effective.

But how can this be achieved using Angular-based HTML? It seems the typical approach doesn't quite work:

<a routerLink='/go-there'> go </a>

As we've seen, adding an onclick event like above does not produce the desired result.

<a routerLink='/go-there' onclick="if ( window.confirm ('Are you sure you want to go there?') === false ) { return false; } "> go </a>

Currently, I'm handling this in the .ts file while still utilizing routerLink, as shown below:

const user_approval = window.confirm ('Are you sure you want to go there?');
if ( !user_approval ) {
  alert('Action is cancelled. \nYou are not going there.');
  return false;
}

This method works but only after the routerLink has already been activated, which could have been avoided.

So, how can we prevent the routerLink destination from being accessed if the user changes their mind about proceeding?

angular typescript

Answer 1

Answer №1

It's recommended to approach this task differently. To begin, delete routerLink from your HTML and utilize (click) instead of onclick :

<a (click)="check()">GO</a>

In your component, incorporate the Angular router module:

import { Router } from '@angular/router';

constructor(private router: Router) {}

  check() {
    const user_approval = window.confirm ('Are you sure you want to go there?');
      if ( !user_approval ) {
          alert('Action is cancelled. \nYou are not going there.');
          return false;
      } else {
          this.router.navigate(['/go-there']);
      }
  }

This method ensures that the function is executed based on the user's decision to navigate or not.

Answer 2

It's recommended to approach this task differently. To begin, delete routerLink from your HTML and utilize (click) instead of onclick :

<a (click)="check()">GO</a>

In your component, incorporate the Angular router module:

import { Router } from '@angular/router';

constructor(private router: Router) {}

  check() {
    const user_approval = window.confirm ('Are you sure you want to go there?');
      if ( !user_approval ) {
          alert('Action is cancelled. \nYou are not going there.');
          return false;
      } else {
          this.router.navigate(['/go-there']);
      }
  }

This method ensures that the function is executed based on the user's decision to navigate or not.

Answer 3

Answer №2

If you're looking for an alternative to using the click method + this.router.navigate, consider implementing a CanDeactivate Guard on the specific route where you want to include a prompt. (https://angular.io/api/router/CanDeactivate)

@Injectable()
export class CanDeactivateGuard implements CanDeactivate {

    constructor(){}

    canDeactivate(): boolean {
        let confirm = window.confirm('Are you sure you want to go there?');
        return confirm;
    }
}

This code snippet serves as a basic example of how to create a canDeactivate guard. For a live demonstration, check out this plnkr: (https://plnkr.co/edit/CW9ofxscCgaZMlWVrfer?p=preview)

Keep in mind that as you delve into more advanced prompt implementations, they are likely to be asynchronous. In such cases, it's recommended to encapsulate your implementation within an observable.

canDeactivate(): Observable<boolean> {
    return new Observable(observer => {
        // Example of an asynchronous prompt implementation
        bringUpSomePrompt('Are you sure you want to go there?', (confirm) => {
            observer.next(confirm);
            observer.complete();
        });
    });
}

Answer 4

If you're looking for an alternative to using the click method + this.router.navigate, consider implementing a CanDeactivate Guard on the specific route where you want to include a prompt. (https://angular.io/api/router/CanDeactivate)

@Injectable()
export class CanDeactivateGuard implements CanDeactivate {

    constructor(){}

    canDeactivate(): boolean {
        let confirm = window.confirm('Are you sure you want to go there?');
        return confirm;
    }
}

This code snippet serves as a basic example of how to create a canDeactivate guard. For a live demonstration, check out this plnkr: (https://plnkr.co/edit/CW9ofxscCgaZMlWVrfer?p=preview)

Keep in mind that as you delve into more advanced prompt implementations, they are likely to be asynchronous. In such cases, it's recommended to encapsulate your implementation within an observable.

canDeactivate(): Observable<boolean> {
    return new Observable(observer => {
        // Example of an asynchronous prompt implementation
        bringUpSomePrompt('Are you sure you want to go there?', (confirm) => {
            observer.next(confirm);
            observer.complete();
        });
    });
}

Is there a way to interrupt the routerLink function when a user is prompted in Angular 4+?

Answer №1

Answer №2

Similar questions

Issue with index creation using the @index decorator in Typegoose with NestJS and MongoDB

Is there a way to position the Image component from next/image using absolute positioning?

What sets the do/tap operator apart from other observable operators?

Having trouble with combining two formgroups using concat in an Angular application

Jodit-React: Addressing the Placeholder Problem

Both radio buttons are being chosen simultaneously

Oops! The type '{}' is lacking the properties listed below

Using React to display an HTTP response containing text or HTML content

Tips for effectively utilizing the Ngrx navigation function

The issue arises when attempting to apply CSS styles to an existing component or body tag,

Enhance your UI experience with a beautifully styled button using Material-

Deploying Angular application on IIS results in errors specific to the IIS environment

Select the implied type from a resolved Promise type in Typescript

ngFor is failing to show the array data, which is being fetched from Firebase

Deducting days, hours, and more from the current time using Angular 2

Having trouble with validation messages not displaying correctly in Angular after removing a value. What is the correct approach to fix this issue

Is there a way to programmatically add a timestamp to a form in Angular6?

Assess the equation twice using angular measurement

What is the process for integrating unit tests from external sources into an Angular project following an upgrade to version 15

Angular Material conflicting dependencies