BaseWidgetComponent

Kind: Class

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

Part of: Frontend

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

Properties

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.