Subjects in Angular 2/4/5

An observable allows you to subscribe only whereas a subject allows you to both publish and subscribe.

So a subject allows your services to be used as both a publisher and a subscriber.

As of now, I’m not so good at Observable so I'll share only an example of Subject.

Let’s understand better with an Angular CLI example. Run the below commands:

npm install -g @angular/cli

ng new angular2-subject

cd angular2-subject

ng serve

Replace the content of app.component.html with:

<div *ngIf="message">  {{message}}</div>

<app-home></app-home>

Run the command ng g c components/home to generate the home component. Replace the content of home.component.html with:

<input type="text" placeholder="Enter message" #message><button type="button" (click)="setMessage(message)" >Send message</button>

#message is the local variable here. Add a property message: string; to the app.component.ts's class.

Run this command ng g s service/message. This will generate a service at src\app\service\message.service.ts. Provide this service to the app.

Import Subject into MessageService. Add a subject too. The final code shall look like this:

import { Injectable } from '@angular/core';import { Subject } from 'rxjs/Subject';

@Injectable()export class MessageService {

  public message = new Subject<string>();

  setMessage(value: string) {    this.message.next(value); //it is publishing this value to all the subscribers that have already subscribed to this message  }}

Now, inject this service in home.component.ts and pass an instance of it to the constructor. Do this for app.component.ts too. Use this service instance for passing the value of #message to the service function setMessage:

import { Component } from '@angular/core';import { MessageService } from '../../service/message.service';

@Component({  selector: 'app-home',  templateUrl: './home.component.html',  styleUrls: ['./home.component.css']})export class HomeComponent {

  constructor(public messageService:MessageService) { }

  setMessage(event) {    console.log(event.value);    this.messageService.setMessage(event.value);  }}

Inside app.component.ts, subscribe and unsubscribe (to prevent memory leaks) to the Subject:

import { Component, OnDestroy } from '@angular/core';import { MessageService } from './service/message.service';import { Subscription } from 'rxjs/Subscription';

@Component({  selector: 'app-root',  templateUrl: './app.component.html'})export class AppComponent {

  message: string;  subscription: Subscription;

  constructor(public messageService: MessageService) { }

  ngOnInit() {    this.subscription = this.messageService.message.subscribe(      (message) => {        this.message = message;      }    );  }

  ngOnDestroy() {    this.subscription.unsubscribe();  }}

That’s it.

Now, any value entered inside #message of home.component.html shall be printed to {{message}}inside app.component.html

Originally posted on Stackoverflow

Subjects in Angular 2/4/5 was originally published in Hacker Noon on Medium, where people are continuing the conversation by highlighting and responding to this story.