Is it possible to track when a user switches to a different component in Angular?

Question

Is it possible to track when a user switches to a different component in Angular?

I'm looking to set up a confirmation popup when the user attempts to navigate to a different page. I've come across information about hostListener and canActivate, but I'm not exactly sure how to begin! Any guidance would be greatly appreciated. Thanks in advance.

angular typescript routes angular-material

Answer 1

Answer №1

To start, you must create a guard for routing by creating a file named can-exit.guard.ts


import {Injectable} from '@angular/core';
import {CanDeactivate} from '@angular/router';

import {Observable} from 'rxjs';

export interface CanExit {
  canDeactivate: () => Observable<boolean> | Promise<boolean> | boolean;
}

@Injectable()
export class CanExitGuard implements CanDeactivate<CanExit> {
  canDeactivate(component: CanExit) {
    if (component.canDeactivate) {
      return component.canDeactivate();
    }
    return true;
  }
}

Next, create another file named canExit.ts to handle returning the promised value.

import {Observable} from 'rxjs';

export interface CanExit {
  canDeactivate: () => Observable<boolean> | Promise<boolean> | boolean;
}

Once you have added these files to your application, configure the router file as shown below:

const routes: Routes = [
  {
    path: 'your Path name',
    component: YourComponent ,
    canDeactivate: [CanExitGuard],
  }
];
// Apply this configuration to every path in your application

Make sure to include canactivate in your component file by making some changes:


import { CanExit } from './../can-exit.guard';  //important


@Component({
  // include your selector and component definitions here
})
export class YourComponent implements OnInit, CanExit {

  constructor() { }

  ngOnInit() {
  }

  canDeactivate(): Promise<any> | boolean {
    const confirmResult = confirm('Are you sure you want to leave this page ? ');
    if (confirmResult === true) {
      return true;
    } else {
      return false;
    }
  }

}

I hope this information proves helpful.

Answer 2

To start, you must create a guard for routing by creating a file named can-exit.guard.ts


import {Injectable} from '@angular/core';
import {CanDeactivate} from '@angular/router';

import {Observable} from 'rxjs';

export interface CanExit {
  canDeactivate: () => Observable<boolean> | Promise<boolean> | boolean;
}

@Injectable()
export class CanExitGuard implements CanDeactivate<CanExit> {
  canDeactivate(component: CanExit) {
    if (component.canDeactivate) {
      return component.canDeactivate();
    }
    return true;
  }
}

Next, create another file named canExit.ts to handle returning the promised value.

import {Observable} from 'rxjs';

export interface CanExit {
  canDeactivate: () => Observable<boolean> | Promise<boolean> | boolean;
}

Once you have added these files to your application, configure the router file as shown below:

const routes: Routes = [
  {
    path: 'your Path name',
    component: YourComponent ,
    canDeactivate: [CanExitGuard],
  }
];
// Apply this configuration to every path in your application

Make sure to include canactivate in your component file by making some changes:


import { CanExit } from './../can-exit.guard';  //important


@Component({
  // include your selector and component definitions here
})
export class YourComponent implements OnInit, CanExit {

  constructor() { }

  ngOnInit() {
  }

  canDeactivate(): Promise<any> | boolean {
    const confirmResult = confirm('Are you sure you want to leave this page ? ');
    if (confirmResult === true) {
      return true;
    } else {
      return false;
    }
  }

}

I hope this information proves helpful.

Is it possible to track when a user switches to a different component in Angular?

Answer №1

Similar questions

Ensuring the correct type for an object's interface property value

Page refreshing in Angular 5 consistently redirects to the home page instead of staying on the current page

Error in Typescript TS2322: Observable Type 'boolean | {}' - Using Angular 5 and Typescript 2.4.2

What is the best method to reset values in ngx-bootstrap date picker?

Using a custom TemplateRef in NgxDatatable

What is the essential setup needed for a bootstrap dropdown list?

React - retrieving the previous page's path after clicking the browser's "back" button

Derive a subset Union from a Union in Typescript

Issue encountered during ng2-redux installation

Steps for fixing the error message "Type 'Observable<string>' is not assignable to type 'Observable<{ userId: string; partyId: string; }>'"

Dealing with routing problems within sub-routes using Angular 2 and Express, attempting to serve content from sub-folders

Definition file in TypeScript for an npm package provided by an external source - constructor

What method can be used to start an Angular app without the need for recompilation?

Transforming a function into an array in TypeScript

Learn how to generate specific error messages based on the field that caused the failure of the @Column({ unique: true }) Decorator. Error code 23505

Is there a way to ensure that @angular/core is utilizing the most up-to-date version of zone.js in its peerDependencies configuration?

Issue: Unable to locate module: Error: The system is unable to find the src/app/app.component.css file?ngResource Angular

How do I set up middleware with async/await in NestJS?

Any ideas on how to fix the issue of 'type' property being absent in 'AsyncThunkAction' with Redux Toolkit while working with TypeScript?

Steps for transitioning a VUE JS project to TypeScript