Crud

This library was generated with Angular CLI version 17.2.0.

Code scaffolding

Run ng generate component component-name --project crud to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module --project crud.

Note: Don't forget to add --project crud or else it will be added to the default project in your angular.json file.

Build

Run ng build crud to build the project. The build artifacts will be stored in the dist/ directory.

Publishing

After building your library with ng build crud, go to the dist folder cd dist/crud and run npm publish.

Running unit tests

Run ng test crud to execute the unit tests via Karma.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI Overview and Command Reference page.

Custom Cells and Headers

CRUD V2 supports rendering arbitrary Angular components in place of a column's cell and/or header. The host application registers components in two root-scoped registries via CrudServerSideModule.forRoot().

1. Register components in AppModule

import { CrudServerSideModule } from '@alfercom/crud';

@NgModule({
  imports: [
    CrudServerSideModule.forRoot({
      cells:   { 'my-labels': MyLabelsCellComponent },
      headers: { 'my-labels': MyLabelsHeaderComponent },
    }),
  ],
})
export class AppModule {}

Call forRoot() once in AppModule. Lazy-loaded modules that import CrudServerSideModule without forRoot still see the registered tokens.

2. Implement the cell / header component

import { IPbCrudCustomCell, PbCrudCustomCellEvent, CRUDColumn } from '@alfercom/crud';

@Component({ /* ... */ })
export class MyLabelsCellComponent implements IPbCrudCustomCell {
  @Input() row: any;
  @Input() column!: CRUDColumn;
  @Input() value: any;
  @Input() extra?: any;
  @Output() cellEvent = new EventEmitter<PbCrudCustomCellEvent>();
}

Use cellEvent.emit({ type: 'some-action', payload: ... }) to notify the host.

3. Declare the column on the backend

crudColumn('Etichette', 'labels')
  .setCustomCell('my-labels', { allowInlineAdd: true })
  .setCustomHeader('my-labels');

Notes

• Keep custom components lightweight — they instantiate once per visible row.
• row/column updates (pagination, sort) do NOT recreate the component; inputs are updated in place, so internal state is preserved.
• cellKey changes destroy and recreate the component.
• Unregistered keys render empty cells with a console.warn (fail-safe).
• Custom cells are NOT included automatically in PDF/XLS exports; declare alternative columns in getColumnsXLS/getColumnsPDF on the backend.

Available since @alfercom/crud 2.1.0.