ngx-core-components

Angular 19–21 standalone component library with enterprise-ready UI building blocks including a full-featured SVG Gantt Chart, inputs, data grid, dialogs, charts, navigation, layout, feedback, and barcode components.

Features

• Gantt chart with task bars, dependencies, milestones, drag/resize, zoom, and hierarchy
• Input controls including text, dropdown, multi-select, autocomplete, date/time, slider, switch, rating, and color picker
• Charts including bar, line, pie, donut, and sparkline
• Data presentation with grid, tree view, and list view
• Dialogs, tooltips, and popovers for overlays and contextual UI
• Buttons, chips, menus, breadcrumbs, tabs, cards, accordions, steppers, and splitters
• Feedback components including badge, progress bar, skeleton, and notifications
• Barcode and QR code generation with no external runtime dependency
• Fully themeable via CSS custom properties
• Zero runtime dependencies — only Angular peer dependencies
• OnPush change detection + Angular Signals
• Standalone components (no NgModules)

Installation

npm install ngx-core-components

Entry Points

You can import from the primary package for convenience:

import { GanttChartComponent, TextBoxComponent, DataGridComponent } from 'ngx-core-components';

Or use secondary entry points for more focused imports:

import { TextBoxComponent, DropdownComponent } from 'ngx-core-components/inputs';
import { BarChartComponent, GanttChartComponent } from 'ngx-core-components/charts';
import { DataGridComponent } from 'ngx-core-components/grid';
import { DialogService } from 'ngx-core-components/dialog';
import { ButtonComponent } from 'ngx-core-components/buttons';
import { CardComponent } from 'ngx-core-components/layout';
import { BadgeComponent } from 'ngx-core-components/feedback';
import { BreadcrumbComponent } from 'ngx-core-components/navigation';
import { TreeViewComponent, ListViewComponent } from 'ngx-core-components/views';
import { QrCodeComponent, BarcodeComponent } from 'ngx-core-components/barcodes';

Integration Guides

The inputs that implement ControlValueAccessor work with Angular Reactive Forms. Import ReactiveFormsModule and the control from its secondary entry point:

import { Component } from '@angular/core';
import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
import { TextBoxComponent } from 'ngx-core-components/inputs';

@Component({
  standalone: true,
  imports: [ReactiveFormsModule, TextBoxComponent],
  template: `
    <form [formGroup]="form">
      <ngx-textbox formControlName="email" label="Email" type="email" />
    </form>
  `,
})
export class ProfileFormComponent {
  readonly form = new FormGroup({
    email: new FormControl('', { nonNullable: true }),
  });
}

The library can be rendered in Angular SSR applications. Guard browser-only consumer code (for example clipboard, storage, or direct DOM work) with Angular's platform check:

import { isPlatformBrowser } from '@angular/common';
import { inject, Injectable, PLATFORM_ID } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class BrowserFeature {
  private readonly platformId = inject(PLATFORM_ID);

  copyText(text: string): Promise<void> | undefined {
    if (!isPlatformBrowser(this.platformId)) return undefined;
    return navigator.clipboard.writeText(text);
  }
}

For global tokens, presets, and generated CSS, see the theming guide. The focused imports above demonstrate tree-shakable secondary entry points.

Accessible Charts, Remote Grids, and Form Flows

Bar charts expose an accessible summary and a native data-table alternative. A custom label can replace the generated summary:

<ngx-bar-chart [categories]="quarters" [series]="revenue" ariaLabel="Quarterly revenue by region" />

Line charts expose a named SVG summary and keyboard-operable, labelled data points. Pie and donut slices expose keyboard-focusable graphics with accessible labels; focusing a slice reveals the same value tooltip as pointer hover. Both charts honor reduced-motion preferences. Text can be customized via the chart.lineChartDescription, chart.lineChartNoData, chart.linePointDescription, and chart.pieSliceDescription translations.

Scatter plots expose a localized summary and keyboard-focusable data points. Focusing a point reveals its tooltip; its accessible name includes the point label, group, and formatted axis values. Scatter-point animations honor reduced motion. Customize this text with chart.scatterChartDescription and chart.scatterPointDescription.

Waterfall bars and sunburst slices expose localized accessible names and focus tooltips. Treemap cells are keyboard-operable buttons with focus feedback and the same tooltip and activation behavior as pointer interaction. Treemap and sunburst exports use the shared localized, keyboard-accessible chart export menu. Heatmap cells expose row/column/value labels, focus tooltips, and keyboard activation through the same cell-selection output as pointer clicks. The chart.dataMarkDescription and chart.waterfallMarkDescription translations customize the generated data-mark names. Bubble points expose localized names including their label, group, coordinates, and size, with tooltips on focus; customize them with chart.bubblePointDescription. Lollipop marks are keyboard-focusable with localized data names, focus feedback, and tooltips. Dumbbell rows expose both endpoint values in their accessible names, with focus feedback and the same tooltip as pointer hover. Range bars expose keyboard- operable buttons whose activation emits the existing barClick output. Pyramid segments are named, keyboard-operable buttons with visible focus feedback and focus-triggered tooltips. Funnel stages expose localized names, keyboard focus, visible focus feedback, and the existing stage tooltip. Column-range marks expose series/category names with localized low/high values, focus feedback, and the existing tooltip on keyboard focus. Box-plot summaries expose all five statistical values to keyboard users; outlier marks are independently named and reveal their value tooltip on focus. Bullet charts make their actual-value and target marks individually named and keyboard-focusable. Radial progress rings expose their percentage and actual versus target values in an accessible name, and show the existing tooltip on focus. Marimekko segments expose column/category names, values, and a focus- triggered tooltip with visible keyboard focus feedback.

Use GridRemoteDataController for paged or server-filtered data. It exposes signal state for rows, totals, loading, and errors; a newer request cancels and supersedes an older request:

const controller = new GridRemoteDataController<Customer>();
const source: GridDataSource<Customer> = {
  load: async (request, signal) => {
    const response = await fetchCustomers(request, signal);
    return { items: response.items, total: response.total };
  },
};

