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

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

General UI Components

| 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 |

Form Components

| 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

<csc-popup-container></csc-popup-container>

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) :

<csc-popup-container></csc-popup-container>

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

v5.2.4

Add Widget Add FormComponentsManager Add Textbox Add Textarea

v5.2.3

Remove peerDependencies

v5.2.2

Add Tabpage

v5.2.1

Add Datagrid

v5.0.1

For Angular 19

v4.0.31

For Angular 17

v3.0.1

For Angular 16

v2.0.1

For Angular 14

v1.0.0

Create solution