> For the complete documentation index, see [llms.txt](https://eleven-fifty-academy.gitbook.io/dotnet-302-core/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://eleven-fifty-academy.gitbook.io/dotnet-302-core/7-editing-profiles-and-uploading-photos/7.2-add-candeactivate-guard.md).

# 7.2: Add CanDeactivate Guard

Right now, if our user is editing their profile and they click away - all of their changes will be lost.

We can add a guard that sends a dialogue box asking them to confirm if they want to navigate away and lose their changes. Instead of a guard to protect a route form being activated as we've done previously - we can add a guard that prevents a route from being **deactivated**.

## Adding Guard

In the guards folder, add a new file called `prevent-unsaved-changes.guard.ts`.

```typescript
@Injectable()
export class PreventUnsavedChanges implements CanDeactivate<MemberEditComponent> {

    canDeactivate(component: MemberEditComponent) {
        if (component.editForm.dirty) {
            return confirm('Are you sure you want to continue? Any unsaved changes will be lost.');
        }
        return true;
    }
}
```

We'll also need to import it into our `app.module.ts` file and add it to the providers array:

```typescript
import { PreventUnsavedChanges } from './guards/prevent-unsaved-changes.guard';

//  ...

providers: [
    AuthService,
    UserService,
    AuthGuard,
    MemberDetailResolver,
    MemberListResolver,
    ErrorInterceptorProvider,
    AlertifyService,
    MemberEditResolver,
    PreventUnsavedChanges
],
```

## Adding Guard to Route

In `routes.ts`, add the new Guard to the MemberEditComponent route:

```typescript
children: [
    { path: 'members', component: MemberListComponent, resolve: {users: MemberListResolver } },
    { path: 'members/:id', component: MemberDetailComponent, resolve: { user: MemberDetailResolver }},
    { path: 'member/edit', component: MemberEditComponent,
        resolve: { user: MemberEditResolver }, canDeactivate: [PreventUnsavedChanges] },                    //  <--- Added
    { path: 'messages', component: MessagesComponent },
    { path: 'followers', component: FollowersComponent },
]
```