await controller.load(source, {
  page: 1,
  pageSize: 25,
  sort: null,
  filters: [],
  group: null,
});

Grid saved views use versioned JSON and reject malformed or unsupported schemas when imported. FormBuilderField.formStep groups fields into steps, and an optional asyncValidator returns null when valid or a message to show next to the field:

{
  key: 'username',
  label: 'Username',
  formStep: 0,
  asyncValidator: async (value) =>
    (await usernameAvailable(String(value))) ? null : 'Username is unavailable',
}

Field conditions can show, hide, enable, or disable fields based on typed field values. Missing condition references and dependency cycles are announced above the form and block validation/submission until the schema is corrected.

With [showColumnChooser]="true", the grid exposes labelled controls to toggle column visibility, pin columns to either side, and move columns left or right without drag-and-drop. Keyboard users can Tab to each action and use the native button controls; Escape closes the chooser and restores focus to its trigger. Selectable grids give row checkboxes accessible names and announce the selected row count to screen readers. With dir="rtl", grid arrows and Kanban card movement follow the visual left/right direction. When [keyboardNavigation]="true", the labelled grid region can receive focus and arrow keys move focus between cells. Tab moves between cells but exits the grid at either end; toolbar buttons and other interactive controls retain their native key behavior. Filter and context popovers receive focus when opened and return focus to their trigger or cell on Escape. The Advanced Filter Builder is exposed as a labelled modal dialog with focus trapping and Escape dismissal, and restores focus to its trigger when closed. Grid toolbar, grouping, filter, export, and row-action labels are provided by the grid translations in NGX_CORE_I18N.

The barcode component renders standards-compliant Code 128-B for printable ASCII values (space through ~), including the weighted checksum. Unsupported input produces an accessible error instead of a pseudo-barcode. The library test suite also decodes generated module patterns with ZXing, a development-only dependency; the published component has no added runtime dependency.

provideNgxI18n accepts nested partial translations, merges them with the English fallback, and is exported alongside DeepPartial for locale definitions from ngx-core-components/i18n.

Consumer tests can import NgxComponentTestHarness from ngx-core-components/testing to set component inputs and query rendered elements without depending on private component internals:

import { NgxComponentTestHarness } from 'ngx-core-components/testing';

const fixture = TestBed.createComponent(MyComponent);
const harness = new NgxComponentTestHarness(fixture);
harness.setInput('disabled', true);
harness.detectChanges();
expect(harness.query('button')?.hasAttribute('disabled')).toBeTrue();

Component Highlights

This is a representative component index, not an exhaustive catalogue. The root README is the source of truth for the complete component list by public secondary entry point, including i18n and testing.

Charts

• GanttChartComponent
• BarChartComponent
• LineChartComponent
• PieChartComponent
• SparklineComponent
• AgenticCognitiveTopologyComponent
• TokenStreamingChartComponent
• EmbeddingSpaceProjectionComponent
• TransformerAttentionHeatmapComponent

Inputs

• TextBoxComponent
• CheckboxComponent
• RadioGroupComponent
• DropdownComponent
• MultiSelectComponent
• AutocompleteComponent
• DatePickerComponent
• SliderComponent
• SwitchComponent
• RatingComponent
• NumericTextBoxComponent
• TextareaComponent
• ColorPickerComponent
• TimePickerComponent
• DateRangePickerComponent

Data Views

• DataGridComponent
• TreeViewComponent
• ListViewComponent

Dialog and Overlay

• DialogService
• DialogContainerComponent
• TooltipDirective
• PopoverComponent

Buttons and Actions

• ButtonComponent
• ButtonGroupComponent
• ChipComponent
• ChipListComponent
• SplitButtonComponent
• DropDownButtonComponent

Layout

• CardComponent
• TabStripComponent
• TabComponent
• AccordionComponent
• StepperComponent
• SplitterComponent

Feedback

• BadgeComponent
• ProgressBarComponent
• SkeletonComponent
• NotificationService
• NotificationContainerComponent

Navigation

• BreadcrumbComponent
• MenuComponent

Barcodes

• QrCodeComponent
• BarcodeComponent

Quick Start

Gantt Chart

import { Component } from '@angular/core';
import { GanttChartComponent, GanttTask, GanttDependency, DependencyType } from 'ngx-core-components';

@Component({
  standalone: true,
  imports: [GanttChartComponent],
  template: `
    <ngx-gantt-chart
      [tasks]="tasks"
      [dependencies]="dependencies"
      [config]="{ zoomLevel: 'day', rowHeight: 40 }"
      (taskChange)="onTaskChange($event)"
      (taskClick)="onTaskClick($event)"
    />
  `,
  styles: [
    `
      ngx-gantt-chart {
        height: 500px;
      }
    `,
  ],
})
export class MyComponent {
  tasks: GanttTask[] = [
    {
      id: '1',
      name: 'Design',
      progress: 100,
      start: new Date('2026-04-01'),
      end: new Date('2026-04-05'),
      parentId: null,
      collapsed: false,
      isMilestone: false,
    },
    {
      id: '2',
      name: 'Development',
      progress: 40,
      start: new Date('2026-04-06'),
      end: new Date('2026-04-15'),
      parentId: null,
      collapsed: false,
      isMilestone: false,
    },
  ];

  dependencies: GanttDependency[] = [{ fromId: '1', toId: '2', type: DependencyType.FinishToStart }];

  onTaskChange(event: any) {
    /* handle drag/resize */
  }
  onTaskClick(event: any) {
    /* handle click */
  }
}

Form Controls

import { Component, signal } from '@angular/core';
import { TextBoxComponent, DropdownComponent, type DropdownOption } from 'ngx-core-components';

@Component({
  standalone: true,
  imports: [TextBoxComponent, DropdownComponent],
  template: `
    <ngx-textbox [value]="name()" label="Full Name" placeholder="Enter your name" (valueChange)="name.set($event)" />

    <ngx-dropdown
      [options]="countries"
      [value]="country()"
      label="Country"
      placeholder="Select country"
      (valueChange)="country.set($event)"
    />
  `,
})
export class MyFormComponent {
  name = signal('');
  country = signal<unknown>(null);

