DEV Community

Seyed Amir Mehrizi
Seyed Amir Mehrizi

Posted on

Sharing Data Between Components in Angular

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]

Top comments (0)