ngx-schema-to-code

CURD application ui code generator using angular schematics ngx-schema-to-code:curd on base on json schema for restful api. It will generate form, grid components, services required for CURD operation, navigation, all supporting shared components and services using all stable features in Angular 20 like standalone components, signal apis etc. For ui it has used Angular Material components. Also added support for json server, so you can run and test application without having any api implementation. It will generate standalone code, no dependency on this library after code generation. You can modify code in your own way.

Ngx-schema-to-code will work on Angular 20, 21 and above versions.

You can generate CURD code for new application or existing one. You can run it one or more times with same or different json schema. While working with existing angular application keep backup first, it may be overwrite existing files and folders.

Installation

Install the angular cli

npm install -g @angular/cli

create an angular project

ng new my-project

go to my-project root folder and add angular material

cd my-project
ng add @angular/material

install angular material moment adapter If you have angular ^20.x.x use

npm install @angular/[email protected]

else

npm install @angular/material-moment-adapter

Install json-server to test CURD operations.

npm install json-server --save-dev

Now add ngx-schema-to-code do not use ~~npm install ngx-schema-to-code~~

ng add ngx-schema-to-code

Remove the unwanted code from app.html, leave only router-outlet html tag.

Usage/Examples

Create a json schema file as specified in documentation section or you can copy sample from sample json schema modify it, save in projects root folder.

ng generate ngx-schema-to-code:curd <fileName.extention>

open another terminal or command prompt run following script to start json server.

npm run api

return back main terminal and run the angular application

ng serve --open

Add record using + add icom and test all functionalities. Once your apis got implemented only change api url in services. We have use id (string) as primary key for entities, you need change it as per your database / api implemention.

Documentation

Rule for create a json schema file.

A json schema file can contains multiple entities with many properties.

Only array and group type can have nested properties. Only one level nesting.

Entity name, property name should be start with letters can contains letters, numbers and underscoure only, should not contain any spaces.

inptuType select, radio and array->checkbox required to have a subproperty options or optionValues or source.

Subproperty type is required.

inputType, if not provided it will define on base of the type.

displayName, will be use in grid / list, if not provided then auto generate it.

label, will be use in input forms if not provided then displayName will be use.

schema structuer for json file:

{ "entityName1" : {
	"propertyName1": {
		"type" : "string | number | date | boolean | array | group | file" ,
		"inputType" : "text | number | date | chechbox | select | textarea | image | file | radio | slideToggle | email, etc...",
		"displayName" : "string" ,
		"label" : "Label text",
		
		** only for select | radio | array->checkbox inputType **

		"options" : [
			{ "desctiprion" : "string" : "value" : number /string },
			{ ...}
		]

		OR

		"optionValues" : ['string1', 'string2', ...],

		OR
		"source": string url of api to fetch data
		"descriptionField: "descriptionFiledName",
		"valueField" : "valueFieldName",
		"parentObject" : "string" // only if above data not available at root level.
		
		"validation" :{
			"required" : true,
			"minLength" : 10,
			"maxLength" : 50,
			"pattern" : "pattern"
			"min" : 1000		// for number inputType
			"max" : 25000		// for number inputType
		}
		"step" : 100 // for number inputType
		
		"hint" : "hint text"
		
		"multiple" : true //only for select, file and image input
		
        **only for group input type nested object contains all properties related to the group.**
		"properties" : {
            "property1" : {
                "type" : "string",
                "inputType" : "string",
                ...
            },
            property2,
            property...
        }
	},
	"propertyName2" : {
		.
		.
	},
	"propertyName..."
  },
  
  "entityName2" : {
	property1
	property2
	...
  },
  "entityName..." :{
	property1...
  }
}

Sample json schema

employee.json

{
  "employee": {
    "firstName": {
      "type": "string",
      "inputType": "text",
      "validation": {
        "required": true,
        "minLength": 5,
        "maxLength": 30
      },
      "hint": "First Name should be at minimum 5 characters long and maximum 30."
    },
    "lastName": {
      "type": "string"
    },
    "emailAddress": {
      "type": "string",
      "inputType": "email"
    },
    "photo": {
      "type": "file",
      "displayName": "Passport photo",
      "inputType": "image",
      "validation": {
        "required": true
      }
    },
    "gender": {
      "type": "string",
      "inputType": "radio",
      "options": [
        {
          "description": "Male",
          "value": "m"
        },
        {
          "description": "Female",
          "value": "f"
        }
      ],
      "validation": {
        "required": true
      }
    },
    "dob": {
      "type": "string",
      "displayName": "Birth Date",
      "format": "DD/MM/YYYY",
      "inputType": "date",
      "validation": {
        "required": true
      }
    },
    "address": {
      "type": "group",
      "displayName": "Current Address",
      "inputType": "group",
      "properties": {
        "area": {
          "type": "string",
          "displayName": "Area",
          "inputType": "text",
          "validation": {
            "required": true,
            "maxLength": 50
          }
        },
        "city": {
          "type": "string",
          "displayName": "City",
          "inputType": "text",
          "validation": {
            "required": true
          }
        }
      }
    },
    "education": {
      "type": "array",
      "displayName": "Education",
      "inputType": "text",
      "validation": {
        "required": true
      }
    },
    "designation": {
      "type": "string",
      "validation": {
        "required": true
      }
    },
    "salary": {
      "type": "number",
      "displayName": "Salary",
      "inputType": "number",
      "validation": {
        "required": true,
        "min": 1000,
        "max": 75000
      },
      "step": 1000,
      "hint": "Salary should be between 1000 and 75000."
    },
    "department": {
      "type": "string",
      "displayName": "Department",
      "inputType": "select",
      "optionValues": [
        "Account",
        "Human Resource",
        "Sales"
      ],
      "validation": {
        "required": true
      }
    }
  }
}