ECS SaaS LCP NG CRUD UI Library

Angular UI library for building CRUD applications. Provides base components, automatic date handling, and reusable templates.

Installation

``bash
npm install esz-saas-lcp-ng-crud-ui
`

`typescript
import { EcsSaasLcpNgCrudUiModule } from 'esz-saas-lcp-ng-crud-ui';

@NgModule({
imports: [EcsSaasLcpNgCrudUiModule]
})
export class AppModule { }
`

Additional Setup

$3

The library's AppComponent automatically handles AI chat visibility (hides on auth pages, shows elsewhere). No additional configuration needed.

Quick Start

See QUICK-START.md for complete examples.

$3


`typescript
import { ABaseEntity, DateField } from 'esz-saas-lcp-ng-crud-ui';
import { IsNotEmpty, IsString } from 'class-validator';

export class MyEntity extends ABaseEntity {
@IsNotEmpty()
@IsString()
name: string;

@DateField() // Required for dates
createdDate: Date;
}
`

$3


`typescript
import { ABaseService } from 'esz-saas-lcp-ng-crud-ui';

@Injectable({ providedIn: 'root' })
export class MyEntityService extends ABaseService {
constructor(router: Router, http: HttpClient, authService: AuthService) {
super(router, http, authService, "my-entity", '', environment.apiUrl);
}
}
`

$3


`typescript
import { BaseDetailViewComponent } from 'esz-saas-lcp-ng-crud-ui';

@Component({
selector: 'app-my-entity-detail',
templateUrl: './my-entity-detail.component.html'
})
export class MyEntityDetailComponent
extends BaseDetailViewComponent {

constructor(protected entityService: MyEntityService) {
super();
this.entity = new MyEntity();
}

populateUiWithLanguageContent() {
this.getLanguageContent(
() => 'ecs-tmp-view-my-entity-detail',
() => ''
);
}
}
`

$3


`html
[languageData]="languageData"
[submitted]="submitted"
(save)="onSubmit()"
(cancel)="onCancelClick()">

Name

`

$3

`typescript
import { BaseMasterViewComponent } from 'esz-saas-lcp-ng-crud-ui';

@Component({
selector: 'app-my-entity-master',
templateUrl: '../../../../../node_modules/esz-saas-lcp-ng-crud-ui/src/lib/view/base-entity/base-entity-master/base-entity-master.component.html',
styleUrls: ['../../../../../node_modules/esz-saas-lcp-ng-crud-ui/src/lib/view/base-entity/base-entity-master/base-entity-master.component.scss']
})
export class MyEntityMasterComponent
extends BaseMasterViewComponent {

constructor(protected entityService: MyEntityService) {
super();
this.cols = [
{ field: "name", type: "text", header: "Name" },
{ field: "createdDate", type: "date", header: "Created" }
];
this.globalFilterFields = ['name'];
this.selectedCols = ['name', 'createdDate'];
}

override loadData(event: LazyLoadEvent): Observable> {
this.loading = true;
if (!event) event = { first: 0, rows: 25 };
this.entityService.getList(event, this.globalFilterFields).subscribe({
next: (res) => {
this.resDataRecords = res.data.list;
this.totalRecords = res.data.totalRecords;
this.loading = false;
}
});
return of(null);
}
}
`

Key Features

$3


- Add @DateField() decorator to date properties
- UTC ↔ Local conversion handled automatically
- No manual conversion code needed

$3

- BaseDetailViewComponent: CRUD logic, validation, date handling
- BaseMasterViewComponent: List views with pagination, filtering, sorting
- BaseAuditViewComponent: Audit trail views
- BaseEntityDetailTemplateComponent: Reusable form template

$3

- Default: Form fields
- beforeForm: Alerts, warnings
- afterForm: Tables, summaries
- customButtons: Additional action buttons

Documentation

- QUICK-START.md: Complete examples and patterns
- MIGRATION.md: Migration guide from manual to automatic patterns
- QUICK-REFERENCE.md: API reference and common patterns

Template Paths

- Master: ../../../../../node_modules/esz-saas-lcp-ng-crud-ui/src/lib/view/base-entity/base-entity-master/base-entity-master.component.html
- Master Kanban: ../../../../../node_modules/esz-saas-lcp-ng-crud-ui/src/lib/view/base-entity/base-entity-master-kanban/base-entity-master-kanban.component.html
- Audit: ../../../../../node_modules/esz-saas-lcp-ng-crud-ui/src/lib/view/base-entity/base-entity-audit/base-entity-audit.component.html

Column Types

- text, number, date, datetime, currency, image
- Nested fields: "company.name" (dot notation)
- Date options: dateFormat: "dd-M-yy", showTime: true, hourFormat: "12"

Common Patterns

$3


`typescript
override onSubmit(): void {
if (!this.entity.customField) {
this.messageService.add({ severity: 'error', detail: 'Required' });
return;
}
super.onSubmit();
}
`

$3

`typescript
override loadData(event: any): Observable {
return super.loadData(event).pipe(
map(entity => {
// Transform after load
return entity;
})
);
}
``

Support

For detailed examples, see the CRM and Travel Voucher projects that use this library.