Subject in Angular 2

Hello all,

Here I am with my second piece of writing on JavaScript solutions to common problems.

In this article we will look at Subject in Angular and its comparison with EventEmitter.

First lets know what Subject is?

Subject is an Observable. But an Observable only allows you to subscribe to an event whereas subject allows you to both publish and subscribe to an event.

So Subject allows your service to be used as both a publisher and subscriber.

Question:

Now a Question always arise that why should we use Subject instead of EventEmitter provided by Angular itself whereas Subject is part rxjs package which is a third party provider.

In my opinion EventEmitter is expected to emit events between components or directives. As per EventEmitter Documentation which says: use by directives and components to emit custom events. 

Eventhough you can use it as you want, but I think you will be misusing it.

So using Subject is a better choice.

Now lets dive into the implementation part of it.

Implementation

Lets first understand what we will do in the example below.

This diagram will help you understand more about the example:

So, Lets Start the coding part of the example.

In your message.service.ts file add the following code:

Here import Subject from 'rxjs/Subject'. After that create a public variable message as instance of Subject along with its type, here type will be string.

Also create a function setMessage which will publish the value of variable message to all its subscriber set by someone who calls this function with message in its parameter.

In your home.component.html file add the following code:

Just add an input box and a button. On button's click setMessage function would be called with your message as a parameter. Here #message is a local variable that will store the whole input tag in it.

 Now, In your home.component.ts file add the following code:

Here first import your MessageService. Then we need only one function which will call the setMessage function in the MessageService and publish the entered message to its subscribers.

Also, As I told that this event will represent the whole input tag. So I have to access the text entered using the value property of the event recieved.

In your app.component.html file add the following code:

In this code I have used bootstrap. Also the div with *ngIf in it will only be displayed only when we will have some value in the message variable. And to that we will subscribe to.

In your app.component.ts file add the following code:

Here in this code first import Subscription from 'rxjs/Subscription' and also the MessageService. 

Now create a variable subscription of type Subscription. Here this variable will be used to subscribe and unsubscribe to any observable you want. 

In your ngOnInit function you just need to subscribe to the message property of the MessageService. 

And don't forget to unsubscribe to the subscription in your ngDestroy function.

At last you need to provide your MessageService in the Providers section in the app.module.ts file.

Final Output will look like this when you will enter any message and click on the button.

And for people who like watching video can follow the link below.

And Do visit this page for more Javacript posts.

Thank You.