# BaseWidgetComponent

**Kind:** Class

**Source:** `Frontend/src/app/components/dashboard/dashboard-libary/widgets/base-widget.component.ts` (line 4)

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

`BaseWidgetComponent` is the shared Angular base class for dashboard-library widgets. It centralizes widget data loading, change detection, and teardown through `loadData()`, `detectChanges()`, and `ngOnDestroy()`.

**Implements:** `OnDestroy`

## Methods

| Method | Signature | Returns |
|---|---|---|
| `loadData` | `loadData(observable: Observable<T>, callback: (data: T) => void)` | `void` |
| `detectChanges` | `detectChanges()` | `void` |
| `ngOnDestroy` | `ngOnDestroy()` | `void` |

## Properties

| Property | Type |
|---|---|
| `subscription` | `any` |
| `cdr` | `any` |
| `isLoading` | `any` |
| `isEmpty` | `any` |
| `hasError` | `any` |

## Where it refuses work

- `BaseWidgetComponent` stops the work with an early return when `value == null`.
- `BaseWidgetComponent` stops the work with an early return when `Array.isArray(value) && value.length === 0`.

## Diagram

```mermaid
graph LR
  Widget[Dashboard Widget] --> Base[BaseWidgetComponent]
  Base --> Load[loadData()]
  Base --> Changes[detectChanges()]
  Base --> Destroy[ngOnDestroy()]
```

## Usage

```ts
import { BaseWidgetComponent } from './base-widget.component';

export class SalesWidgetComponent extends BaseWidgetComponent {
  refresh(): void {
    this.loadData();
    this.detectChanges();
  }

  override ngOnDestroy(): void {
    super.ngOnDestroy();
  }
}
```

## AI Coding Instructions

- Extend `BaseWidgetComponent` for dashboard widgets that need shared loading and lifecycle behavior.
- Call `loadData()` after the widget configuration and inputs are ready.
- Call `detectChanges()` after asynchronous state updates that must appear in the view.
- Call `super.ngOnDestroy()` when overriding `ngOnDestroy()` in a derived widget.
- Keep widget-specific data mapping and rendering logic in the derived component.

## Used by

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

### Imported by (109)

- `BranchData` — `Frontend/src/app/components/dashboard/dashboard-libary/widgets/mrm-account-payable/mrm-account-payable.component.ts`:1
- `BranchData` — `Frontend/src/app/components/dashboard/dashboard-libary/widgets/mrm-account-receivable/mrm-account-receivable.component.ts`:1
- `BranchData` — `Frontend/src/app/components/dashboard/dashboard-libary/widgets/mrm-backlog-product-types/mrm-backlog-product-types.component.ts`:1
- `BranchData` — `Frontend/src/app/components/dashboard/dashboard-libary/widgets/mrm-booking-city/mrm-booking-city.component.ts`:1
- `BranchData` — `Frontend/src/app/components/dashboard/dashboard-libary/widgets/mrm-booking-product-types/mrm-booking-product-types.component.ts`:1
- `BranchData` — `Frontend/src/app/components/dashboard/dashboard-libary/widgets/mrm-booking-supplier/mrm-booking-supplier.component.ts`:1
- `BranchData` — `Frontend/src/app/components/dashboard/dashboard-libary/widgets/mrm-booking-teams/mrm-booking-teams.component.ts`:1
- `BranchData` — `Frontend/src/app/components/dashboard/dashboard-libary/widgets/mrm-cash-flow/mrm-cash-flow.component.ts`:1

…and 101 more.