Complete CRUD Project

1import { Component, Injectable, computed, effect, inject, input, output, signal } from '@angular/core';
2import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
3

4export type Product = { id: number; name: string; price: number };
5type ProductInput = Omit<Product, 'id'>;
6

7// ── API (replace with HttpClient calls) ──
8@Injectable({ providedIn: 'root' })
9export class ProductApi {
10  private db = new Map<number, Product>([[1, { id: 1, name: 'Pen', price: 20 }], [2, { id: 2, name: 'Notebook', price: 60 }]]);
11  private nextId = 3;
12  private delay<T>(value: T) { return new Promise<T>(r => setTimeout(() => r(value), 200)); }
13  list() { return this.delay([...this.db.values()]); }
14  create(p: ProductInput) { const item = { ...p, id: this.nextId++ }; this.db.set(item.id, item); return this.delay(item); }
15  update(p: Product) { this.db.set(p.id, p); return this.delay(p); }
16  remove(id: number) { this.db.delete(id); return this.delay(true); }
17}
18

19// ── Store ──
20@Injectable({ providedIn: 'root' })
21export class ProductStore {
22  private api = inject(ProductApi);
23  readonly items = signal<Product[]>([]);
24  readonly status = signal<'loading' | 'ready' | 'error'>('loading');
25  readonly editing = signal<Product | null>(null);
26  readonly query = signal('');
27  readonly visible = computed(() => {
28    const q = this.query().toLowerCase();
29    return this.items().filter(p => p.name.toLowerCase().includes(q));
30  });
31

32  async load() {
33    try { this.items.set(await this.api.list()); this.status.set('ready'); }
34    catch { this.status.set('error'); }
35  }
36  async save(input: ProductInput) {
37    const current = this.editing();
38    if (current) {
39      const saved = await this.api.update({ ...current, ...input });
40      this.items.update(list => list.map(p => (p.id === saved.id ? saved : p)));
41      this.editing.set(null);
42    } else {
43      const created = await this.api.create(input);
44      this.items.update(list => [...list, created]);
45    }
46  }
47  async remove(product: Product) {
48    const before = this.items();
49    this.items.update(list => list.filter(p => p.id !== product.id));    // optimistic
50    try { await this.api.remove(product.id); } catch { this.items.set(before); }
51  }
52}
53

54// ── Form (create + edit) ──
55@Component({
56  selector: 'app-product-form',
57  imports: [ReactiveFormsModule],
58  template: `
59    <form [formGroup]="form" (ngSubmit)="submit()">
60      <input formControlName="name" placeholder="Name" />
61      <input formControlName="price" type="number" placeholder="Price" />
62      <button [disabled]="form.invalid">{{ editing() ? 'Update' : 'Add' }}</button>
63      @if (editing()) { <button type="button" (click)="cancelled.emit()">Cancel</button> }
64    </form>
65  `,
66})
67export class ProductForm {
68  editing = input<Product | null>(null);
69  saved = output<ProductInput>();
70  cancelled = output<void>();
71  form = inject(FormBuilder).nonNullable.group({
72    name: ['', [Validators.required, Validators.minLength(2)]],
73    price: [0, [Validators.required, Validators.min(1)]],
74  });
75

76  constructor() {
77    effect(() => {                               // refill the form when the edited product changes
78      const p = this.editing();
79      this.form.reset(p ? { name: p.name, price: p.price } : { name: '', price: 0 });
80    });
81  }
82

83  submit() {
84    this.saved.emit(this.form.getRawValue());
85    this.form.reset();
86  }
87}
88

89// ── Page ──
90@Component({
91  selector: 'app-products-page',
92  imports: [ProductForm],
93  template: `
94    <h1>Products ({{ store.items().length }})</h1>
95    @switch (store.status()) {
96      @case ('loading') { <p>Loading…</p> }
97      @case ('error') { <p role="alert">Could not load products.</p> }
98      @default {
99        <input #q (input)="store.query.set(q.value)" placeholder="Search" />
100        <table>
101          @for (p of store.visible(); track p.id) {
102            <tr>
103              <td>{{ p.name }}</td><td>₹{{ p.price }}</td>
104              <td><button (click)="store.editing.set(p)">Edit</button> <button (click)="confirmDelete(p)">Delete</button></td>
105            </tr>
106          } @empty {
107            <tr><td colspan="3">No products match.</td></tr>
108          }
109        </table>
110        <h2>{{ store.editing() ? 'Edit ' + store.editing()!.name : 'Add a product' }}</h2>
111        <app-product-form [editing]="store.editing()" (saved)="store.save($event)" (cancelled)="store.editing.set(null)" />
112      }
113    }
114  `,
115})
116export class ProductsPage {
117  protected store = inject(ProductStore);
118  constructor() { this.store.load(); }
119  confirmDelete(p: Product) {
120    if (confirm(`Delete ${p.name}?`)) this.store.remove(p);
121  }
122}

After “Loading…”, a table shows Pen and Notebook with “Products (2)”. Adding “Bag” at 650 appends a row. Edit fills the form (“Edit Pen”) and the button changes to Update; saving updates the row and returns to “Add a product”. Delete asks for confirmation and removes the row immediately. Searching filters the table as you type.