Angular UI library providing base components, automatic date conversion, and utilities for building CRUD applications
npm install esz-saas-lcp-ng-crud-uiAngular UI library for building CRUD applications. Provides base components, automatic date handling, and reusable templates.
``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 { }
`
The library's AppComponent automatically handles AI chat visibility (hides on auth pages, shows elsewhere). No additional configuration needed.
See QUICK-START.md for complete examples.
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()">
`$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 buttonsDocumentation
- 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.htmlColumn 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;
})
);
}
``For detailed examples, see the CRM and Travel Voucher projects that use this library.