Future is Resource: Angular’s Next-Gen API

Explore the new experimental Angular Resource API introduced in v19. This talk dives into how the Resource API simplifies data fetching with built-in support for loading and error states, making Angular apps feel more native and reactive. Includes real-world demos comparing traditional HttpClient with resource, RxResource, and HttpResource approaches. Presented at ng Delhi Meetup 2025.

Transcript

1. Diwakar Singh 31/05/2025 Angular’s Next-Gen API Future is Resource
2. Angular’s new Resource API may seem confusing! Isn’t HttpClient + RxJS enough? 🌀 Why does Angular need a new way to fetch data? Diwakar Singh
3. • Request data using HttpClient → returns Observable
 • Subscribe to get data • Let zone.js detect changes and update the UI • Worked fi ne... until apps grew larger! 👴 The HttpClient Era Diwakar Singh
4. ⚠ Zone.js Bottlenecks • Tracked all async events (HTTP, timers, etc.) • Triggered too many UI updates • Slowed performance & bloated bundles Diwakar Singh
5. ✓ Reactive, synchronous, and always hold a value ✓ No Zone.js needed ✓ Perfect for UI state updates but.. 🧩 HttpClient Doesn’t Fit Signals ➡ Signals need direct values ➡ HttpClient gives Observable ➡ Manual hacks to convert data ➡ Messy, fragile, unergonomic 🌟 Signals to the Rescue Diwakar Singh
6. I bridge async data to signals! 🦸 The Resource API ✦ Fetches data into a signal ✦ Auto-updates UI when data arrives ✦ No manual subscriptions ✦ Cancels stale HTTP calls, etc. Diwakar Singh
7. 📊 Choosing the Right Resource API Diwakar Singh
8. 🔁 Let’s See the Di ff erence in Code We’ll build a user search list with fi lter input: First: old way → RxJS + HttpClient + manual logic Then: new way → Resource API ✨ Without further a do, lets jump in.. Diwakar Singh
9. If you're using signals, Resource API is the missing puzzle piece you’ve been waiting for. 🧪 Still Experimental Not even in Dev Preview — subject to change. ✅ Read-Only Magic Perfect for GET requests and reactive UIs. 🚫 Avoid for Writes Not suited for POST, PUT, or DELETE. ⚠ Before You Dive In… Diwakar Singh
10. 🙏 Thank You for Your Attention! Diwakar Singh