How to parse data from component into Guard in Angular

Question

I want to show a prompt on screen to the user if they are trying to navigate away from a page in which they have made changes to a form. I have created a Guard so far, and successfully got it to log something in the console when the user navigates away from this page. But now, I need to show a Dialog box warning them, and they should be able to cancel the 'navigation' or confirm that they wish to navigate away.

I have a method in my component containing the form that checks whether or not changes have been made to the form, now I just need to implement the rest described above.

Here is my Guard:

import { Injectable } from '@angular/core';
import { CanDeactivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree } from '@angular/router';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class RouterGuardGuard implements CanDeactivate<unknown> {
  canDeactivate(
    component: unknown,
    currentRoute: ActivatedRouteSnapshot,
    currentState: RouterStateSnapshot,
    nextState?: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
    console.log('TESTING');

    return true;
  }

}

I have implemented the guard for my component inside my app-routing-module.ts as such:

  { path: 'users/edit/:id', canDeactivate: [RouterGuardGuard], component: UserEditorComponent },

So, if the user makes changes to the form inside of the UserEditorComponent I need to show a dialog box before the navigation occurs, I already have the component for this dialog box, which I use in different parts of my app.

Thanks

Richie nature · Accepted Answer · 2021-09-01T19:15:25.120

You need your canDeactivate method to be able to confirm the state of your components form. For that, one way you can do so is to create an interface that when implemented in your component class would return the user's decision to either leave or stay in the component.

In your guard, create an interface like so

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

In place of type unknown use the interface you have just created:

 export class RouterGuardGuard implements CanDeactivate<CanComponentDeactivate>{...}

..and then inside your canDeactivate method return:

  canDeactivate(
    component: CanComponentDeactivate,
    currentRoute: ActivatedRouteSnapshot,
    currentState: RouterStateSnapshot,
    nextState?: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
    return component.canDeactivate();
  }

Now in your component, you need to implement the interface canComponentDeactivate that you have created. So inside the canDeactivate method that you implement from the interface, access your form and check if it is touched or dirty. If so prompt the user and return promise<boolean> or boolean. E.g

canDeactivate() {
 if (this.myForm.dirty || this.myForm.touched) {
      return new Promise((resolve) => {
        this.modalService.create({
          content:
            "Your have unsaved changes. Are you sure you want to return?",
          onOk: () => {
            resolve(true);
          },
          onCancel: () => {
            resolve(false);
          },
        });
      });
 }
}

Thank you very much, that looks like it makes sense, I am away from my computer at the moment, I will update you once I have implemented it. Thanks again. — TreyBCollier, Aug 31 '21 at 16:19
Hi @Richie nature would you mind elaborating on your last point a bit for me? When you say implement the interface ``canComponentDeactivate``, do you mean inside the component in which my form is? I would assume you mean for example ``export class formComponent implements OnInit, canComponentDeactivate``, but then I am not sure what you mean by "inside the ``CanDeactivate`` method" — TreyBCollier, Sep 01 '21 at 08:50
When you indicate in your class that you are implementing the `canComponentDeactivate` interface as you have done in your comment above, you would be required to define the method of that interface which in this case is the `canDeactivate` method. so in your component class: `canDeactivate() { //do your form check as i indicated in my answer }` I have made an edit to my answer as well — Richie nature, Sep 01 '21 at 19:11
thanks a lot, I implemented your solution and it worked as I wanted it to. I Appreciate the help. — TreyBCollier, Sep 02 '21 at 09:08

How to parse data from component into Guard in Angular

1 Answers1