  countries: DropdownOption[] = [
    { label: 'United States', value: 'us' },
    { label: 'Germany', value: 'de' },
    { label: 'Japan', value: 'jp' },
  ];
}

Structured Inputs

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

@Component({
  standalone: true,
  imports: [NumericTextBoxComponent, TimePickerComponent],
  template: `
    <ngx-numeric-textbox
      [value]="quantity()"
      label="Quantity"
      [min]="0"
      [max]="25"
      [step]="1"
      (valueChange)="quantity.set($event)"
    />

    <ngx-time-picker
      [value]="meetingTime()"
      label="Meeting Time"
      [use12h]="true"
      (timeChange)="meetingTime.set($event)"
    />
  `,
})
export class MyStructuredInputsComponent {
  quantity = signal(3);
  meetingTime = signal('14:30');
}

NumericTextBoxComponent supports controlled values and keyboard stepping with the up and down arrow keys. TimePickerComponent accepts typed input such as 14:30 or 2:30 PM and normalizes emitted values to HH:mm.

List View

import { Component, computed, signal } from '@angular/core';
import { ListViewComponent, type ListViewPageChangeEvent } from 'ngx-core-components/views';

@Component({
  standalone: true,
  imports: [ListViewComponent],
  template: `
    <ngx-list-view
      [items]="filteredPeople()"
      [pageSize]="5"
      [selectable]="true"
      (pageChange)="onPageChange($event)"
      (selectionChange)="selected.set($event.selectedItems)"
    />
  `,
})
export class MyListComponent {
  search = signal('');
  selected = signal<unknown[]>([]);
  people = [
    { name: 'Alice', dept: 'Engineering' },
    { name: 'Bob', dept: 'Product' },
  ];

  filteredPeople = computed(() => this.people);

  onPageChange(event: ListViewPageChangeEvent): void {
    console.log(event.page, event.totalPages);
  }
}

Splitter

import { Component, signal } from '@angular/core';
import { SplitterComponent } from 'ngx-core-components/layout';

@Component({
  standalone: true,
  imports: [SplitterComponent],
  template: `
    <div style="height: 320px; border: 1px solid #e9ecef; overflow: hidden;">
      <ngx-splitter [size]="paneSize()" [min]="180" (sizeChange)="paneSize.set($event)">
        <div pane1>Navigation</div>
        <div pane2>Content</div>
      </ngx-splitter>
    </div>
  `,
})
export class MyLayoutComponent {
  paneSize = signal('35%');
}

Data Grid

import { Component } from '@angular/core';
import { DataGridComponent, type GridColumnDef } from 'ngx-core-components';

@Component({
  standalone: true,
  imports: [DataGridComponent],
  template: `<ngx-data-grid [data]="rows" [columns]="columns" [pageSize]="5" />`,
})
export class MyGridComponent {
  columns: GridColumnDef[] = [
    { field: 'id', title: 'ID', width: 80 },
    { field: 'name', title: 'Name', sortable: true },
    { field: 'status', title: 'Status' },
  ];

  rows = [
    { id: 1, name: 'Alpha', status: 'Active' },
    { id: 2, name: 'Beta', status: 'Paused' },
  ];
}

Component API Reference & Guides

This section provides complete documentation, detailed API reference tables (Inputs, Outputs, and Public Methods), and "How to Use" guidelines for all components in the library. All component inputs and outputs are signal-based.

Charts

How to Use Charts

import { Component } from '@angular/core';
import {
  BarChartComponent,
  LineChartComponent,
  PieChartComponent,
  SparklineComponent,
  GanttChartComponent,
} from 'ngx-core-components/charts';

@Component({
  standalone: true,
  imports: [BarChartComponent, LineChartComponent, PieChartComponent, SparklineComponent, GanttChartComponent],
  template: `
    <!-- Bar Chart -->
    <ngx-bar-chart [series]="barSeries" [categories]="categories" title="Monthly Sales" />

    <!-- Line Chart -->
    <ngx-line-chart [series]="lineSeries" [categories]="categories" [showArea]="true" />

    <!-- Pie Chart -->
    <ngx-pie-chart [data]="pieData" mode="donut" centerTitle="Visits" />

    <!-- Sparkline -->
    <ngx-sparkline [data]="[10, 15, 8, 22, 14, 25]" type="area" color="#2ecc71" />
  `,
})
export class ChartsExampleComponent {
  categories = ['Q1', 'Q2', 'Q3', 'Q4'];
  barSeries = [{ name: 'Online', data: [120, 180, 240, 300] }];
  lineSeries = [{ name: 'Active Users', data: [450, 620, 810, 950] }];
  pieData = [
    { label: 'Search', value: 55 },
    { label: 'Direct', value: 30 },
    { label: 'Social', value: 15 },
  ];
}

GanttChartComponent (ngx-gantt-chart)

Inputs

| Input | Type | Default | Description | | ------------------ | ---------------------- | ------------ | ---------------------------------------------- | | tasks | GanttTask[] | required | Array of tasks to display | | dependencies | GanttDependency[] | [] | Predecessor/successor dependencies | | config | Partial<GanttConfig> | {} | Config settings (zoom level, column/row sizes) | | groups | GanttGroup[] | [] | Group tasks by category or assignee | | baselineItems | GanttBaselineItem[] | [] | Baseline bars for progress comparisons | | tooltipTemplate | TemplateRef<...> | null | Custom tooltip template reference | | enableDragToZoom | boolean | false | Enable drag-to-zoom timeline selection |

Outputs

