@shivay_18/ng-crud 0.1.0

package/README.md

@@ -0,0 +1,142 @@
+# 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)
+- Reactive Forms with validation
+- REST HTTP service
+- 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
+
+```bash
+npm install --save-dev ng-crud
+```
+
+---
+
+## Usage
+
+```bash
+ng generate 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` |
+
+Append `*` to mark a field as required: `name*:string`
+
+---
+
+## Examples
+
+```bash
+# Basic
+ng generate ng-crud:crud product
+
+# With fields
+ng generate ng-crud:crud product --fields="name*:string,price*:number,active:boolean"
+
+# With custom API and path
+ng generate ng-crud:crud order --fields="orderId*:number,status*:string,total:number" --apiUrl="https://api.myapp.com" --path="features"
+
+# Force standalone (Angular 17+)
+ng generate 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>.module.ts          ← NgModule with routing & all Material imports
+├── models/
+│   └── <name>.model.ts       ← TypeScript interface
+├── services/
+│   └── <name>.service.ts     ← HTTP CRUD service (GET/POST/PUT/DELETE)
+├── <name>-list/
+│   ├── <name>-list.component.ts
+│   ├── <name>-list.component.html   ← Material table, paginator, search
+│   ├── <name>-list.component.scss
+│   └── <name>-delete-dialog.component.ts
+└── <name>-form/
+    ├── <name>-form.component.ts     ← Create & Edit (shared)
+    ├── <name>-form.component.html   ← Reactive form with validation
+    └── <name>-form.component.scss
+```
+
+### Angular 17+ (Standalone)
+
+Same structure but without `<name>.module.ts`. Each component is standalone with its own imports.
+
+---
+
+## After Generation
+
+### Module-based (Angular 14–16)
+
+Add a lazy-loaded route to your `app-routing.module.ts`:
+
+```ts
+{
+  path: 'products',
+  loadChildren: () => import('./product/product.module').then(m => m.ProductModule)
+}
+```
+
+### Standalone (Angular 17+)
+
+The schematic auto-adds the list route to `app.routes.ts`. Add child routes manually if needed:
+
+```ts
+{
+  path: 'products',
+  loadComponent: () => import('./product/product-list/product-list.component').then(c => c.ProductListComponent)
+}
+```
+
+---
+
+## Uninstall
+
+The generated code has **zero runtime dependency** on `ng-crud`. Uninstall safely anytime:
+
+```bash
+npm uninstall ng-crud
+```
+
+---
+
+## License
+
+MIT

package/dist/collection.json

@@ -0,0 +1,10 @@
+{
+  "$schema": "../node_modules/@angular-devkit/schematics/collection-schema.json",
+  "schematics": {
+    "crud": {
+      "description": "Generates a complete CRUD module with Material UI (list, form, service, model, routing).",
+      "factory": "./crud/index#crud",
+      "schema": "./crud/schema.json"
+    }
+  }
+}

package/dist/crud/files/module/components/__name@dasherize__-form/__name@dasherize__-form.component.html.template

@@ -0,0 +1,48 @@
+<div class="page-container">
+
+  <div class="page-header">
+    <button mat-icon-button (click)="goBack()">
+      <mat-icon>arrow_back</mat-icon>
+    </button>
+    <h2>{{ isEditMode ? 'Edit' : 'Add' }} <%= classify(name) %></h2>
+  </div>
+
+  <div *ngIf="isLoading" class="spinner-wrap">
+    <mat-spinner diameter="40"></mat-spinner>
+  </div>
+
+  <mat-card *ngIf="!isLoading">
+    <mat-card-content>
+      <form [formGroup]="form" (ngSubmit)="onSubmit()" novalidate>
+
+<% fields.forEach(function(field) { %>
+<% if (field.control === 'checkbox') { %>
+        <div class="field-row">
+          <mat-checkbox formControlName="<%= field.name %>"><%= field.label %></mat-checkbox>
+        </div>
+<% } else { %>
+        <mat-form-field appearance="outline" class="full-width">
+          <mat-label><%= field.label %></mat-label>
+          <input matInput type="<%= field.control %>" formControlName="<%= field.name %>" />
+          <mat-error *ngIf="form.get('<%= field.name %>')?.invalid && form.get('<%= field.name %>')?.touched">
+<% if (field.required) { %>            <span *ngIf="form.get('<%= field.name %>')?.hasError('required')">
+              <%= field.label %> is required.
+            </span>
+<% } %>          </mat-error>
+        </mat-form-field>
+<% } %>
+<% }); %>
+
+        <div class="form-actions">
+          <button mat-button type="button" (click)="goBack()" [disabled]="isSaving">Cancel</button>
+          <button mat-raised-button color="primary" type="submit" [disabled]="isSaving || form.invalid">
+            <mat-spinner *ngIf="isSaving" diameter="18" class="inline-spinner"></mat-spinner>
+            {{ isSaving ? 'Saving...' : (isEditMode ? 'Update' : 'Save') }}
+          </button>
+        </div>
+
+      </form>
+    </mat-card-content>
+  </mat-card>
+
+</div>

