Angular Components Communication

In this blog we will be discussing about the data transfer between different components having no relationship in Angular framework.

Introduction

In my last blog, we discussed the data transfer between the components when there was a parent-child relationship. However, in the real-time project, we won't get the chance to work with only this type of component communication, we will come across scenarios where we will have to transfer the data between the components where there won't be any relationship.

The question is how to do that?

And the answer is the Subject or the BehaviourSubject.

The Subject and the BehaviourSubject

The Subject and the BehaviourSubject are the types of Observables that are provided by the RxJS library, this library is basically the one that provides us the ability to work asynchronously in the application.

This statement might not be clear at the moment but don't worry we will be discussing everything in detail.

There are a lot of features provide by this library but those are not in focus at the moment, so we are skipping that for now.

Implementation

Let's do a simple activity to understand the Subject and the BehaviourSubject.

Let's create a fresh/simple Angular application, we just need the basic structure in place that's it. I already have one created with a navigation menu which can be ignored for now.

Now I want to place two independent components on the UI and transfer data between those, so I created two simple components and placed those side by side in appComponent.html file.

The first component is having the textbox and the button and the second is having the label with default value as "nothing".

What I am looking for is to transfer the textbox value from component1 to the label of component2.

 

Above is the code of the appComponent.html file. I have used a few of the bootstrap classes for a better look and feel which can be ignored for now.

Now, in order to link these two components, I need to have something in common, for that, I have created a common service with the below code.

private subject = new Subject < any > ();
sendMessage(message: string) {
    this.subject.next({
        text: message
    });
}
getMessage(): Observable < any > {
    return this.subject.asObservable();
}

Let's understand this line by line. 

First, I created an instance of a Subject of type any, then used that Subject as per the requirement.

The method sendMessage is used to populate the Subject.

The method getMessage is used to fetch the populated values from the Subject.

There is a method next available to the Subject which is used to populate the data in it and as we discussed earlier that it is a type of Observable so the return type of getMessage method will be Observable.

Now, how to use the Subject in the component classes?

The above screenshot shows the code written in component1 and in its code-behind file. We are just passing the value entered in the textbox to the common service to populate the Subject on the click event of the button. Notice that in this component we have the click event from where we can populate the data in the Subject.

Above is the code of component2 and its code-behind. In this, we are subscribing to the data which was populated in the Subject, and initializing its value to a class level property whose default value is "nothing", and ultimately binding it to the UI.

As Subject is a type of Observable, so whenever there is a change in its value the subscribe method gets invoked and subscribes to the latest value.

This is how a Subject or the BehaviourSubect is implemented.

Conclusion

The Subject or the BehaviourSubject is a type of Observable provided by the RxJS library.

These are used at the global level and can be subscribed from any component.

Note
The only difference between the Subject and the BehaviourSubject is that the BehaviourSubject needs some default value at the time of instance creation however it is not required for a Subject. The rest of the things are the same for both.