Chapter 7.2☕ 15 min read

POST, PUT, DELETE with TypeScript Models

TypeScript models ensure you send and receive the right data. POST creates, PUT replaces, DELETE removes — all with type safety.

01Why TypeScript Models Matter

TypeScript models define exactly what data you send to and receive from the API. They catch errors at compile time, not runtime.

// Model for creating a new biryani
export interface CreateBiryani {
  name: string;
  price: number;
  category: string;
  description: string;
}

// Model for updating — partial fields allowed
export interface UpdateBiryani extends Partial<CreateBiryani> {
  id: number;
}

// Model for reading from API (includes server-generated id)
export interface Biryani extends CreateBiryani {
  id: number;
  rating: number;
  available: boolean;
  createdAt: string;
}

"Model = form — bina model ke koi bhi data bhej sakte ho — galat data jaayega."

Why separate Create and Update interfaces?

Create requires all fields — you need name, price, category to create a biryani
Update is partial — you might only update the price, not the name
Read includes server-generated fields — id, rating, createdAt come from backend
TypeScript ensures at compile time that you don't send wrong data

02POST — Create New Data

POST creates new data on the server. The server generates an id and returns the created object.

import { Component, inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Biryani, CreateBiryani } from './biryani.models';

@Component({...})
export class BiryaniFormComponent {
  private http = inject(HttpClient);

  createBiryani(name: string, price: number) {
    const newBiryani: CreateBiryani = {
      name,
      price,
      category: 'chicken',
      description: `Delicious ${name} biryani`
    };

    this.http.post<Biryani>('/api/biryani', newBiryani)
      .subscribe(created => {
        console.log('Created biryani with id:', created.id);
      });
  }
}

"POST = naya order dene ka button — kitchen mein naya dish banega."

First argument: URL
Second argument: request body (the data to create)
Returns: the created object (with server-generated id)
Content-Type: application/json — HttpClient sets this automatically

03PUT — Update Existing Data

PUT replaces an entire resource with new data. You must send ALL fields, even unchanged ones.

updateBiryani(id: number, updates: UpdateBiryani) {
  // Send ALL fields — PUT replaces the entire resource
  const fullUpdate: Biryani = {
    id,
    name: updates.name ?? existingName,
    price: updates.price ?? existingPrice,
    category: updates.category ?? existingCategory,
    description: updates.description ?? existingDesc,
    rating: existingRating,
    available: existingAvailable,
    createdAt: existingCreatedAt
  };

  this.http.put<Biryani>(`/api/biryani/${id}`, fullUpdate)
    .subscribe(updated => {
      console.log('Updated:', updated);
    });
}

"PUT = pura plate replace — naya rice, naya masala, sab naya."

PUT vs PATCH:

PUT — replaces the ENTIRE resource. Send all fields.
PATCH — partial update. Send only the fields you want to change.
Most REST APIs support both. PUT is idempotent (same call multiple times = same result).

For PATCH:

this.http.patch<Biryani>(`/api/biryani/${id}`, { price: 399 })
  .subscribe(updated => console.log('Price updated:', updated));

04DELETE — Remove Data

DELETE removes data from the server.

deleteBiryani(id: number) {
  if (confirm('Delete this biryani? Are you sure?')) {
    this.http.delete(`/api/biryani/${id}`)
      .subscribe({
        next: () => {
          console.log('Deleted successfully');
          this.loadBiryanis(); // Refresh list
        },
        error: (err) => {
          console.error('Delete failed:', err);
        }
      });
  }
}

"DELETE = order cancel — hata do, khatam."

No body needed (most APIs — some may accept an optional body)
Returns: 204 No Content (empty response) or the deleted item
Always confirm before delete — prevent accidental data loss
After successful delete, refresh the list to reflect changes

Type for delete:

delete(id: number): Observable<void>
// void because 204 returns no body

05Complete CRUD Service Pattern

Here's the complete CRUD service pattern — the standard recipe for every API service:

import { Injectable, inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { Biryani, CreateBiryani, UpdateBiryani } from './biryani.models';

@Injectable({ providedIn: 'root' })
export class BiryaniService {
  private http = inject(HttpClient);
  private apiUrl = '/api/biryani';

  // READ — Get all
  getAll(): Observable<Biryani[]> {
    return this.http.get<Biryani[]>(this.apiUrl);
  }

  // READ — Get by ID
  getById(id: number): Observable<Biryani> {
    return this.http.get<Biryani>(`${this.apiUrl}/${id}`);
  }

  // CREATE — Post new
  create(data: CreateBiryani): Observable<Biryani> {
    return this.http.post<Biryani>(this.apiUrl, data);
  }

  // UPDATE — Put full update
  update(id: number, data: UpdateBiryani): Observable<Biryani> {
    return this.http.put<Biryani>(`${this.apiUrl}/${id}`, data);
  }

  // DELETE — Remove
  delete(id: number): Observable<void> {
    return this.http.delete<void>(`${this.apiUrl}/${id}`);
  }
}

"Ye 5 methods = standard CRUD recipe — har service mein same pattern."

Every Angular HTTP service follows this pattern. Once you learn it, you can apply it to any resource — users, products, orders, anything.

Key Takeaways

✅ TypeScript models (Create, Update, Read interfaces) catch errors at compile time
✅ POST creates new data — returns created object with server-generated id
✅ PUT replaces entire resource — send ALL fields; PATCH for partial updates
✅ DELETE removes data — always confirm before deleting, handle 204 responses
✅ Standard CRUD pattern: getAll, getById, create, update, delete — reusable across all services

Previous7.1 — HttpClient Setup 📋 All Chapters Next Chapter7.3 — Interceptors →