ngx-crud-forms

ngx-crud-forms is an Angular module, which creates UI elements directly from your business objects. The module performs client-side authorization tasks too.

Compatibility

Different versions of ngx-crud-forms are compatible with different versions of the Angular framework. The following table shows the compatibility relations.

Installing the library

To use ngx-crud-forms, you should import CSS files from other modules to your project.

1. Run the following command: npm install --save bootstrap primeng primeicons @ng-select/ng-select

2. In your angular.json copy the following lines to the styles property of your project:

   "node_modules/bootstrap/dist/css/bootstrap.min.css",
   "node_modules/primeng/resources/themes/nova/theme.css",
   "node_modules/primeng/resources/primeng.min.css",
   "node_modules/primeicons/primeicons.css",
   "node_modules/@ng-select/ng-select/themes/default.theme.css"

3. Install ngx-crud-forms: npm install --save ngx-crud-forms

4. Import CrudTableLibModule in your AppModule. Importing HttpClientModule is also required for our GeneralRestService to work:

   import { CrudTableLibModule } from 'ngx-crud-forms';
   
   @NgModule({
       ...
       imports: [
           BrowserModule,
           HttpClientModule
           CrudTableLibModule
       ],
       ...
   })
   export class AppModule { ...

Using the library

FormField decorator

You can put the FormField decorator to your business object's fields to define information about its visualisation.

The FormField decorator has the following input properties. All of these are optional.

Usage example

class User {
    @FormField({
        className: 'TextboxInput',
        header: 'Id',
        required: true,
        type: 'number',
        order: 1,
        hidden: true
    })
    id: number;
}  

Permissions decorator

You can put the Permissions decorator to your business object to define authorization permissions.

Input object of the Permissions decorator defines Access Control Entries. The entries are allow operations on an object to different roles.

There are two built-in roles in the system: 'admin' and '*'.

• 'admin' is the top-level role, it is the default role in case of any error (e.g. when no role is defined for an operation).
• '*' represents that the given operation is allowed to any roles in the system.
  Beyond these, you can define roles with any names in your system.

The Permissions decorator waits an object as input parameter with the following fields: create, read, update, delete.
The fields can contain the '*' string (so any role can do the operation) or a string array with the allowed roles for the operation. If no role is defined for an operation, the library defines the 'admin' role for it by default.

To use the values defined in the decorator on server-side, please consult this example implementation.

Usage example

@Permissions({
    create: ['admin'],
    read: '*',
    update: ['admin', 'manager'],
    delete: ['admin']
})
export default class User { }  

CRUD table

The Crud Table Component can be used in your Angular project to visualise your data.

You can put the <lib-crud-table> selector to your HTML templates. It has the following input/output properties:

Usage example

<!-- userEntity is one instance of the User class [e.g. new User()] -->
<lib-crud-table
    [entityName]="'users'"
    [entity]="userEntity"
    [permissions]="[ 'manager', 'viewer' ]"
    [itemsPerPage]="5"
    (cellSelect)="userCellSelected($event)"
    (operationResult)="handleResult($event)"
    (backClicked)="goBack()">
</lib-crud-table>

License

The module licensed under the MIT License.

Contributors' Guide

You can find notes for contributors here.