package/dist/crud/files/module/components/__name@dasherize__-form/__name@dasherize__-form.component.scss.template

@@ -0,0 +1,46 @@
+.page-container {
+  padding: 24px;
+  max-width: 600px;
+  margin: 0 auto;
+}
+
+.page-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 20px;
+
+  h2 {
+    margin: 0;
+    font-size: 22px;
+    font-weight: 600;
+  }
+}
+
+.spinner-wrap {
+  display: flex;
+  justify-content: center;
+  padding: 48px 0;
+}
+
+.full-width {
+  width: 100%;
+  margin-bottom: 4px;
+}
+
+.field-row {
+  margin-bottom: 16px;
+}
+
+.form-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  margin-top: 8px;
+}
+
+.inline-spinner {
+  display: inline-block;
+  margin-right: 6px;
+  vertical-align: middle;
+}

package/dist/crud/files/module/components/__name@dasherize__-form/__name@dasherize__-form.component.ts.template

@@ -0,0 +1,121 @@
+import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { ActivatedRoute, Router } from '@angular/router';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { <%= classify(name) %> } from '../../models/<%= dasherize(name) %>.model';
+import { <%= classify(name) %>Service } from '../../services/<%= dasherize(name) %>.service';
+
+@Component({
+  selector: 'app-<%= dasherize(name) %>-form',
+  templateUrl: './<%= dasherize(name) %>-form.component.html',
+  styleUrls: ['./<%= dasherize(name) %>-form.component.scss'],
+})
+export class <%= classify(name) %>FormComponent implements OnInit {
+  form!: FormGroup;
+  isEditMode = false;
+  isLoading = false;
+  isSaving = false;
+  itemId: number | null = null;
+
+  constructor(
+    private fb: FormBuilder,
+    private service: <%= classify(name) %>Service,
+    private router: Router,
+    private route: ActivatedRoute,
+    private snackBar: MatSnackBar
+  ) {}
+
+  ngOnInit(): void {
+    this.buildForm();
+    const id = this.route.snapshot.paramMap.get('id');
+    if (id) {
+      this.isEditMode = true;
+      this.itemId = +id;
+      this.loadItem(this.itemId);
+    }
+  }
+
+  buildForm(): void {
+    this.form = this.fb.group({<% fields.forEach(function(field, i) { %>
+      <%= field.name %>: [<%= field.type === 'boolean' ? 'false' : field.type === 'number' ? 'null' : "''" %><% if (field.required) { %>, [Validators.required]<% } %>]<% if (i < fields.length - 1) { %>,<% } %><% }); %>
+    });
+  }
+
+  loadItem(id: number): void {
+    this.isLoading = true;
+    this.service.getById(id).subscribe({
+      next: (item) => {
+        this.form.patchValue(item);
+        this.isLoading = false;
+      },
+      error: (error) => {
+        let errorMessage = 'Failed to load item.';
+        if (error.status === 404) {
+          errorMessage = '<%= classify(name) %> not found.';
+          this.router.navigate(['/<%= dasherize(name) %>']);
+        } else if (error.status === 500) {
+          errorMessage = 'Server error. Please try again later.';
+        }
+        this.snackBar.open(errorMessage, 'Close', { duration: 4000 });
+        this.isLoading = false;
+      },
+    });
+  }
+
+  onSubmit(): void {
+    if (this.form.invalid) {
+      this.form.markAllAsTouched();
+      this.showValidationErrors();
+      return;
+    }
+    this.isSaving = true;
+    const value: <%= classify(name) %> = this.form.value;
+    const request = this.isEditMode
+      ? this.service.update(this.itemId!, value)
+      : this.service.create(value);
+
+    request.subscribe({
+      next: () => {
+        this.snackBar.open(
+          `<%= classify(name) %> ${this.isEditMode ? 'updated' : 'created'} successfully.`,
+          'Close',
+          { duration: 3000 }
+        );
+        this.isSaving = false;
+        this.goBack();
+      },
+      error: (error) => {
+        let errorMessage = 'Save failed. Please try again.';
+        if (error.status === 400 && error.error?.message) {
+          errorMessage = error.error.message;
+        } else if (error.status === 404) {
+          errorMessage = '<%= classify(name) %> not found.';
+        } else if (error.status === 500) {
+          errorMessage = 'Server error. Please try again later.';
+        }
+        this.snackBar.open(errorMessage, 'Close', { duration: 5000 });
+        this.isSaving = false;
+      },
+    });
+  }
+
+  private showValidationErrors(): void {
+    const errors: string[] = [];
+    Object.keys(this.form.controls).forEach(key => {
+      const control = this.form.get(key);
+      if (control?.invalid && control.errors) {
+        if (control.errors['required']) {
+          const fieldName = key.charAt(0).toUpperCase() + key.slice(1);
+          errors.push(`${fieldName} is required`);
+        }
+      }
+    });
+    if (errors.length > 0) {
+      this.snackBar.open(errors.join(', '), 'Close', { duration: 4000 });
+    }
+  }
+
+  goBack(): void {
+    this.router.navigate(['..'], { relativeTo: this.route });
+  }
+}

