Subject with Example | Angular2+ ~ Dotnet Guru ~

What is a Subject?

Subject is a type of Observable in RxJs Library in which we can send our data to other components or services.

While Observables are unicast by design. Subjects can multicast. Multicasting basically means that one Observable execution is shared among multiple subscribers.

A Subject is like an Observable but can multicast to many observers which means subject is at the same time an Observable and an Observer. Understanding of Subject

Important points of subjects:

A Subject is a Special type of Observable that allows value to be multicasted to many Observers.
Subject are like event emitters.
No Initial Value allowed

subject =new Subject<datatype>();  

Lets create a basic demo for subject.

1- Create an angular application using below command: ng new subjectDemo

2- Add three components in app/src using below command:

ng g c Component1
ng g c Component2
ng g c Component3

3- After that open Component1.component.html file and paste the below code.

<div style="background-color: aliceblue;" class="card">  
    <div class="card-body">  
      <h5 class="card-title">Component 1</h5>  
      <input name="comp1" #comp1 type="text" />  
      <button (click)="onSubmit(comp1)">Submit</button>  
      <p class="card-text">{{Component1Data}}</p>  
    </div>  
</div> 

4- After that open Component1.component.ts file and paste the below code.

import { Component } from '@angular/core';
import { DataSharingService } from '../dataService.service';

@Component({
  selector: 'app-component1',
  templateUrl: './component1.component.html',
  styleUrls: ['./component1.component.scss']
})
export class Component1Component{

  Component1Data: any = '';  
  
  constructor(private DataSharing: DataSharingService) {  
    this.DataSharing.SharingData.subscribe((res: any) => {  
      this.Component1Data = res;  
    })  
  }  
  
  onSubmit(data: { value: any; }) {  
    this.DataSharing.SharingData.next(data.value);  
  }  
}

5- After that open Component2.component.html file and paste the below code.

<div style="background-color:antiquewhite" class="card">  
    <div class="card-body">  
      <h5 class="card-title">Component 2</h5>  
      <input name="comp2" #comp2 type="text" />  
      <button (click)="onSubmit(comp2)">Submit</button>  
      <p class="card-text">{{Component2Data}}</p>  
    </div>  
</div> 

6- After that open Component2.component.ts file and paste the below code.

import { Component } from '@angular/core';
import { DataSharingService } from '../dataService.service';

@Component({
  selector: 'app-component2',
  templateUrl: './component2.component.html',
  styleUrls: ['./component2.component.scss']
})
export class Component2Component{

  Component2Data: any = '';  
  constructor(private DataSharing: DataSharingService) {  
    this.DataSharing.SharingData.subscribe((res: any) => {  
      this.Component2Data = res;  
    })  
  }  
  
  onSubmit(data: { value: any; }) {  
    this.DataSharing.SharingData.next(data.value);  
  }  
}

7- After that open Component3.component.html file and paste the below code.

<div style="background-color:burlywood" class="card">  
    <div class="card-body">  
      <h5 class="card-title">Component 3</h5>  
      <input name="comp3" #comp3 type="text" />  
      <button (click)="onSubmit(comp3)">Submit</button>  
      <p class="card-text">{{Component3Data}}</p>  
    </div>  
</div>

8- After that open Component3.component.ts file and paste the below code.

import { Component, OnInit } from '@angular/core';
import { DataSharingService } from '../dataService.service';

@Component({
  selector: 'app-component3',
  templateUrl: './component3.component.html',
  styleUrls: ['./component3.component.scss']
})
export class Component3Component {
  Component3Data: any = '';  
  
  constructor(private DataSharing: DataSharingService) {  
    this.DataSharing.SharingData.subscribe((res: any) => {  
      this.Component3Data = res;  
    })
  }

  onSubmit(data: { value: any; }) {  
    this.DataSharing.SharingData.next(data.value);  
  } 
}

9- Now in the app.component.html file lets import the components selector using the following command.

<div style="text-align: center; font-size: x-large; font-family: monospace;">Example of Subject in RxJs</div>  
<div style="margin:10px" class="card-deck">  
  <app-component1></app-component1>  
  <app-component2></app-component2>  
  <app-component3></app-component3>  
</div> 

10- Now let's create a service so that one service can transfer data and use the stream of data.

import { Injectable } from '@angular/core';  
import { Subject } from 'rxjs';  
  
@Injectable({  
  providedIn: 'root'  
})  
export class DataSharingService {  
  
  SharingData = new Subject();  
  constructor() { }  
}