@shivay_18/ng-crud

Angular CRUD generator using Angular Schematics and Angular Material.

Generates a complete, production-ready CRUD (List, Create, Edit, Delete) with:

• Angular Material UI (table, paginator, sort, dialogs, snackbar, forms, chips, tooltips, progress spinner)
• Reactive Forms with validation
• REST HTTP service with error handling
• Auto-detects Angular 14+ (Module-based) or Angular 17+ (Standalone)
• Safe to uninstall — generated code has zero dependency on this package

Requirements

• Angular 14+
• Angular Material installed (ng add @angular/material)

Installation

npm install --save-dev @shivay_18/ng-crud

Usage

ng generate @shivay_18/ng-crud:crud <name> --fields="field1:type,field2:type" --apiUrl="http://localhost:3000"

Options

| Option | Type | Default | Description | | ------------ | ------- | ----------------------- | ----------------------------------------------- | | name | string | (required) | Resource name (e.g. product, user) | | fields | string | name:string | Comma-separated fields. Append * for required | | apiUrl | string | http://localhost:3000 | Base REST API URL | | path | string | (empty) | Sub-path inside src/app/ | | standalone | boolean | auto-detected | Force standalone mode (Angular 17+) |

Field Types

| Type | Form Control | Example | | --------- | ------------ | ---------------- | | string | text input | name:string | | number | number input | price:number | | boolean | checkbox | active:boolean | | date | date input | createdAt:date |

Append * to mark a field as required: name*:string

Examples

# Basic
ng generate @shivay_18/ng-crud:crud product

# With fields
ng generate @shivay_18/ng-crud:crud product --fields="name*:string,price*:number,active:boolean"

# With custom API and path
ng generate @shivay_18/ng-crud:crud order --fields="orderId*:number,status*:string,total:number" --apiUrl="https://api.myapp.com" --path="features"

# Force standalone (Angular 17+)
ng generate @shivay_18/ng-crud:crud user --fields="username*:string,email*:string,isAdmin:boolean" --standalone=true

Generated File Structure

Angular 14–16 (Module-based)

src/app/<name>/
├── <name>-list/
│   ├── <name>.module.ts                    ← NgModule with child routes & all Material imports
│   ├── <name>-list.component.ts
│   ├── <name>-list.component.html          ← Material table, paginator, sort, search
│   ├── <name>-list.component.scss
│   └── <name>-delete-dialog.component.ts
├── <name>-form/
│   ├── <name>-form.component.ts            ← Create & Edit (shared), Reactive Form
│   ├── <name>-form.component.html
│   └── <name>-form.component.scss
├── models/
│   └── <name>.model.ts                     ← TypeScript interface
└── services/
    └── <name>.service.ts                   ← HTTP CRUD service (GET/POST/PUT/DELETE)

The module is auto-imported into app.module.ts.

Angular 17+ (Standalone)

Same structure but without <name>.module.ts. Each component is standalone with its own imports.

Routes are auto-added to app.routes.ts with children for list, new, and edit paths.

Routing

Module-based (Angular 14–16)

The schematic auto-imports the module into app.module.ts. Add a lazy-loaded route to your app-routing.module.ts:

{
  path: 'products',
  loadChildren: () => import('./product/product-list/product.module').then(m => m.ProductModule)
}

The module includes internal child routes:

| Path | Component | | ----------- | ------------------- | | `` | <Name>ListComponent | | new | <Name>FormComponent | | :id/edit | <Name>FormComponent |

Standalone (Angular 17+)

Routes are auto-added to app.routes.ts:

{
  path: 'products',
  children: [
    { path: '', component: ProductListComponent, title: 'Product List' },
    { path: 'new', component: ProductFormComponent, title: 'New Product' },
    { path: ':id/edit', component: ProductFormComponent, title: 'Edit Product' }
  ]
}

Environment Configuration

On first run, the schematic auto-generates src/environments/environment.ts and src/environments/environment.prod.ts using the --apiUrl option:

export const environment = {
  production: false,
  apiUrl: 'http://localhost:3000',
};

If the files already exist, they are left untouched. Update apiUrl there to change the base URL for all generated services.

API Response Format

The generated service expects wrapped API responses:

{ "statusCode": 200, "statusMessage": "OK", "data": [...], "message": "..." }

The service automatically unwraps data before returning it to components. Errors are passed through as-is for component-level handling.

Uninstall

The generated code has zero runtime dependency on @shivay_18/ng-crud. Uninstall safely anytime:

npm uninstall @shivay_18/ng-crud

License

MIT