Angular Observable, Subject, BehaviourSubject, ReplaySubject

Observable : – When we do subscribe the observable will start the trigger (Observer exist inside the observable)

constructor() {
	var obs$ : Observable = of(1.2,3);
	obs$.subscribe(x => console.log('From app sub ', x));
}

Subject : – When we call the subject it will just only register the subject, we manually control the subject. We emit the value by calling the next() method
Ex: Through the service we can emit the values then we can subscribe in multiple component because when the data update in service that can be available / aware in all subscribers. ex : when we want show the user selection count in one of our component, if we want show the number of count in other component we can do that through this subject.

constructor(){
	var sub : Subject = new Subject();
	sub.subscribe(x => console.log('From app sub :', x));
	sub.next('John');
	
	sub.subscribe(x => console.log('From app sub :', x));
	sub.next('John Smith);
		
}

// From app sub : John
// From app sub : John Smith

Example 1 : Create a Subject from service emit from a component and receive the data in two components

app.service.ts

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

@Injectable()
export class Appservice {
	sub : Subject;

	constructor() {
		this.sub = new Subject();
	}
}
sendData(data: number){
	this.sub.next(data);
}

Click the emit button from hello component, this emit function will trigger the subject through subject then all the subscriber component will receive the data (random value)
hello.component.ts

constructor(private appService:AppService) {
	this.appservice.sub.subscribe(x => console.log('From hello sub : ', x));
}
emit(){
	this.appservice.sendData(Math.random());
}

app.component.ts

constructor(private appService:AppService) {
	this.appservice.sub.subscribe(x => console.log('From appsub : ', x));
}

Example 2 : Subject can be used as Observable using “asObservable”

When we are making subject available in component (which subscribe method) from service, we can emit the subject from component (Ex: Sub01). Sometimes it will be useful and sometimes it needs to be restricted. If we dont want to alter the subject we can convert the subject to “asObservable”.

Example 1 : sub01
app.component.ts

this.appservice.sub.next("update subject")  
this.appservice.obs$.next('update') // Invalid

We can restrict the modification of a subject by “asObservable”. Keep subject as private and observable as public.

app.service.ts

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

@Injectable()
export class Appservice {
	private sub : Subject;
        public obs$ : Observable;

	constructor() {
		this.sub = new Subject();
                this.obs$ = this.sub.asObservable();
	}
}
sendData(data: number){
	this.sub.next(data);
}

Receive the value in appcomponent
app.component.ts

constructor(private appService:AppService) {
	this.appservice.obs$.subscribe(x => console.log('From appsub : ', x));
}

Type of Subject

• Subject – Subject will not retain value
• Behavior Subject – BehaviorSubject will retain value and we can set initial value
• Replay Subject – It will keep value in memory but we can decide how many values it should be in memory (no of items)

Subject just only register while we subscribe and it will not triggered.
But BehaviorSubject will trigger as soon as we subscribe. It keep the previous/last emitted data in memory

rxjs-dev.firebaseapp
learnrxjs

Example 1

app.service.ts

export class appservice {

  private sub: subject;
  public obs$: Observable;

  private behSub: BehaviourSubject;
  behObs$: Observable;

  private replaySub: BehaviourSubject;
  replayObs$: Observable;

  constructor() {
    this.sub = new subject();
    this.obs$ = this.sub.asObservable();
    this.behSub = new BehaviourSubject(1000);
    this.behObs$ = this.behSub.asObservable();
    this.replaySub = new ReplaySubject(2);
    this.replayObs$ = this.replaySub.asObservable();
  }

  sendReplyData(data: number) { this.replaySub.next(data); }

  sendData(data: number) { this.sub.next(data); }

  sendBehData(data: number) { this.behSub.next(data); }

}

html will have the click event(emit) button.

hello.component.ts

isSub = false;
count = 0;
constructor() { }
emit(){
  this.appservice.sendData(Math.random())
  this.appservice.sendBehData(Math.random())
  this.appservice.sendReplyData(Math.random())
  if (!this.isSub) {
    this.isSub = true;
    this.appservice.behObs$.subscribe(x => {
      console.log('From hello beh obs : ', x);
    });

    this.count++;

    if (this.count > 3) {
      this.appservice.replayObs$.subscribe(x => {
        console.log('From hello replayObs$ : ', x)
      })
    }

  }
}

//this.appservice.sub.next('TestString'); - To avoid this use asObservable

app.component.ts

this.appservice.sub.subscribe(x => {
  console.log('From app sub : ', x)
})

this.appservice.obs$.subscribe(x => {
  console.log('From app obs$ : ', x)
})

this.appservice.behObs$.subscribe(x => {
  console.log('From app behObs$ : ', x)
})

this.appservice.replayObs$.subscribe(x => {
  console.log('From app replayObs$ : ', x)
})