@camatsoft/components-angular v5.2.4

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