Camatsoft Components (csc)

Description

A reusable Angular component library built to simplify the creation of modern, interactive user interfaces.
Includes a powerful data grid, various UI components, and form-ready elements fully compatible with Angular Reactive Forms.

All components work native.
You don't need a libraries css same bootstrap or other libraries ts or js

✨ Installation

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

Components for Angular by CamatSoft

| Integrations | NPM Version | Documentation |
|---------|---------------|----------|
| Camatsoft.Components.Angular |  |  |

List of components

> ### Components
> | Name | Description |
> |------|-------------|
> | Datagrid | |

🧩 Included Components

$3

> | Name | Description |
> |------|-------------|
> | csc-datagrid | customizable and feature-rich data grid |
> | csc-icon | dynamic icon renderer |
> | csc-loader | loading indicator/spinner |
> | csc-modal | modal dialog window |
> | csc-notification | toast notification system |
> | csc-pagination | reusable pagination control |
> | csc-pdfviewer | PDF file viewer |
> | csc-progress | progress bar |
> | csc-tabpage | tabbed content view |
> | csc-widget | modular display container |

$3

> | Name | Description |
> |------|-------------|
> | csc-dropdown-button | dropdown action button (Reactive Forms compatible) |
> | csc-datetime-picker | date & time picker (Reactive Forms compatible) |
> | csc-textarea | textarea (Reactive Forms compatible) |
> | csc-textbox | textbox (Reactive Forms compatible) |

🧪 Compatibility

- ✅ Angular 17 to 19
- ✅ Works with Reactive Forms and Template-driven Forms

Register Module

Register the module with the following command :
###### ts
`
ModuleRegistryService.registerModules('bundle');
`

Add Popup Container for the component

To add the popup container, include the following:
###### html
`

`
###### ts
`
import { PopupContainerComponent } from '@camatsoft/components-angular';
`

Exemples

In main.ts (EntryPoint) :
`
ModuleRegistryService.registerModules('bundle');
`
In app.component.ts (Root Component ts) :
`
import { PopupContainerComponent } from '@camatsoft/components-angular';

@Component({
selector: ...,
imports: [..., PopupContainerComponent],
templateUrl: ...,
styleUrl: ...,
})
export class AppComponent {}
`
In app.component.html (Root Component Html) :
`

`

i18N (Internationalization)

If you would like to add globalization support, create an i18N folder in your root directory:
>
`
/
└── i18N
└── cscomponents
└── datagrid
└── en-gb.json
└── xx-xx.json
└── modal
└── en-gb.json
└── xx-xx.json
└── notification
└── en-gb.json
└── xx-xx.json
└── en-gb.json
└── xx-xx.json
``

Alternatively, you can specify the path in the environment variable:
> DatagridEnvironmentConst.jsonPathDirectoryI18N = 'path/to/i18N/datagrid';
> ModalEnvironmentConst.jsonPathDirectoryI18N = 'path/to/i18N/modal';
> NotificationEnvironmentConst.jsonPathDirectoryI18N = 'path/to/i18N/notification';

Be careful: each component should have its own JSON file (e.g., xx-xx.json for specific locales).

Release Notes

$3

Add Widget
Add FormComponentsManager
Add Textbox
Add Textarea

$3

Remove peerDependencies

$3

Add Tabpage

$3

Add Datagrid

$3

For Angular 19

$3

For Angular 17

$3

For Angular 16

$3

For Angular 14

$3

Create solution