| Output | Type | Description | | ----------------- | ---------------------------- | --------------------------------------------------------------------- | | taskChange | GanttTaskChangeEvent | Emitted when task dates or progress are changed via dragging/resizing | | taskClick | GanttTaskClickEvent | Emitted when a task bar is clicked | | taskDblClick | GanttTaskClickEvent | Emitted when a task bar is double clicked | | dependencyClick | GanttDependencyClickEvent | Emitted when a dependency connector line is clicked | | zoomChange | ZoomLevel | Emitted when the active zoom level shifts | | zoomRangeChange | { start: Date; end: Date } | Emitted when a drag-zoom range is selected | | selectedChange | GanttSelectedEvent | Emitted when selected tasks change | | expandChange | GanttExpandChangeEvent | Emitted when a task or group node collapses/expands | | loadOnScroll | GanttLoadOnScrollEvent | Emitted when horizontal scroll reaches close to ends (lazy loading) |

Public Methods

| Method | Signature | Description | | -------------------- | ------------------------------------ | ---------------------------------------------- | | scrollToToday | (): void | Scroll view to current date | | scrollToDate | (date: Date): void | Scroll view to a specific date | | scrollToTask | (taskId: string): void | Scroll vertically to focus a specific task row | | expandAll | (): void | Expand all collapsed rows | | collapseAll | (): void | Collapse all expandable rows | | toggleCriticalPath | (): void | Toggle visibility of critical path tasks | | toggleAreaZoomMode | (): void | Toggle crosshair area-zoom selector | | resetZoom | (): void | Reset zoom to standard scale | | exportAsImage | (filename?: string): Promise<void> | Export Gantt view to PNG download |

GanttConfig Interface

interface GanttConfig {
  zoomLevel: 'hour' | 'day' | 'week' | 'month' | 'quarter' | 'year';
  rowHeight: number;
  columnWidth: number;
  sidebarWidth: number;
  headerHeight: number;
  showTodayMarker: boolean;
  showGrid: boolean;
  collapsible: boolean;
  snapTo: 'hour' | 'day' | 'week' | 'month';
  locale: string;
}

GanttTask Interface

interface GanttTask {
  id: string;
  name: string;
  start: Date;
  end: Date;
  progress: number;
  parentId: string | null;
  collapsed?: boolean;
  isMilestone?: boolean;
  color?: string;
  draggable?: boolean;
  cssClass?: string;
  meta?: Record<string, unknown>;
}

BarChartComponent (ngx-bar-chart)

Inputs

| Input | Type | Default | Description | | ------------ | --------------- | ------- | ------------------------------ | | series | ChartSeries[] | [] | Array of series data objects | | categories | string[] | [] | X-axis labels | | height | number | 260 | SVG height in pixels | | showGrid | boolean | true | Show horizontal grid lines | | showLabels | boolean | false | Show value label above bars | | showLegend | boolean | true | Show color legend indicators | | colors | string[] | theme | Custom color palette overrides |

LineChartComponent (ngx-line-chart)

Inputs

| Input | Type | Default | Description | | ------------- | --------------- | ------- | ------------------------------------ | | series | ChartSeries[] | [] | Array of line series data | | categories | string[] | [] | X-axis labels | | height | number | 260 | SVG height | | showGrid | boolean | true | Show horizontal grid lines | | showArea | boolean | false | Show area fill gradients below lines | | showMarkers | boolean | true | Show circles on data points | | showLegend | boolean | true | Show color legends | | colors | string[] | theme | Custom color palette |

PieChartComponent (ngx-pie-chart)

Inputs

| Input | Type | Default | Description | | --------------- | ------------------ | --------- | ---------------------------------------- | | data | ChartDataPoint[] | [] | Array of slice data objects | | mode | 'pie' \| 'donut' | 'pie' | Chart layout variant | | donutHoleSize | number | 0.55 | Inner circle size ratio for donut charts | | height | number | 240 | SVG size (width & height) | | showLegend | boolean | true | Show Legend beside chart | | showLabels | boolean | true | Show percentage label on slices | | centerTitle | string | 'Total' | Donut center placeholder text | | colors | string[] | theme | Color palette overrides |

SparklineComponent (ngx-sparkline)

Inputs

| Input | Type | Default | Description | | -------- | --------------------------- | ----------- | -------------------- | | data | number[] | [] | Numeric trend values | | type | 'line' \| 'bar' \| 'area' | 'line' | Display style | | color | string | '#4a90d9' | Stroke or fill color | | width | number | 120 | SVG width | | height | number | 36 | SVG height |

AgenticCognitiveTopologyComponent (ngx-agentic-cognitive-topology)

A dynamic visual representation of an agentic cognitive workflow (directed acyclic graph) supporting real-time interaction, automatic level sorting layouts, snapping grid alignment, properties modal editing, and drag-and-drop link creation.

Inputs

| Input | Type | Default | Description | | ------------ | ---------------- | -------------- | -------------------------------- | | nodes | TopologyNode[] | required | List of workflow nodes | | links | TopologyLink[] | required | Directed edges between nodes | | width | number | 650 | SVG width | | height | number | 450 | SVG height | | colors | string[] | CHART_COLORS | Custom node color palette | | showExport | boolean | true | Show export options dropdown | | editable | boolean | false | Enable interactive canvas editor | | gridSize | number | 20 | Size of snap-to-grid alignment |

Outputs

| Output | Type | Description | | -------------------- | ------------------------------------------ | -------------------------------------------------------------------------------- | | nodeActionClick | { nodeId: string; action: string } | Emitted when an action is selected in the node tooltip | | nodePositionChange | { nodeId: string; x: number; y: number } | Emitted when a node is dragged and repositioned | | nodesChange | TopologyNode[] | Emitted in edit mode when nodes are added, edited, or deleted | | linksChange | TopologyLink[] | Emitted in edit mode when links are added or deleted | | validationError | string | Emitted when editor validations (e.g. cycles) are violated or copy notices occur |

Public Methods

| Method | Signature | Description | | ---------------------- | ---------- | ----------------------------------------------------------------------------------- | | autoLayout | (): void | Clear all overrides and automatically arrange nodes using topological layer sorting | | undo | (): void | Undo the last editor action | | redo | (): void | Redo the last undone editor action | | exportWorkflowSchema | (): void | Copies the current workflow layout as a LangGraph-compatible JSON schema |

