ngx-schema-to-code

🌟Overview

Ngx-schema-to-code is an Angular Schematic designed to automate the creation of complete boilerplate code for CRUD (Create, Read, Update, Delete) operations. It uses a JSON Schema file as a blueprint to generate a fully functional user interface using Angular Material components. It allows to generate quick prototype for a web application for CURD operations.

It has used angular's latest features like standalone component, signal apis and zoneless application which will work with Angular 20 and above versions.

It will create fast application prototype, which will be ready run state, without having any api implementation, with the help of json-server.

It will create input form, grid / list with filter, services for CURD operations, routing, navigation, shared component and services etc.

It will generate standalone code, no dependency on ngx-schema-to-code library after code generation. Generated code will fully readable and user can modify it his own way.

Ngx-schema-to-code library is free to use and distribute. No restriction for generated code.

✨Key Features

• Automatic UI Generation: It transforms a simple json schema into ready-to-use Angular application.
• Angular Material Integration: The generated code is pre-style and configure to work with Angular Material Library.
• CURD Scaffolding: It generates the necessary components and logic to handle basic database-like operations (creating, editing, viewing, deleting data) based on the schema definitions.
• Boilerplate Reduction: Its primary goal is to save developers time and speedily generate the application prototype.
• Latest Angular Features: It's used all stable latest features like standalone component, signal apis and zoneless application etc.
• Restful API: Its use restful API approach to implement services to call api.
• Ready-to-Run: Generated application is ready to run and test CURD functionality with json-server.

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.
Ngx-schema-to-code will work on Angular 20, 21 and above versions.

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 For angular ^20.x.x use

npm install @angular/[email protected]

For angular ^21.x.x use

npm install @angular/[email protected]

For angular ^22.x.x use

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.

💡How to Use

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

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

run following script to start json server.

npm run api

open another terminal or command prompt and run the angular application.

ng serve --open

Add record using + add icom and test all CURD 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.

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(metadata) dataType is required.
inputType, if not provided it will define on base of the datytype.
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.

🪲 Bug Reporting

📒 Documentation

| Official site www.schematocode.com | | |------------------------------------|--| | Overview | Installation | | Json Schema | How to Use | | Entity | Property | | Primary/Unique Key | Data Types | | Input Types | Properties | | Api Integration | Array | | Boolean | Checkbox | | Checkbox Group | Date | | Email | File | | Group | Image | | Number | Options | | Radio | Select | | SlideToggle | String | | Text | Textarea | | Validation | Sample employee.json file |