# ComponentCanDeactivate

**Kind:** Class

**Source:** `Frontend/src/app/pipes/CanDeactivateGuard.ts` (line 6)

**Part of:** [Frontend](subsystem-frontend-src-app)

`ComponentCanDeactivate` defines a component contract for navigation checks. Its `canDeactivate()` method returns a boolean that indicates whether the current component may be deactivated.

## Methods

| Method | Signature | Returns |
|---|---|---|
| `canDeactivate` | `canDeactivate(nextUrl: RouterStateSnapshot)` | `boolean` |

## Diagram

```mermaid
graph LR
  Component[Component] --> Contract[ComponentCanDeactivate]
  Contract --> Check[canDeactivate()]
  Check --> Result[boolean result]
  Result --> Navigation[Navigation decision]
```

## Usage

```ts
import { ComponentCanDeactivate } from './pipes/CanDeactivateGuard';

function canLeaveComponent(component: ComponentCanDeactivate): boolean {
  return component.canDeactivate();
}

// Call this before navigating away from a component.
const allowed = canLeaveComponent(currentComponent);
```

## AI Coding Instructions

- Implement `canDeactivate()` on components that need to control whether navigation can continue.
- Return `true` when the component can be deactivated and `false` when navigation should be blocked.
- Keep `canDeactivate()` focused on the navigation decision rather than changing component state.
- Connect guard logic to this method so route changes use the component’s returned boolean.

## Used by

31 references from 31 files. Each is a place in this repository where the symbol is actually used — go read one rather than trusting an example.

### Imported by (31)

- `MrqDetailsComponent` — `Frontend/src/app/components/MRQ/mrq-details/mrq-details.component.ts`:1
- `BillingSettingsComponent` — `Frontend/src/app/components/configuration/billing-settings/billing-settings.component.ts`:1
- `NewBranchComponent` — `Frontend/src/app/components/configuration/company/main-branch/new.branch.component.ts`:1
- `CustomFieldsComponent` — `Frontend/src/app/components/configuration/custom-fields/custom-fields.component.ts`:1
- `DashboardSettingsDetailsComponent` — `Frontend/src/app/components/configuration/dashboard-settings/dashboard-settings-details/dashboard-settings-details.component.ts`:1
- `DoubleWayAuthenticationComponent` — `Frontend/src/app/components/configuration/double-way-authentication/double-way-authentication.component.ts`:1
- `DynamicValidationComponent` — `Frontend/src/app/components/configuration/dynamic-validation/dynamic-validation.component.ts`:1
- `IntegrationWithCrmsComponent` — `Frontend/src/app/components/configuration/integration-with-crms/integration-with-crms.component.ts`:1

…and 23 more.