@bimetal/gantt-angular-components

The default Angular Gantt chart for BIMETAL — a thin binding over the canonical @bimetal/gantt-headless controller. Every interaction decision (drag snapping, dependency validity, scale/ticks, input parsing, the critical-path diagnostic) lives in the controller; this package owns only the DOM: hit-testing pointer drags, normalising keys, and rendering. Ships as standalone components.

Features

• Real drag — move a bar, resize either edge, drag the progress dot, or pull a dependency link from the connector. No nudge buttons.
• Keyboard a11y — focus a bar, ←/→ to move, Shift+←/→ to resize, Enter to edit, Delete to remove.
• Zoom hour → quarter; a controller-derived date header (pxPerUnit/ticks come from the controller — the renderer never defines its own scale).
• Milestones (zero-length tasks render as diamonds), a today marker, and dependency arrows (FS/SS/FF/SF + lag) with a critical-path highlight.
• Task grid (Vorgang/Start/Ende/Tage/%) with hierarchy, collapse, indent and row reorder; a task dialog (title/start/end/%), undo toast, light/dark.

Event-sourced: the whole chart is one aggregate, every change is an event, and undo + full history come for free.

Usage

import { Component } from '@angular/core';
import { GanttComponent } from '@bimetal/gantt-angular-components';
import { createGanttStore } from '@bimetal/gantt-data';
import '@bimetal/gantt-angular-components/styles';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [GanttComponent],
  template: `<bm-gantt [store]="store" chartId="chart-1"></bm-gantt>`,
})
export class AppComponent {
  store = createGanttStore();
  // …seed the chart…
}

The component is bm-gantt. Pass [darkMode]="true" for the dark token set, [config] for locale overrides, [scale] for the initial zoom, and [onError] to surface infrastructure errors.

License

PolyForm-Noncommercial-1.0.0