@fidurcode/dashboard-widgets-skeleton

Reusable Angular components and services for building dynamic dashboard widgets with configurable options and layout support.

📦 Installation

npm install @fidurcode/dashboard-widgets-skeleton

or

yarn add @fidurcode/dashboard-widgets-skeleton

🚀 Usage

1. Import the module into your Angular application

import { DashboardWidgetsSkeletonModule } from '@fidurcode/dashboard-widgets-skeleton';

@NgModule({
  imports: [DashboardWidgetsSkeletonModule],
})
export class AppModule {}

Use components in your template

Example – Basic Widget

<fidurcode-dashboard-widgets 
  [widgets]="widgets">
</fidurcode-dashboard-widgets>

🧩 Components Overview

✅ WidgetComponent

A base wrapper component for displaying a dashboard widget dynamically via metadata and content projection.

Selector: app-widget

🔹 Inputs

| Name | Type | Required | Description | |----------|---------------------|----------|----------------------------------------------------------------------| | data | InputSignal<Widget> | ✅ Yes | Widget configuration object containing content, size, label, etc. |

🔸 Outputs

None exposed publicly.

🔧 Derived/Computed Properties

| Property | Type | Description | |--------------|----------|-----------------------------------------------------------------------------| | gridArea | string | Computed layout string for defining CSS grid placement based on widget size |

🧱 Example

<app-widget [data]="myWidgetSignal" />

Where myWidgetSignal is an InputSignal like:

signal<Widget>({
  id: 1,
  label: 'Custom Component',
  content: CustomComponent,
  rows: 2,
  columns: 3,
});