Generate an Employee CRUD Application Prototype with Angular using NGX-SCHEMA-TO-CODE Schematics

Writing boilerplate code for forms, data tables, and input validation is one of the most repetitive parts of frontend development. Every time you need a new entity, you end up building the same CRUD (Create, Read, Update, Delete) architecture from scratch. What if you could generate all of that code automatically using just a data model?

In this tutorial, you will learn how to use ngx-schema-to-code to instantly generate a fully functional Angular application prototype directly from a JSON schema. We will build an Employee Management system complete with an input form, automatic validation rules, data grouping, and a responsive grid view supporting sorting, pagination, and filtering.

Best of all, you can run and test all CRUD operations immediately without writing a single line of backend API code. The setup uses a pre-configured local json-server out of the box, allowing you to validate your UI and data schema instantly.

If you want to know more about ngx-schema-to-code, please see the documentation

By the end of this tutorial, you will have an employee application with a form and list view that supports operations such as adding, editing, viewing, deleting, sorting, pagination and filtering employee records. Following are the screenshot of the generated application.

Input Form

Grid List View

Prerequisites

Before starting this tutorial, make sure you already have:

• Angular 20 or a later version installed
• An Angular project created
• Angular Material installed and configured
• The Material Moment Adapter installed (compatible with Angular Material version)
• json-server installed (locally)

If you have not installed the required dependencies, see the Installation Guide

Step 1: Clean up the application

Open the app.html file and remove any unnecessary HTML. Keep only the <router-outlet/> tag.

Step 2: Add ngx-schema-to-code

If ngx-schema-to-code has not already been added to your project, run the following command:

ng add ngx-schema-to-code

This tutorial uses ngx-schema-to-code version 1.1.1 or later.

If you already have an older version installed, update it with:

ng update ngx-schema-to-code

Step 3: Create the employee JSON schema

The JSON schema is the main input used by ngx-schema-to-code to generate the CRUD application.

Create a employee.json file in root folder of your Angular project.

We will build the schema step by step.

Step 3.1: Add the employee entity

Start with the following:

{
  "employee": {
    "__requiredAllExcept": [],
  }
}

The __requiredAllExcept metadata allows us to specify properties that should not be required.

By default, all entity properties are required. We will use __requiredAllExcept later to make specific properties optional.

Step 3.2 : Add the first name

Add a firstName property with minimum and maximum length validation:

{
  "employee": {
    "__requiredAllExcept": [], 
    "firstName": {
      "minLength": 2,
      "maxLength": 30,
      "hint": "First Name should be 2-30 characters long."
    },
  }
}

For a property, the following defaults are used:

• dataType defaults to string
• inputType defaults to text
• required defaults to true, unless changed by the entity-level settings

The displayName is generated automatically from the property name.

For example: firstName → First Name

If you want to use a different display name, you can specify displayName explicitly.

The hint provides additional information to the user. In this example, it tells the user that the first name must contain between 2 and 30 characters.

Step 3.3 : Add last name and email address

Add lastName and emailAddress:

    "lastName": {},
    "emailAddress": {
      "inputType": "email"
    },

The lastName property is empty, so all of its metadata uses the default values.

For emailAddress, we explicitly specify "inputType": "email". This tells the generated application to use an email input control. The appropriate email and pattern validation will also be applied.

Step 3.4 : Add a passport photo

    "photo": {
      "dataType": "file",
      "displayName": "Passport photo",
      "inputType": "image"
    },

Here:

• dataType: "file" specifies that the property contains a file.
• inputType: "image" restricts the input to images.
• displayName explicitly specifies the label shown to the user.

The file data type supports two relevant input types:

• file — accepts files of any supported type and does not provide an image preview.
• image — accepts image files and provides an image preview in the input form and list view.

Step 3.5 : Add gender

Add a gender property using a radio button:

    "gender": {
      "inputType": "radio",
      "options": [
        { "description": "Male", "value": "m" },
        { "description": "Female", "value": "f" }
      ]
    },

For a radio button, the options property contains an array of objects.

Each option has:

• description — the text displayed to the user.
• value — the value stored in the database.

For example, the user sees: Male or Female

But the application stores: m or f

You can also use optionValues when the display value and stored value are the same:

Another option is to use source to retrieve the options from an API.

For more information, see the Options section in the documentation.

Step 3.6 : Add date of birth

Add a dob property:

    "dob": {
      "dataType": "string",
      "inputType": "date",
      "displayName": "Date of Birth",
      "format": "dd/mm/yyyy"
    },

For a date field:

• dataType is string.
• inputType is date.
• The generated form provides a calendar for selecting a date.
• The selected date is sent to the API as an ISO string.

The displayName is explicitly specified as Date of Birth.

If you do not specify displayName, it will be generated automatically: dob → Dob

You can also specify a format to control how the date is displayed in the input form and grid.

Step 3.7 : Add marital status

Add a married property:

    "married": {
      "dataType": "boolean",
      "label": "Are you married?"
    },

Because the dataType is boolean, the value stored will be either: true or false

For a boolean property, the default inputType is checkbox.