package/dist/crud/files/module/components/__name@dasherize__-list/__name@dasherize__-delete-dialog.component.ts.template

@@ -0,0 +1,27 @@
+import { Component, Inject } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { <%= classify(name) %> } from '../../models/<%= dasherize(name) %>.model';
+
+@Component({
+  selector: 'app-<%= dasherize(name) %>-delete-dialog',
+  template: `
+    <h2 mat-dialog-title>Delete <%= classify(name) %></h2>
+    <mat-dialog-content>
+      Are you sure you want to delete this record? This cannot be undone.
+    </mat-dialog-content>
+    <mat-dialog-actions align="end">
+      <button mat-button (click)="close(false)">Cancel</button>
+      <button mat-raised-button color="warn" (click)="close(true)">Delete</button>
+    </mat-dialog-actions>
+  `,
+})
+export class <%= classify(name) %>DeleteDialogComponent {
+  constructor(
+    public dialogRef: MatDialogRef<<%= classify(name) %>DeleteDialogComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: <%= classify(name) %>
+  ) {}
+
+  close(result: boolean): void {
+    this.dialogRef.close(result);
+  }
+}

package/dist/crud/files/module/components/__name@dasherize__-list/__name@dasherize__-list.component.html.template

@@ -0,0 +1,75 @@
+<div class="page-container">
+
+  <div class="page-header">
+    <h2><%= classify(name) %> List</h2>
+    <button mat-raised-button color="primary" (click)="onCreate()">
+      <mat-icon>add</mat-icon> Add <%= classify(name) %>
+    </button>
+  </div>
+
+  <mat-card>
+    <mat-card-content>
+
+      <mat-form-field appearance="outline" class="search-box">
+        <mat-label>Search</mat-label>
+        <mat-icon matPrefix>search</mat-icon>
+        <input matInput (keyup)="applyFilter($event)" placeholder="Search..." />
+      </mat-form-field>
+
+      <div *ngIf="isLoading" class="spinner-wrap">
+        <mat-spinner diameter="40"></mat-spinner>
+      </div>
+
+      <div [hidden]="isLoading">
+        <table mat-table [dataSource]="dataSource" matSort>
+
+          <ng-container matColumnDef="id">
+            <th mat-header-cell *matHeaderCellDef mat-sort-header>#</th>
+            <td mat-cell *matCellDef="let row">{{ row.id }}</td>
+          </ng-container>
+
+<% fields.forEach(function(field) { %>
+          <ng-container matColumnDef="<%= field.name %>">
+            <th mat-header-cell *matHeaderCellDef mat-sort-header><%= field.label %></th>
+            <td mat-cell *matCellDef="let row">
+<% if (field.type === 'boolean') { %>
+              <mat-chip [color]="row.<%= field.name %> ? 'primary' : ''" selected>
+                {{ row.<%= field.name %> ? 'Yes' : 'No' }}
+              </mat-chip>
+<% } else { %>
+              {{ row.<%= field.name %> }}
+<% } %>
+            </td>
+          </ng-container>
+<% }); %>
+
+          <ng-container matColumnDef="actions">
+            <th mat-header-cell *matHeaderCellDef>Actions</th>
+            <td mat-cell *matCellDef="let row">
+              <button mat-icon-button color="primary" (click)="onEdit(row)" matTooltip="Edit">
+                <mat-icon>edit</mat-icon>
+              </button>
+              <button mat-icon-button color="warn" (click)="onDelete(row)" matTooltip="Delete">
+                <mat-icon>delete</mat-icon>
+              </button>
+            </td>
+          </ng-container>
+
+          <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+          <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+
+          <tr class="mat-row" *matNoDataRow>
+            <td class="mat-cell no-data" [attr.colspan]="displayedColumns.length">
+              No records found.
+            </td>
+          </tr>
+
+        </table>
+
+        <mat-paginator [pageSizeOptions]="[5, 10, 25]" showFirstLastButtons></mat-paginator>
+      </div>
+
+    </mat-card-content>
+  </mat-card>
+
+</div>

