open-index/open-npm huggingface dataset:
npm package: @fidurcode/dashboard-widgets-skeleton
Description: Reusable Angular components and services for building dynamic dashboard widgets with configurable options and layout support.
Latest version: 1.4.3

# @fidurcode/dashboard-widgets-skeleton

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

---

## 📦 Installation

```typescript
npm install @fidurcode/dashboard-widgets-skeleton
```
or
```typescript
yarn add @fidurcode/dashboard-widgets-skeleton
```

## 🚀 Usage

1. Import the module into your Angular application

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

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

Use components in your template

Example – Basic Widget

```typescript
<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

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

Where myWidgetSignal is an InputSignal<Widget> like:

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