ngx-core-components-workspace documentation

ngx-core-components

Angular 19+ component library — 110+ production-ready UI components built with signals, OnPush change detection, and zero runtime dependencies.

npm version CI Bundle Size License: MIT StackBlitz

✨ Highlights

  • 110+ components — 73 chart types, Data Grid, Gantt, Kanban, AI Chat, Scheduler, and more
  • Zero runtime dependencies — Pure SVG charts, no D3 or Chart.js required
  • Signals-first — Built entirely with input(), output(), signal(), computed()
  • Tree-shakable — 12 secondary entry points, import only what you need
  • Themeable — CSS custom properties (design tokens) with light/dark mode
  • Angular 19–21 — Supports current and next Angular versions

🚀 Interactive Playground & Docs

  • Live Sandbox Demo — Explore and test all 110+ components interactively.
  • Storybook Playground — Browse stories, inspect component inputs/outputs with controls, and verify accessibility.
  • Compodoc API Reference — Detailed class structures, injection tokens, type models, and method signatures.

📖 Documentation

The complete API reference tables and "How to Use" guides are also available in the ngx-core-components Library README.

Installation

Example :
npm install ngx-core-components

Components

Entry point Components
ngx-core-components Re-exports everything below
ngx-core-components/charts 73 chart types: Bar, Line, Pie, Area, Scatter, Gauge, Radar, Heatmap, Treemap, Sankey, Violin, Candlestick, Waterfall, Box Plot, Sunburst, Gantt, Bubble, Funnel, Marimekko, Pareto, Lollipop, Dumbbell, Slope, Ridgeline, Chord, Sankey, Dependency Wheel, Adjacency Matrix, Arc Diagram, Network Graph, Treegraph, Packed Bubble, Polar Area, Radial Bar, Wind Rose, Word Cloud, Venn, Pictorial, Parallel Coordinates, Streamgraph, Histogram, Bell Curve, Error Bar, Sparkline, Bullet, Combo — plus AI/ML charts (Embedding Space, Transformer Attention Heatmap, Token Streaming, Agentic Cognitive Topology) — financial charts (Candlestick, OHLC, HLC, Heikin-Ashi, Hollow Candlestick, Renko, Kagi, Point & Figure) — and geospatial maps (Choropleth, Geo Heatmap, Map Bubble, Map Line-Point, Tiled Web Map, Tilemap, Flowmap, Vector Plot)
ngx-core-components/inputs Textbox, Dropdown, Multi-select, Autocomplete, Checkbox, Radio, Date Picker, Date Range Picker, Time Picker, Slider, Switch, Rating, Numeric Textbox, Color Picker, File Upload, Tag Input, Signature Pad, Form Builder
ngx-core-components/grid Data Grid (sort, filter, group, paginate, inline edit, export) + Pivot Grid
ngx-core-components/views Tree View, List View, Kanban, Timeline, Scheduler, Virtual List, Org Chart, JSON Viewer, Calendar, Image Compare, Key-Value List
ngx-core-components/layout Card, Tab Strip, Accordion, Stepper, Splitter, Dashboard Layout, Carousel, Drawer
ngx-core-components/buttons Button, Button Group, Chip/Chip List, Split Button, Dropdown Button, Speed Dial
ngx-core-components/feedback Badge, Progress Bar, Skeleton, Notification, Alert, Avatar/Avatar Group, Stat Card, Countdown, Empty State
ngx-core-components/navigation Breadcrumb, Menu, Command Palette, Context Menu, Back-to-Top
ngx-core-components/dialog Dialog service + container
ngx-core-components/ai AI Chat, AI Chat Widget, AI Prompt Editor, AI Code Editor, AI Audio Wave, AI Model Compare, AI RAG Inspector
ngx-core-components/barcodes QR Code, Barcode

All components are standalone (no NgModules), use Angular Signals, and have OnPush change detection.

Quick Start

Gantt Chart

Example :
import { GanttChartComponent, GanttTask } from 'ngx-core-components/charts';