TokenStreamingChartComponent (ngx-token-streaming-chart)

Real-time streaming chart optimized for rendering active LLM token generation metrics, showing speed (tokens per second), latency, and dynamic target highlights.

Inputs

| Input | Type | Default | Description | | ----------- | ---------------- | ------- | ---------------------------------- | | data | number[] | [] | Sequential generation speed values | | height | number | 180 | Chart height in pixels | | threshold | number \| null | null | Optional threshold alert limit | | showGrid | boolean | true | Render horizontal grid lines |

Public Methods

| Method | Signature | Description | | ------------- | ----------------------------- | --------------------------------- | | setPoints | (newPoints: number[]): void | Reset streaming points | | clearPoints | (): void | Clear all points and reset charts |

EmbeddingSpaceProjectionComponent (ngx-embedding-space-projection)

Interactive multi-dimensional vector space projection (scatterplot layout) supporting visual cluster selection, lasso path tracing, and target distance query helpers.

Inputs

| Input | Type | Default | Description | | -------- | ------------------ | ------------ | -------------------------------------- | | points | EmbeddingPoint[] | required | Coordinates and metadata of embeddings | | height | number | 360 | SVG container height |

Outputs

| Output | Type | Description | | ------------------- | ---------------------------------------------- | ---------------------------------------------------------------------- | | lassoSelected | string[] | Emitted with list of selected point IDs after drawing a lasso path | | agentQueryRequest | { selectedIds: string[]; queryType: string } | Emitted when triggering semantic action queries on selected embeddings |

TransformerAttentionHeatmapComponent (ngx-transformer-attention-heatmap)

Interactive visualization mapping matrix weights between input and output tokens across selected transformer attention heads, highlighting key focus weights.

Inputs

| Input | Type | Default | Description | | --------- | ------------ | ------------ | ----------------------------------------------- | | tokensX | string[] | required | Horizontal axis token strings | | tokensY | string[] | required | Vertical axis token strings | | weights | number[][] | required | M x N matrix representing attention intensities | | height | number | 300 | Grid container height |

Outputs

| Output | Type | Description | | ------------ | ------------------------------------------------------------------- | ----------------------------------------------------- | | cellClick | { row: number; col: number; weight: number } | Emitted when clicking an individual weight square | | agentQuery | { query: string; tokenY: string; tokenX: string; weight: number } | Emitted when triggering AI queries on cell highlights |

Inputs

How to Use Inputs (with Reactive Forms)

import { Component } from '@angular/core';
import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
import {
  TextBoxComponent,
  DropdownComponent,
  DatePickerComponent,
  NumericTextBoxComponent,
} from 'ngx-core-components/inputs';

@Component({
  standalone: true,
  imports: [ReactiveFormsModule, TextBoxComponent, DropdownComponent, DatePickerComponent, NumericTextBoxComponent],
  template: `
    <form [formGroup]="form">
      <ngx-textbox formControlName="username" label="Username" placeholder="Enter username" [clearable]="true" />
      <ngx-dropdown formControlName="role" label="Role" [options]="roles" />
      <ngx-date-picker formControlName="birthDate" label="Birth Date" />
      <ngx-numeric-textbox formControlName="age" label="Age" [min]="18" [max]="99" />
    </form>
  `,
})
export class FormComponent {
  roles = [
    { label: 'Admin', value: 'admin' },
    { label: 'User', value: 'user' },
  ];
  form = new FormGroup({
    username: new FormControl(''),
    role: new FormControl('user'),
    birthDate: new FormControl<Date | null>(null),
    age: new FormControl(18),
  });
}

TextBoxComponent (ngx-textbox)

Inputs

| Input | Type | Default | Description | | ---------------- | --------- | -------- | ----------------------------------- | | value | string | '' | Current string value | | label | string | '' | Floating/static label | | placeholder | string | '' | Placeholder text | | type | string | 'text' | HTML input type attribute | | disabled | boolean | false | Disabled state | | readonly | boolean | false | Read-only mode | | error | string | '' | Error message displayed below input | | hint | string | '' | Hint text displayed below input | | maxlength | number | 0 | Max characters allowed | | clearable | boolean | false | Show clear button | | showCharCount | boolean | false | Display character counter | | prefixIcon | string | '' | Text/icon shown before text | | suffixIcon | string | '' | Text/icon shown after text | | passwordToggle | boolean | false | Show password visibility eye icon |

Outputs

| Output | Type | Description | | ------------- | --------- | -------------------------------------------- | | valueChange | string | Emitted when value is changed | | focusChange | boolean | Emitted on focus (true) and blur (false) |

CheckboxComponent (ngx-checkbox)

Inputs

| Input | Type | Default | Description | | --------------- | --------- | ------- | ------------------------ | | label | string | '' | Label next to checkbox | | checked | boolean | false | Checked state | | disabled | boolean | false | Disabled state | | indeterminate | boolean | false | Indeterminate line state |

Outputs

| Output | Type | Description | | --------------- | --------- | --------------------- | | checkedChange | boolean | Checked state changed |

RadioGroupComponent (ngx-radio-group)

Inputs

| Input | Type | Default | Description | | ---------- | --------------- | ------- | ------------------------ | | options | RadioOption[] | [] | Array of radio options | | label | string | '' | Radio group header label | | value | unknown | null | Selected option value | | disabled | boolean | false | Disable all controls | | inline | boolean | false | Render horizontally |

Outputs

| Output | Type | Description | | ------------- | --------- | ------------- | | valueChange | unknown | Value changed |

DropdownComponent (ngx-dropdown)

Inputs

| Input | Type | Default | Description | | ------------- | ------------------ | ------------- | --------------------------- | | options | DropdownOption[] | [] | Selectable options list | | value | unknown | null | Selected item value | | label | string | '' | Header label | | placeholder | string | 'Select...' | Empty selection placeholder | | disabled | boolean | false | Disabled state | | filterable | boolean | false | Add filter search box | | required | boolean | false | Show required red asterisk | | error | string | '' | Error message | | hint | string | '' | Hint text |

