https://github.com/prajaktadube/ngx-core-components
UI component library for Angular
https://github.com/prajaktadube/ngx-core-components
Last synced: about 1 month ago
JSON representation
UI component library for Angular
- Host: GitHub
- URL: https://github.com/prajaktadube/ngx-core-components
- Owner: prajaktadube
- License: mit
- Created: 2026-03-31T06:38:59.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2026-06-07T07:32:28.000Z (about 2 months ago)
- Last Synced: 2026-06-07T09:18:47.900Z (about 2 months ago)
- Language: TypeScript
- Size: 3.3 MB
- Stars: 3
- Watchers: 2
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Agents: AGENTS.md
Awesome Lists containing this project
- awesome-angular - ngx-core-components - Angular 19+ component library — production-ready UI components built with signals, OnPush change detection, and zero runtime dependencies. (Third Party Components / UI Libraries)
- fucking-awesome-angular - ngx-core-components - Angular 19+ component library — production-ready UI components built with signals, OnPush change detection, and zero runtime dependencies. (Third Party Components / UI Libraries)
README
# ngx-core-components
> Angular 19+ component library — production-ready UI components built with signals, OnPush change detection, and zero runtime dependencies.
[](https://www.npmjs.com/package/ngx-core-components)
[](https://github.com/prajaktadube/ngx-core-components/actions/workflows/ci.yml)
[](https://bundlephobia.com/package/ngx-core-components)
[](LICENSE)
[](https://stackblitz.com/github/prajaktadube/ngx-core-components?file=projects%2Fdemo%2Fsrc%2Fapp%2Fapp.component.ts)
## 🚀 Live Demo
**[https://prajaktadube.github.io/ngx-core-components/](https://prajaktadube.github.io/ngx-core-components/)**
Browse every component interactively — no install required.
---
## 📖 Documentation
The complete, detailed API Reference tables (Inputs, Outputs, Methods, Interfaces) and "How to Use" guides for all 30+ components are available in the **[ngx-core-components Library README](projects/ngx-core-components/README.md)**.
---
## Installation
```bash
npm install ngx-core-components
```
## Components
| Entry point | Components |
|---|---|
| `ngx-core-components` | Re-exports everything below |
| `ngx-core-components/inputs` | Textbox, Dropdown, Multi-select, Autocomplete, Checkbox, Radio, Date Picker |
| `ngx-core-components/charts` | Gantt Chart, Bar Chart, Line Chart, Pie Chart, Sparkline |
| `ngx-core-components/dialog` | Dialog service + container |
| `ngx-core-components/grid` | Data Grid |
All components are **standalone** (no NgModules), use **Angular Signals**, and have **OnPush** change detection.
## Quick Start
### Gantt Chart
```typescript
import { GanttChartComponent, GanttTask } from 'ngx-core-components/charts';
@Component({
standalone: true,
imports: [GanttChartComponent],
template: `
`,
})
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](projects/ngx-core-components/README.md) for full documentation.*
### Dialog
```typescript
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)
```typescript
import { TextboxComponent } from 'ngx-core-components/inputs';
@Component({
standalone: true,
imports: [TextboxComponent, ReactiveFormsModule],
template: ``,
})
export class MyComponent {
ctrl = new FormControl('');
}
```
### Structured Inputs And Layout
```typescript
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: `
Navigation
Content
`,
})
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
```typescript
import { Component, signal } from '@angular/core';
import { ListViewComponent } from 'ngx-core-components/views';
@Component({
standalone: true,
imports: [ListViewComponent],
template: `
`,
})
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](THEMING.md)** for a full list of customization tokens and theme templates.
Example:
```css
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](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](https://github.com/prajaktadube/ngx-core-components).
## License
MIT