@Component({
  standalone: true,
  imports: [GanttChartComponent],
  template: `
    <ngx-gantt-chart [tasks]="tasks" style="height: 400px" />
  `,
})
export class MyComponent {
  tasks: GanttTask[] = [
    { id: '1', name: 'Design', start: new Date('2026-04-01'), end: new Date('2026-04-05'), progress: 100, parentId: null, collapsed: false, isMilestone: false },
    { id: '2', name: 'Development', start: new Date('2026-04-06'), end: new Date('2026-04-15'), progress: 40,  parentId: null, collapsed: false, isMilestone: false },
  ];
}

Supports advanced features like draggable glassmorphic zoom (Shift + drag), predecessor dependency linking, row virtualization, critical path calculations, and keyboard rescheduling/resizing. Refer to the library README for full documentation.

Dialog

Example :
import { DialogService } from 'ngx-core-components/dialog';

@Component({ /* ... */ })
export class MyComponent {
  constructor(private dialog: DialogService) {}

  open() {
    this.dialog.open({ title: 'Confirm', message: 'Are you sure?' });
  }
}

Textbox (Reactive Forms)

Example :
import { TextboxComponent } from 'ngx-core-components/inputs';

@Component({
  standalone: true,
  imports: [TextboxComponent, ReactiveFormsModule],
  template: `<ngx-textbox [formControl]="ctrl" label="Name" />`,
})
export class MyComponent {
  ctrl = new FormControl('');
}

Structured Inputs And Layout

Example :
import { Component, signal } from '@angular/core';
import { NumericTextBoxComponent, TimePickerComponent } from 'ngx-core-components/inputs';
import { SplitterComponent } from 'ngx-core-components/layout';

@Component({
  standalone: true,
  imports: [NumericTextBoxComponent, TimePickerComponent, SplitterComponent],
  template: `
    <ngx-numeric-textbox [value]="quantity()" [min]="0" [max]="10" (valueChange)="quantity.set($event)" />
    <ngx-time-picker [value]="meetingTime()" [use12h]="true" (timeChange)="meetingTime.set($event)" />

    <div style="height: 240px; border: 1px solid #e9ecef; overflow: hidden;">
      <ngx-splitter [size]="paneSize()" [min]="160" (sizeChange)="paneSize.set($event)">
        <div pane1>Navigation</div>
        <div pane2>Content</div>
      </ngx-splitter>
    </div>
  `,
})
export class MyComponent {
  quantity = signal(2);
  meetingTime = signal('14:30');
  paneSize = signal('35%');
}

NumericTextBoxComponent supports controlled values and keyboard stepping. TimePickerComponent accepts typed values like 14:30 or 2:30 PM and emits normalized HH:mm output.

List View Pagination

Example :
import { Component, signal } from '@angular/core';
import { ListViewComponent } from 'ngx-core-components/views';

@Component({
  standalone: true,
  imports: [ListViewComponent],
  template: `
    <ngx-list-view
      [items]="people"
      [pageSize]="5"
      (pageChange)="page.set($event.page)"
    />
  `,
})
export class MyListComponent {
  page = signal(1);
  people = Array.from({ length: 20 }, (_, index) => ({ name: `Person ${index + 1}` }));
}

Theming & Customization

All components expose CSS custom properties for simple Light, Dark, or custom brand integrations. Refer to THEMING.md for a full list of customization tokens and theme templates.

Example:

Example :
ngx-gantt-chart {
  --ngx-gantt-bar-bg: #27ae60;
  --ngx-gantt-today-color: #e74c3c;
  --ngx-gantt-header-bg: #2c3e50;
}

Contributing

We welcome contributions of all kinds! Please review our CONTRIBUTING.md for complete details on setting up the workspace locally, compiling libraries, and running Karma unit tests.

Issues and pull requests are welcome at github.com/prajaktadube/ngx-core-components.

License

MIT

results matching ""

    No results matching ""