Outputs

| Output | Type | Description | | ------------- | --------- | ------------------------------ | | valueChange | unknown | Emitted when selection changes |

MultiSelectComponent (ngx-multi-select)

Inputs

| Input | Type | Default | Description | | ------------- | ------------------ | ------------- | ----------------------------------------------- | | options | DropdownOption[] | [] | Selectable options | | values | unknown[] | [] | Array of selected values | | label | string | '' | Header label | | placeholder | string | 'Select...' | Input placeholder | | disabled | boolean | false | Disable component | | filterable | boolean | false | Show input filter search | | maxTags | number | Infinity | Max tag chips visible before overflow indicator |

Outputs

| Output | Type | Description | | -------------- | ----------- | ---------------------- | | valuesChange | unknown[] | Selected items changed |

AutocompleteComponent (ngx-autocomplete)

Inputs

| Input | Type | Default | Description | | ------------- | ------------------ | --------------------- | ---------------------------------------------- | | options | DropdownOption[] | [] | Search recommendation list | | label | string | '' | Header label | | placeholder | string | 'Type to search...' | Input placeholder | | disabled | boolean | false | Disable autocomplete | | error | string | '' | Error text | | minLength | number | 1 | Min characters typed before suggesting options |

Outputs

| Output | Type | Description | | ------------- | --------- | ------------------------------ | | valueChange | unknown | Suggestion selected or cleared |

DatePickerComponent (ngx-date-picker)

Inputs

| Input | Type | Default | Description | | ------------- | -------------- | ------------------ | ------------------------ | | value | Date \| null | null | Selected Date | | label | string | '' | Input label | | placeholder | string | 'Select date...' | Input placeholder | | disabled | boolean | false | Disable datepicker | | min | Date \| null | null | Earliest selection limit | | max | Date \| null | null | Latest selection limit | | format | string | 'MM/dd/yyyy' | Format layout |

Outputs

| Output | Type | Description | | ------------- | -------------- | ---------------------- | | valueChange | Date \| null | Date selection changed |

DateRangePickerComponent (ngx-date-range-picker)

Inputs

| Input | Type | Default | Description | | --------------- | --------------------------------- | ---------- | --------------------------------------------- | | label | string | '' | Input label | | start | Date \| string \| null | null | Selection start date | | end | Date \| string \| null | null | Selection end date | | min | Date \| string \| null | null | Min limits | | max | Date \| string \| null | null | Max limits | | disabledDates | (Date \| string)[] | [] | Disabled date values | | presets | DateRangePreset[] | defaults | Fast presets (Today, Last 7 days, This Month) | | weekStartsOn | 0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 | 0 | First day of week (0=Sunday) | | disabled | boolean | false | Disabled state |

Outputs

| Output | Type | Description | | ------------- | -------------------------------- | -------------------------------------------------- | | rangeChange | { start: string; end: string } | Date range selection completed (YYYY-MM-DD format) | | openChange | boolean | Emitted when calendar overlay is opened/closed |

SliderComponent (ngx-slider)

Inputs

| Input | Type | Default | Description | | -------------- | --------- | ------- | -------------------------------- | | label | string | '' | Slider label | | min | number | 0 | Min slider limit | | max | number | 100 | Max slider limit | | step | number | 1 | Drag interval size | | range | boolean | false | Enable double-handle range mode | | disabled | boolean | false | Disable component | | showValue | boolean | true | Display active values | | showTicks | boolean | false | Show min/max value indicators | | initialValue | number | 0 | Initial single value | | initialLow | number | 20 | Initial low value in range mode | | initialHigh | number | 80 | Initial high value in range mode |

Outputs

| Output | Type | Description | | ------------- | ------------------ | -------------------------------- | | valueChange | number | Value changed (single handle) | | rangeChange | [number, number] | Emitted when range bounds change |

SwitchComponent (ngx-switch)

Inputs

| Input | Type | Default | Description | | ---------- | ---------------------- | ------- | ------------------- | | onLabel | string | 'On' | Label when active | | offLabel | string | 'Off' | Label when inactive | | size | 'sm' \| 'md' \| 'lg' | 'md' | Toggle size | | disabled | boolean | false | Disabled state |

Outputs

| Output | Type | Description | | --------------- | --------- | ------------- | | checkedChange | boolean | State toggled |

RatingComponent (ngx-rating)

Inputs

| Input | Type | Default | Description | | ----------- | --------- | ------- | ------------------------------ | | max | number | 5 | Total stars to display | | label | string | '' | Header label | | readonly | boolean | false | Disabled interactive selection | | showValue | boolean | false | Show text scale (e.g. "4/5") |

Outputs

| Output | Type | Description | | -------------- | -------- | ---------------------- | | ratingChange | number | Star selection changed |

NumericTextBoxComponent (ngx-numeric-textbox)

Inputs

| Input | Type | Default | Description | | ------------- | --------- | ----------- | ------------------------------- | | label | string | '' | Label text | | value | number | 0 | Current value | | min | number | -Infinity | Lower bound | | max | number | Infinity | Upper bound | | step | number | 1 | Increment value on step up/down | | disabled | boolean | false | Disabled state | | placeholder | string | '' | Input placeholder | | prefix | string | '' | Prepend character (e.g., "$") | | suffix | string | '' | Append character (e.g., "kg") |

Outputs

| Output | Type | Description | | ------------- | -------- | ------------- | | valueChange | number | Value changed |

Public Methods

| Method | Signature | Description | | ---------- | ---------------------- | ------------------------- | | spin | (dir: 1 \| -1): void | Step value up or down | | setValue | (v: number): void | Set clamped numeric value |

TextareaComponent (ngx-textarea)

Inputs

