Sharing Data Between Components in Angular

Seyed Amir Mehrizi — Sun, 26 Oct 2025 11:54:29 +0000

Hey everyone.

As a dev, I’ve always found myself wrestling with the challenge of sharing data between components in my Angular projects—it’s one of those things you can’t escape! Based on my experience with the Angular framework, I’ve figured out three solid ways to tackle this.

First off, the old-school way: using @Input to pass data from a parent down to its child component. For the reverse—sending data back up—we lean on @Output. It’s pretty straightforward and works like a charm for parent-child setups.

But what happens with unrelated components? Take a look at this diagram I threw together—it’s a real head-scratcher sometimes!

Luckily, there’s a way to sort this out. I’ve been digging into RxJS lately, and using a BehaviorSubject in a service has been a game-changer. Basically, you create a service, hook it up in your repo, and boom—data flows between those unrelated components like magic!

I’ve gone deeper into this topic in a video I recently posted on YouTube, where I break it all down step-by-step. I’d really appreciate it if you’d check it out and let me know your thoughts or any questions you’ve got—drop ‘em in the comments! Thanks!

video link is : [https://www.youtube.com/watch?v=4narJ2vS4ck&t=14s]

Master RxJS Error Handling Once and for All — 3 Core Strategies You Should Know

Seyed Amir Mehrizi — Tue, 14 Oct 2025 07:45:46 +0000

As developers, we often focus too much on the happy path — the perfect scenario where everything works smoothly and no API ever fails.

But in the real world, one tiny error can derail your entire app from its destination.

Error handling in RxJS is one of those underrated concepts that even experienced Angular devs struggle with.

In this post (and the video linked below), I’ll break down 3 core strategies that can help you design a clean, scalable, and resilient RxJS Error Handling Architecture.

***Why Error Handling Matters*

Every time an HTTP request fails or a stream throws an unexpected error, your app risks breaking the entire reactive chain.

Without proper handling, users end up facing blank screens, frozen UI, or inconsistent data.
Error handling isn’t just about “catching” errors — it’s about controlling how your app recovers and communicates failure gracefully.

Strategy #1: Replace

The Replace strategy means catching the error and replacing the failed observable with a safe fallback value or a new observable — so the stream can continue gracefully.
It’s perfect when you don’t want one error to break the entire chain.

this.http.get('/api/products').pipe( catchError(err => { console.warn('Error occurred, replacing with empty list:', err); return of([]); // replace with a fallback value }) );

Keeps the UI functional

But may hide deeper issues if overused

Use it when recovery is possible — for example, showing cached data or a default UI.

Strategy #2: Rethrow

The Rethrow strategy lets the error bubble up after logging or side effects —

so other parts of your app (like interceptors or global handlers) can manage it.

this.http.get('/api/orders').pipe( catchError(err => { this.logger.log(err); return throwError(() => err); // rethrow to higher level }) );

Enables centralized/global handling

Be careful not to rethrow endlessly — always ensure the stream has a terminal point that handles it

Use it when you want consistent global handling logic (like redirecting to login on 401 errors).

Strategy #3: Retry

The Retry strategy simply means “try again before giving up.”

It’s great for transient errors such as flaky network requests or slow APIs.

this.http.get('/api/data').pipe( retry(3), // retry up to 3 times catchError(err => { console.error('Failed after 3 retries:', err); return throwError(() => err); }) );
Great for network resilience

Avoid retrying on logical or validation errors (e.g., 400 Bad Request)

You can also use retryWhen for smarter logic (like exponential backoff or conditional retry).

Watch the Full Breakdown

Master RxJS Error Handling Once and for All | 3 Core Strategies (YouTube)

In the video, I go deeper into:

When to use each strategy
How to combine them effectively
Real-world examples from Angular apps

*## Discussion
*
How do you handle errors in your RxJS or Angular projects?

I’d love to hear how you structure your error-handling logic — drop your thoughts below.

## Final Thoughts
**
Error handling isn’t just about preventing crashes — it’s about **designing predictable, maintainable, and resilient applications.

If you found this helpful, consider following me here on Dev.to or checking out my YouTube channel for more Angular + RxJS insights
🎬 frontDecoder

*Thanks for reading and happy coding!