The label is displayed in the input form.

Step 3.8 : Add the employee address

Now add an address property containing two sub-properties: area and city.

    "address": {
      "dataType": "group",
      "displayName": "Current Address",
      "inputType": "group",
      "properties": {
        "area": {
          "maxLength": 50
        },
        "city": {}
      }
    },

The group input type allows you to combine multiple properties into a single group.

In this example, the address contains:areacity

The sub-properties are defined inside the properties object.

When dataType is set to group, only one group can be entered.

If you use an array data type instead, you can allow the user to enter multiple groups with Add and Delete functionality.

Step 3.9 : Add education and designation

An employee can have multiple educational qualifications, so we will use an array for education.

Add the following:

    "education": {
      "dataType": "array",
      "inputType": "text"
    },
    "designation": {},

The array data type allows the user to enter multiple values.

For example:

    Bachelor of Engineering
    Master of Business Administration
    Master of Science

The generated UI provides functionality to add and delete values.

The designation property is empty, so it uses the default values:

• dataType: string
• inputType: text

Step 3.10 : Add salary

Add a salary property:

    "salary": {
      "dataType": "number",
      "inputType": "number",
      "min": 30000,
      "max": 325000,
      "step": 3000,
      "hint": "Salary should be between 30000 and 325000."
    },

This creates a numeric input field.

The configuration specifies:

• Minimum value: 30,000
• Maximum value: 3,25,000
• Step value: 3,000

The step value controls how much the value increases or decreases when the user uses the up and down arrow controls.

The hint provides additional information to the user.

If the user enters an invalid value, an error message is displayed instead of the hint.

Step 3.11 : Add department

Add a department property using a select control:

    "department": {
      "inputType": "select",
      "optionValues": [
        "Account",
        "Human Resource",
        "Sales"
      ]
    }

The select input type allows the user to select a value from a predefined list.

In this example, the available departments are:

• Account
• Human Resource
• Sales

There are multiple ways to define options. See the Options section in the documentation for more information.

You can also use a select control for multiple values by combining:

    "dataType": "array"
    "multiple": true

Step 3.12 : Make some properties optional

By default, all properties are required.

We want lastName and address.area to be optional.

Update the __requiredAllExcept property:

    "__requiredAllExcept": ["lastName","address.area"],

The __requiredAllExcept metadata allows you to opt out of required validation for specific properties.

In this example:

• lastName is optional.
• address.area is optional.

Because area is a sub-property of address, we use dot notation

This tells ngx-schema-to-code to apply the setting specifically to the area property inside address.

Step 3.13 : Complete employee schema

At this point, your employee.json file should contain the complete employee schema.

You can also use the Sample JSON Schema provided in the documentation as a starting point and modify it according to your requirements.

Save employee.json in the root folder of your Angular project.

Step 4: Generate the CRUD application

Now that the JSON schema is ready, generate the CRUD application using the following command:

ng generate ngx-schema-to-code:curd <json-schema-file>

Replace <json-schema-file> with the path to your JSON schema.

For example:

ng generate ngx-schema-to-code:curd employee.json

The generator will use the schema to create the required code for the employee CRUD application.

Step 5: Start the JSON Server API

Start your JSON Server API.

If you installed and configured it locally, use:

npm run api

Keep the API server running while testing the application.

Step 6: Start the Angular application

Open a new terminal and run:

ng serve --open

Angular will compile the application and open it in your browser.

You should now see the generated employee CRUD application.

Step 7: Test the CRUD operations

On toolbar menu click the 'Employee', it will open the eployee grid list view. On right site of the page find the + Add button and click it to add a employee. Enter the employee information and save the record, it will return back to grid list view and you will able to see added record there. By selecting a record it will enable 'edit', 'delete' and 'view' buttons, then you can able to test all CRUD functionalities.

• Create — Add a new employee.
• Read — View employees in the list.
• Update — Edit an existing employee.
• Delete — Delete an employee.

Try different values to verify that the validation rules defined in employee.json are working correctly.

For example, try entering:

• A first name with fewer than 2 characters.
• A first name with more than 30 characters.
• An invalid email address.
• A salary below 30,000.
• A salary above 325,000.

The generated application should apply the validation rules defined in your schema.

API and Database Integration

This tutorial uses json-server as a simple API for prototyping.

Once your actual API is implemented, you only need to update the API URL in the generated services according to your backend implementation.

The generated application uses id as the primary key for entities, with the ID represented as a string.

If your database or API uses a different primary-key type or property, update the generated code to match your backend implementation.

What You Learned

In this tutorial, you learned how to:

1. Install and configure ngx-schema-to-code.
2. Create an employee JSON schema.
3. Define properties and their data types.
4. Configure different input types.
5. Add validation rules.
6. Create groups and arrays.
7. Configure select and radio controls.
8. Make specific properties optional.
9. Generate an employee CRUD application.
10. Run the application with json-server.
11. Test Create, Read, Update, and Delete operations.

The main idea is that the JSON schema describes your application, while ngx-schema-to-code uses that schema to generate the CRUD functionality and UI for you.