angular-crudder

A schematic project which generates CRUD operation boiler plate code based on the JSON file(schema).

Install Schematics

npm install angular-crudder

Once you install the package angular-crudder, that will be available through the Angular CLI.

Angular Crudder

ng generate angular-crudder:angular-crudder --name=<component-name> --schemaPath=<path-of-your-json-file>

Running the angular-crudder schematic generates a new Angular component files consisting of:

• Details Component
• Edit Component
• List Component
• Model file
• API service file

Navigation in component's routerLink are written based on the below routes:-

  {
    path: '<name>', component: <list-component>
  }

  {
    path: '<name>/create', component: <edit-component>
  }

  {
    path: '<name>/:id', component: <details-component>
  }

  {
    path: '<name>/edit/:id', component: <edit-component>
  }

You have to change the api-url in the service file then your CRUD will work.

You can use the module property to add the imports in your module file, it uses the regex pattern behind the scene to find the file.

NOTE:- Routing file you have to import it components manually and declare your routes.

angular-crudder Properties

Property	Description
name	The name of the instance which represent your object. E.g.:- customer, employee
schemaPath	Specifies the path of schema of which form and template is to be generated.
path	Specifies the path to create the files under.
changeDetection	Specifies if a change detection property is to be added in component metadata. Default is false.
module	Specifies the module name in which imports are to be added.
skipModuleImport	Specifies if the module import is to skipped or not.

JSON File properties

Each properties of the JSON file should be the FieldName which you want to be displayed in the form. The FieldName values should contain the metadata about that field. Below are the accepted the value metadata:-

Name	Description
isId	Field is a primary key/id field, which will be used in component's. Possible values: true/false. Default: false
type	Type will be used to generate HTML inputs and if is it group will be used to generate nested forms. Possible values: text, number, radio, select, group
maxlength	If type is text, you use this property to limit the no. of characters.
required	If field is required or not.
enum	If type is radio, you can use this property to display the possible values of the radio

In case you want to see example of the Sample JSON file.