Chapter 15.1☕ 25 min read

Biryani Shop App — Full CRUD

Build a complete CRUD biryani management app using everything you've learned: Components (Ch 2), Services (Ch 5), Routing (Ch 6), HTTP (Ch 7), Forms (Ch 8), Signals (Ch 10).

01What We'll Build

What We'll Build

A full CRUD biryani management app:

List all biryanis with search and filter by category
Add new biryani with form validation
Edit existing biryani (reuse form)
Delete with confirmation
Lazy loaded routes
Signal-based state management

"Pura restaurant management — menu add karo, edit karo, delete karo"

Uses concepts from: Components (Ch 2), Services (Ch 5), Routing (Ch 6), HTTP (Ch 7), Forms (Ch 8), Signals (Ch 10).

02Project Setup

Project Setup & Structure

ng new biryani-shop --standalone --style=scss --routing

Folder structure:

src/app/
├── components/
│   ├── biryani-list/
│   ├── biryani-form/
│   ├── biryani-card/
│   └── search-bar/
├── services/
│   ├── biryani.service.ts
│   └── api.service.ts
├── models/
│   └── biryani.model.ts
└── pages/
    ├── home/
    ├── menu/
    ├── add-edit/
    └── about/

"Structure = restaurant ka naksha — pehle plan, phir build karo"

03Backend Connection

Building Step by Step — Backend Connection

Step 1: Create Biryani interface (Ch 7.2)

Step 2: Create BiryaniService with signal (Ch 5.1, 10.1)

Step 3: HTTP methods — getAll, getById, create, update, delete (Ch 7.1, 7.2)

Step 4: Error handling with catchError (Ch 7.4)

"Pehle service banao — kitchen ready karo before orders aayein"

04UI & Forms

Building Step by Step — UI & Forms

Step 5: BiryaniListComponent — @for loop, search filter (Ch 3.7, 10.2)

Step 6: BiryaniFormComponent — reactive form with FormBuilder (Ch 8.3)

Step 7: Validation — required, minLength, custom validators (Ch 8.4, 8.5)

Step 8: Add/Edit same form — detect edit mode from route param (Ch 6.2)

"Ab UI banao — menu card, form, validation sab"

05Connect Everything

Building Step by Step — Connect Everything

Step 9: Routes with lazy loading (Ch 6.4)

Step 10: Delete confirmation dialog

Step 11: Success/error toast notifications

Step 12: Loading states with signals

"Sab connect karo — routing, delete, notifications, loading"

Final: ng build --configuration production && vercel deploy

Project Summary

Full CRUD with signals, HTTP, forms, routing
Lazy loading for each page route
Reactive forms with validation
Signal-based state management in service
Search + filter with computed signals

Previous14.4 — Deploy 📋 All Chapters Next Chapter15.2 — Hyderabad Job Board →