# @bimetal/angular-components

Angular calendar UI components — month, week, day, and agenda views with drag & drop, event dialog, undo, and category filtering.

Built on the same headless architecture as `@bimetal/react-components`, `@bimetal/vue-components`, and `@bimetal/svelte-components`.

## Installation

```bash
npm install @bimetal/angular-components
```

## Quick Start

```typescript
import { Component } from '@angular/core';
import { CalendarComponent } from '@bimetal/angular-components';
import { createCalendarStore } from '@bimetal/calendar-data';
import '@bimetal/angular-components/styles';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CalendarComponent],
  template: `<cal-calendar [store]="store"></cal-calendar>`,
})
export class AppComponent {
  store = createCalendarStore();
}
```

## Inputs

| Input | Type | Description |
|-------|------|-------------|
| `store` | `CalendarStore` | Required. The event store. |
| `rules` | `CalendarRule[]` | Optional. Rules evaluated before dispatch. |
| `config` | `CalendarConfigInput` | Optional. Locale, timezone, categories, granularity. |
| `darkMode` | `boolean` | Optional. Dark theme. |
| `showCategoryFilter` | `boolean` | Optional. Show/hide category filter. Default: true. |

> Hinweis: Der Input heißt einheitlich `config` (früher `configInput`) — identisch zu React/Vue/Svelte.

## Architecture

Sämtliche Interaktionslogik liegt im kanonischen `createCalendarController` aus `@bimetal/headless`. Die Angular-Komponenten sind ein reines Binding: Sie konstruieren den Controller, abonnieren seinen Snapshot über den Angular-eigenen Service-/Signal-Layer (`@bimetal/angular`) und übersetzen Template-Events in Controller-Intents. Kein `if` in der Komponente — jede Entscheidung gehört dem Controller:

```
@bimetal/event-sourcing → @bimetal/calendar-data → @bimetal/calendar-rules → @bimetal/headless
@bimetal/core ───────────────────┘                                                  ↓
                                                                        @bimetal/angular (services)
                                                                                    ↓
                                                                  @bimetal/angular-components (UI)
```

Components are standalone (no NgModules), use Angular template syntax, and share CSS class names with React/Vue/Svelte for theme compatibility via `@bimetal/themes`.