| Input | Type | Default | Description | | ------------- | --------- | ------- | ------------------------------------ | | label | string | '' | Label text | | placeholder | string | '' | Textarea placeholder | | rows | number | 4 | Rows high | | maxlength | number | 0 | Max character length limits | | disabled | boolean | false | Disabled state | | autoResize | boolean | false | Automatically adjust size with lines | | hint | string | '' | Instruction note below input | | error | string | '' | Error alert below input |

Outputs

| Output | Type | Description | | ------------- | -------- | ----------------------- | | valueChange | string | Character value changed |

ColorPickerComponent (ngx-color-picker)

Inputs

| Input | Type | Default | Description | | ------- | -------- | ------- | ----------- | | label | string | '' | Input label |

Outputs

| Output | Type | Description | | ------------- | -------- | --------------------------------------- | | colorChange | string | Emitted with hex color code when picked |

TimePickerComponent (ngx-time-picker)

Inputs

| Input | Type | Default | Description | | -------- | --------- | --------- | ---------------------------- | | label | string | '' | Label text | | use12h | boolean | false | Enable 12h clock mode | | value | string | '09:00' | Selected time (HH:mm format) |

Outputs

| Output | Type | Description | | ------------ | -------- | ---------------------------------------- | | timeChange | string | Emitted when time changes (HH:mm format) |

Data Grid & Views

How to Use Grid & Views

import { Component } from '@angular/core';
import { DataGridComponent, GridColumnDef } from 'ngx-core-components/grid';
import { TreeViewComponent, ListViewComponent, TreeNode } from 'ngx-core-components/views';

@Component({
  standalone: true,
  imports: [DataGridComponent, TreeViewComponent, ListViewComponent],
  template: `
    <!-- Data Grid -->
    <ngx-data-grid [data]="gridData" [columns]="columns" [pageSize]="5" />

    <!-- Tree View -->
    <ngx-tree-view [nodes]="treeNodes" [checkable]="true" />
  `,
})
export class GridViewsExampleComponent {
  columns: GridColumnDef<any>[] = [
    { field: 'id', title: 'ID', width: 80 },
    { field: 'name', title: 'Name', sortable: true },
    { field: 'role', title: 'Role' },
  ];
  gridData = [
    { id: 1, name: 'Alice Smith', role: 'Developer' },
    { id: 2, name: 'Bob Jones', role: 'Designer' },
  ];

  treeNodes: TreeNode[] = [
    {
      id: 'root',
      label: 'My Project',
      children: [
        { id: 'src', label: 'src' },
        { id: 'tests', label: 'tests' },
      ],
    },
  ];
}

DataGridComponent (ngx-data-grid)

Inputs

| Input | Type | Default | Description | | -------------------- | ------------------------ | ---------- | ------------------------------------------------ | | data | T[] | [] | Table row data | | columns | GridColumnDef<T>[] | [] | Columns configuration | | stateKey | string | '' | LocalStorage key to save grid column preferences | | reorderable | boolean | false | Enable column drag reordering | | rowReorderable | boolean | false | Enable row drag reordering | | multiSort | boolean | false | Support multi-column sorting (Ctrl+Click) | | showGlobalSearch | boolean | false | Show global search input | | pageSize | number | 10 | Rows per page | | page | number | 1 | Active page index | | total | number | 0 | Total records (server paging) | | selectable | boolean | false | Render checkbox column for selections | | striped | boolean | true | Alternating row backgrounds | | loading | boolean | false | Show loading blur spinner | | editable | boolean | false | Enable double-click inline editor | | sortMode | 'client' \| 'server' | 'client' | Sorting location | | filterMode | 'client' \| 'server' | 'client' | Filtering location | | groupMode | 'client' \| 'server' | 'client' | Grouping location | | pagingMode | 'client' \| 'server' | 'client' | Pagination calculations | | groupBy | GridGroupState \| null | null | Column to group by | | groupedData | GridGroupResult<T>[] | [] | Grouped items (server mode) | | showColumnChooser | boolean | false | Show column hiding menu | | cellSelection | boolean | false | Enable grid cell click selection ranges | | enableContextMenu | boolean | false | Right-click context menus | | keyboardNavigation | boolean | false | Arrow key cell navigation | | groupAggregations | boolean | false | Calculate aggregate footers on groups |

Outputs

| Output | Type | Description | | --------------------- | ------------------------------------------------------------ | ----------------------------------------- | | columnReorder | { columns: GridColumnDef<T>[] } | Emitted when column positions change | | rowReorder | { previousIndex: number; currentIndex: number; data: T[] } | Emitted when rows are dragged and dropped | | rowClick | GridRowClickEvent<T> | Emitted when a row is clicked | | selectionChange | T[] | Emitted with list of selected row items | | sortChange | GridSortChangeEvent | Emitted on sort changes | | filterChange | GridFilterChangeEvent | Emitted on filter changes | | groupChange | GridGroupChangeEvent | Emitted on grouping changes | | pageChange | GridPageChangeEvent | Emitted on page navigations | | rowUpdate | GridRowUpdateEvent<T> | Emitted when inline row changes are saved | | cellSelectionChange | { start, end } | Emitted when range selection changes |

Public Methods

| Method | Signature | Description | | -------------- | ------------------------------- | ------------------------------------ | | goPage | (page: number): void | Navigate to specific page | | exportToJson | (): void | Trigger JSON data export download | | exportToCsv | (): void | Trigger CSV format export download | | beginEdit | (row: T, index: number): void | Open inline row editor | | saveEdit | (row: T, index: number): void | Commit inline row editing changes | | cancelEdit | (): void | Discard inline editing draft changes |

TreeViewComponent (ngx-tree-view)

Inputs

| Input | Type | Default | Description | | ------------- | ---------------- | ------- | -------------------------------------- | | nodes | TreeNode[] | [] | Hierarchical nodes list | | selectable | boolean | true | Click selection active | | checkable | boolean | false | Show checkbox selectors next to titles | | selectedId | string \| null | null | Highlighted node ID | | expandedIds | string[] | [] | Initially expanded node IDs |

Outputs

