DEV Community


Angular: Interaction between Component with Shared service

jalpesh Vadgama
Full Stack Developer, Blogger, Microsoft Mvp, Mentor, Lifelong learner, 14 Years of Experience in JavaScript, web and Microsoft technologies. ASP.NET MVC/Core, C#, Angular,Vue.js, and node.js
・1 min read

In this video, We are going to learn how we can have interaction between components via shared service.

If you have not seen my first video about Interaction between Component with @Input and @Output in Angular and then I would highly recommend it to see that video. Following is a link to that video.

In this video, I have created a shared service that has got a message source as behavior subject from rx.js which holds an observable. By default, I have initialized it as the default message. Then I have created a new method where I have created a method called "change message" from where the user can change the message.

After that, I have injected this service into two different components and subscribe to current message observable. I have also created a button click event in both components which calls the Change message method from shared service. As we have subscribed to both our message observable it will reflect in message change in both components.

Source Code for this video is available on -

If you like this video and wanted to see a similar kind of video then, please subscribe to my youtube channel at -

Discussion (0)