Our Angular app looks great but there's a problem. Every time we refresh the
browser, all our data disappears. That's because it lives in a TypeScript file,
not a real backend.
In this video we fix that by wiring up Angular's HttpClient to json-server — a
zero-config fake REST API that reads and writes to a plain JSON file. Your data
will now survive browser refreshes, and we'll handle every real-world detail:
loading states, error messages, CORS, race conditions, and the BehaviorSubject
refresh pattern.
What you'll learn:
→ json-server setup and db.json structure
→ provideHttpClient(withFetch()) in app.config.ts
→ Replacing hardcoded signals with HTTP-backed toSignal()
→ The refresh$ pattern using BehaviorSubject + switchMap
→ GET, POST, and PATCH in practice
→ Loading spinners and graceful error handling in templates
Part of the Learning Angular in AI Era series — Episode 4.
#Angular #HttpClient #RxJS #jsonserver #TypeScript #AngularTutorial