| Output | Type | Description | | -------------- | ------------------- | -------------------------------- | | nodeSelect | TreeNodeEvent | Emitted on node click | | nodeExpand | TreeNodeEvent | Emitted on node expansion | | nodeCollapse | TreeNodeEvent | Emitted on node collapse | | checkChange | { node, checked } | Emitted when check state changes |

Public Methods

| Method | Signature | Description | | ------------- | ---------- | ----------------------------------- | | expandAll | (): void | Expand all expandable tree branches | | collapseAll | (): void | Collapse all open tree branches |

ListViewComponent (ngx-list-view)

Inputs

| Input | Type | Default | Description | | ------------- | --------- | --------- | ----------------------------------- | | items | T[] | [] | Items array | | selectable | boolean | true | Row selection active | | multiselect | boolean | false | Support multi-item selections | | loading | boolean | false | Show loading overlay | | labelField | string | 'label' | Object key property for item labels | | pageSize | number | 0 | Enable pagination when > 0 |

Outputs

| Output | Type | Description | | ----------------- | --------------------------- | ---------------------------- | | itemClick | ListViewItemClickEvent<T> | Emitted when item clicked | | selectionChange | ListViewSelectionEvent<T> | Emitted on selection toggles | | pageChange | ListViewPageChangeEvent | Emitted on page navigations |

Dialog and Overlay

How to Use Dialog and Overlay

import { Component } from '@angular/core';
import { DialogService } from 'ngx-core-components/dialog';
import { TooltipDirective, PopoverComponent } from 'ngx-core-components/dialog';

@Component({
  standalone: true,
  imports: [TooltipDirective, PopoverComponent],
  template: `
    <!-- Tooltip -->
    <button ngxTooltip="Save Changes" tooltipPosition="bottom">Hover</button>

    <!-- Popover -->
    <button #btn>Click Me</button>
    <ngx-popover [anchor]="btn" title="Information">
      <p>This is a popover overlay.</p>
    </ngx-popover>
  `,
})
export class OverlayExampleComponent {
  constructor(private dialogService: DialogService) {}

  openModal() {
    const ref = this.dialogService.open(MyDialogContent, {
      data: { name: 'Admin' },
    });
    ref.closed.subscribe(result => console.log('Closed:', result));
  }
}

@Component({
  standalone: true,
  template: `<h3>Hello {{ dialogData.name }}</h3>`,
})
export class MyDialogContent {
  // Inject properties inside standalone dialog components using standard inputs
  dialogData: any;
  dialogRef: any;
}

DialogService (Injectable)

Methods

| Method | Signature | Description | | ------ | --------------------------------------------------------------------------- | ---------------------------- | | open | open<C, D, R>(component: Type<C>, config?: DialogConfig<D>): DialogRef<R> | Open floating overlay window |

DialogConfig Interface

| Property | Type | Default | Description | | ----------------- | -------------------- | ----------- | --------------------------------------------- | | data | D | undefined | Custom data inputs passed to dialog component | | closeOnBackdrop | boolean | true | Close modal on background mouse click | | panelClass | string \| string[] | [] | Dialog container class customizations | | maxWidth | string | '560px' | Max CSS size limits | | ariaLabel | string | 'Dialog' | Screen reader description |

TooltipDirective (ngxTooltip)

Inputs

| Input | Type | Default | Description | | ----------------- | ---------------------------------------- | ------- | -------------------------------------------- | | ngxTooltip | string | '' | Text contents of the popup tooltip box | | tooltipPosition | 'top' \| 'bottom' \| 'left' \| 'right' | 'top' | Placement side | | tooltipDelay | number | 300 | Delay in milliseconds before showing tooltip | | tooltipDisabled | boolean | false | Disable hover behavior |

PopoverComponent (ngx-popover)

Inputs

| Input | Type | Default | Description | | ---------- | ---------------------------------------- | ------------ | ----------------------------------- | | anchor | ElementRef \| HTMLElement | required | Relative positioning anchor element | | title | string | '' | Popover header header text | | position | 'top' \| 'bottom' \| 'left' \| 'right' | 'bottom' | Alignment layout | | width | string | '250px' | CSS popup width limits | | closable | boolean | true | Show close X button | | showOn | 'click' \| 'hover' | 'click' | Trigger event action |

Outputs

| Output | Type | Description | | ------- | ------ | ------------------------- | | open | void | Emitted when popup opens | | close | void | Emitted when popup closes |

Buttons and Actions

How to Use Buttons & Actions

import { Component, signal } from '@angular/core';
import {
  ButtonComponent,
  ChipComponent,
  ChipListComponent,
  DropDownButtonComponent,
  SpeedDialComponent,
} from 'ngx-core-components/buttons';

@Component({
  standalone: true,
  imports: [ButtonComponent, ChipComponent, ChipListComponent, DropDownButtonComponent, SpeedDialComponent],
  template: `
    <!-- Button -->
    <button ngx-button variant="primary" size="lg" [loading]="loading()">Click</button>

    <!-- Speed Dial FAB -->
    <ngx-speed-dial [items]="actions" direction="top" (itemClick)="onFabClick($event)" />
  `,
})
export class ButtonExampleComponent {
  loading = signal(false);
  actions = [
    { id: 'pdf', icon: '📄', label: 'Export PDF' },
    { id: 'email', icon: '✉️', label: 'Send Email' },
  ];
  onFabClick(ev: any) {
    console.log('FAB Clicked:', ev.id);
  }
}

ButtonComponent (ngx-button / Attribute selector)

Inputs

| Input | Type | Default | Description | | ------------ | --------------------------------- | ------------- | ------------------------------------------------------------ | | variant | ButtonVariant | 'primary' | Visual style variant (primary, danger, ghost, link, success) | | size | ButtonSize | 'md' | Button height size (sm, md, lg) | | shape | ButtonShape | 'rectangle' | Button curves (rectangle, rounded, pill, square) | | type | 'button' \| 'submit' \| 'reset' | 'button' | Button type | | disabled | boolean