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

🧩 Included Components

General UI Components

| Name | Description | |------|-------------| | csc-backdrop | backdrop for screen | | csc-button | customizable button with text, image, and svg icon | | csc-circular-progress | circular progress | | csc-datagrid | customizable and feature-rich data grid | | csc-groupbox | group box for the controls | | csc-icon | see svg | | csc-loader | loading indicator/spinner | | csc-map | map base on multiple tiles | | csc-modal | modal dialog window | | csc-notification | toast notification system | | csc-pagination | reusable pagination control | | csc-pdfviewer | PDF file viewer | | csc-progressbar | progress bar | | csc-ribbon | ribbon | | csc-sidepage | side page | | csc-svg | dynamic icon renderer | | csc-tabpage | tabbed content view | | csc-widget | modular display container |

Form Components

| Name | Description | |------|-------------| | csc-auto-complete | auto-complete with the same dropdown entries (Reactive Forms compatible) | | csc-checkbox | checkbox customizable (Reactive Forms compatible) | | csc-datetimepicker | datetime picker (Reactive Forms compatible) | | csc-dropdown | dropdown action button (Reactive Forms compatible) | | csc-imagepicker | image picker (Reactive Forms compatible) | | csc-select | select option customizable with the same dropdown entries (Reactive Forms compatible) | | csc-switch | switch button (Reactive Forms compatible) | | csc-textbox | textbox (Reactive Forms compatible) | | csc-textarea | textarea (Reactive Forms compatible) |

🧪 Compatibility

• ✅ Angular 22 to 23
• ✅ 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

v6.2.4

Update AutoComplete (Sort by value)

v6.2.3

Update AutoComplete

v6.2.2

Fix bug on filter (swap Begin with to End with)

v6.2.1

Add New Datagrid Add Ribbon Add Svg Add AutoComplette Add Checkbox Add Select Add Switch

6.2.0

For Angular 22

6.1.0

For Angular 20

v5.2.5

Add Map Add Scanner

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