Stop Storing Backend DTOs Directly in Your Angular Feature State

Your backend response shape is a transport contract. It should not automatically become your Angular domain model, store state, and UI contract.

Dipak Ahirav

13 min read

·

6 days ago

--

1

Listen

Share

Press enter or click to view image in full size

A very common Angular data flow looks like this:

getCustomer(id: string) {
  return this.http.get<CustomerDto>(
    `/api/customers/${id}`
  );
}

Then:

readonly customer =
  signal<CustomerDto | null>(null);

And finally:

<h2>
  {{ customer()?.first_name }}
  {{ customer()?.last_name }}
</h2>

@if (
  customer()?.status_code === 'A'
) {
  <span>Active</span>
}

Technically, this works.

It may even feel efficient.

No mapping.

No extra interfaces.

No transformation layer.

The API returns data, Angular stores it, and the template renders it.

Not a Member? Read for FREE here.

Simple.

Until the backend changes.

Then suddenly:

API response change
      ↓
Store changes
      ↓
Selectors change
      ↓…