package/dist/crud/files/module/components/__name@dasherize__-list/__name@dasherize__-list.component.scss.template

@@ -0,0 +1,40 @@
+.page-container {
+  padding: 24px;
+  max-width: 1100px;
+  margin: 0 auto;
+}
+
+.page-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+
+  h2 {
+    margin: 0;
+    font-size: 22px;
+    font-weight: 600;
+  }
+}
+
+.search-box {
+  width: 100%;
+  max-width: 360px;
+  margin-bottom: 16px;
+}
+
+.spinner-wrap {
+  display: flex;
+  justify-content: center;
+  padding: 48px 0;
+}
+
+table {
+  width: 100%;
+}
+
+.no-data {
+  text-align: center;
+  padding: 32px;
+  color: #888;
+}

package/dist/crud/files/module/components/__name@dasherize__-list/__name@dasherize__-list.component.ts.template

@@ -0,0 +1,95 @@
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { MatPaginator } from '@angular/material/paginator';
+import { MatSort } from '@angular/material/sort';
+import { MatTableDataSource } from '@angular/material/table';
+import { MatDialog } from '@angular/material/dialog';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { Router, ActivatedRoute } from '@angular/router';
+import { <%= classify(name) %> } from '../../models/<%= dasherize(name) %>.model';
+import { <%= classify(name) %>Service } from '../../services/<%= dasherize(name) %>.service';
+import { <%= classify(name) %>DeleteDialogComponent } from './<%= dasherize(name) %>-delete-dialog.component';
+
+@Component({
+  selector: 'app-<%= dasherize(name) %>-list',
+  templateUrl: './<%= dasherize(name) %>-list.component.html',
+  styleUrls: ['./<%= dasherize(name) %>-list.component.scss'],
+})
+export class <%= classify(name) %>ListComponent implements OnInit {
+  displayedColumns: string[] = ['id', <% fields.forEach(function(f, i) { %>'<%= f.name %>'<% if (i < fields.length - 1) { %>, <% } %><% }); %>, 'actions'];
+  dataSource = new MatTableDataSource<<%= classify(name) %>>();
+  isLoading = true;
+
+  @ViewChild(MatPaginator) paginator!: MatPaginator;
+  @ViewChild(MatSort) sort!: MatSort;
+
+  constructor(
+    private service: <%= classify(name) %>Service,
+    private router: Router,
+    private route: ActivatedRoute,
+    private dialog: MatDialog,
+    private snackBar: MatSnackBar
+  ) {}
+
+  ngOnInit(): void {
+    this.loadData();
+  }
+
+  loadData(): void {
+    this.isLoading = true;
+    this.service.getAll().subscribe({
+      next: (data) => {
+        this.dataSource.data = data;
+        this.dataSource.paginator = this.paginator;
+        this.dataSource.sort = this.sort;
+        this.isLoading = false;
+      },
+      error: (error) => {
+        let errorMessage = 'Failed to load data.';
+        if (error.status === 500) {
+          errorMessage = 'Server error. Please try again later.';
+        } else if (error.status === 0) {
+          errorMessage = 'Unable to connect to server. Please check your connection.';
+        }
+        this.snackBar.open(errorMessage, 'Close', { duration: 4000 });
+        this.isLoading = false;
+      },
+    });
+  }
+
+  applyFilter(event: Event): void {
+    const filterValue = (event.target as HTMLInputElement).value;
+    this.dataSource.filter = filterValue.trim().toLowerCase();
+    if (this.dataSource.paginator) this.dataSource.paginator.firstPage();
+  }
+
+  onCreate(): void {
+    this.router.navigate(['new'], { relativeTo: this.route });
+  }
+
+  onEdit(item: <%= classify(name) %>): void {
+    this.router.navigate([item.id, 'edit'], { relativeTo: this.route });
+  }
+
+  onDelete(item: <%= classify(name) %>): void {
+    const ref = this.dialog.open(<%= classify(name) %>DeleteDialogComponent, { data: item, width: '400px' });
+    ref.afterClosed().subscribe((confirmed) => {
+      if (confirmed) {
+        this.service.delete(item.id!).subscribe({
+          next: () => {
+            this.snackBar.open('<%= classify(name) %> deleted successfully.', 'Close', { duration: 3000 });
+            this.loadData();
+          },
+          error: (error) => {
+            let errorMessage = 'Delete failed.';
+            if (error.status === 404) {
+              errorMessage = '<%= classify(name) %> not found or already deleted.';
+            } else if (error.status === 500) {
+              errorMessage = 'Server error. Please try again later.';
+            }
+            this.snackBar.open(errorMessage, 'Close', { duration: 4000 });
+          },
+        });
+      }
+    });
+  }
+}

package/dist/crud/files/module/components/__name@dasherize__-list/__name@dasherize__.module.ts.template

@@ -0,0 +1,73 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ReactiveFormsModule } from '@angular/forms';
+import { HttpClientModule } from '@angular/common/http';
+import { RouterModule, Routes } from '@angular/router';
+import { MatTableModule } from '@angular/material/table';
+import { MatPaginatorModule } from '@angular/material/paginator';
+import { MatSortModule } from '@angular/material/sort';
+import { MatInputModule } from '@angular/material/input';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
+import { MatCardModule } from '@angular/material/card';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatChipsModule } from '@angular/material/chips';
+import { <%= classify(name) %>ListComponent } from './<%= dasherize(name) %>-list.component';
+import { <%= classify(name) %>DeleteDialogComponent } from './<%= dasherize(name) %>-delete-dialog.component';
+import { <%= classify(name) %>FormComponent } from '../<%= dasherize(name) %>-form/<%= dasherize(name) %>-form.component';
+
+const routes: Routes = [
+  { 
+    path: '', 
+    component: <%= classify(name) %>ListComponent,
+    title: '<%= classify(name) %> List'
+  },
+  { 
+    path: 'new', 
+    component: <%= classify(name) %>FormComponent,
+    title: 'New <%= classify(name) %>'
+  },
+  { 
+    path: ':id/edit', 
+    component: <%= classify(name) %>FormComponent,
+    title: 'Edit <%= classify(name) %>'
+  },
+  { 
+    path: '**', 
+    redirectTo: '' 
+  }
+];
+
+@NgModule({
+  declarations: [
+    <%= classify(name) %>ListComponent,
+    <%= classify(name) %>FormComponent,
+    <%= classify(name) %>DeleteDialogComponent,
+  ],
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    HttpClientModule,
+    RouterModule.forChild(routes),
+    MatTableModule,
+    MatPaginatorModule,
+    MatSortModule,
+    MatInputModule,
+    MatButtonModule,
+    MatIconModule,
+    MatDialogModule,
+    MatFormFieldModule,
+    MatCheckboxModule,
+    MatSnackBarModule,
+    MatCardModule,
+    MatProgressSpinnerModule,
+    MatTooltipModule,
+    MatChipsModule,
+  ],
+})
+export class <%= classify(name) %>Module {}

package/dist/crud/files/module/models/__name@dasherize__.model.ts.template

@@ -0,0 +1,4 @@
+export interface <%= classify(name) %> {
+  id?: number;<% fields.forEach(function(field) { %>
+  <%= field.name %>: <%= field.type %>;<% }); %>
+}