Observable, Subject , Behavior Subject using RxJS:

 

Create an Observable using RxJS: 

Import the Observable            

        

        import { Observable } from 'rxjs';

The Observable execution deliver three types of values:

• "Next" - sends a value such as a Number, a String, an Object, etc.
• "Error - sends the Error or exception.
• "Complete" - does not send a value after the Complete

                 

                 ngOnInit(): void {

                  this.observable$ = new Observable(subscriber => {

                    subscriber.next(1);

                    subscriber.next(2);

                    subscriber.next(3);

                    subscriber.complete(); //Complete the subscribing here

                    subscriber.next(4);  // Value not send after complete

                  });

                  this.observable$.subscribe(value => {

                    console.log(value);

                  }, err => {

                    console.log('err', err);

                  });

                }

                ngOnDestroy() {

                  this.observable$.unsubscribe();

                } 

Suppose when we navigate to a different page that we don’t want to leave the subscription remains open. So In ngOnDetsroy()  life cycle hook  unsubscribe the observable.With this.observable$.unsubscribe(); you can cancel the ongoing execution:

 

Output:

Subject:

Subject is also observable, it allows value to be multicasted to many observers. Observables are unicast and Subjects are multicast.

When we create an observable each time, it will create a single instance It means we cannot reuse or share the observers.

Each observable has its own observer and it cannot interact with each other because it is wrapped. We can subscribe to the observable more than once but the observers in it don’t know about each other.

just look at the example below.

 

   ngOnInit() {

    this.mySubject$ = new Subject();

    this.mySubject$

        .subscribe( x => 

            { 

                console.log('Initial subscription', x);

            });

    this.mySubject$.next(1);

    this.mySubject$.next(2);

    this.mySubject$

        .subscribe( x => 

            { 

                console.log('Final subscription', x);

            });

    this.mySubject$.next(3);

    this.mySubject$.next(4);

}

 

Output:

In the example above, the initial subscription gets all the four values but the final subscription gets only the last two values. Because we are subscribing only after the first two get subscribed by the initial one.

To get the value, even if it is passed before we can use Behavior Subject.

Subject are shareable but not reusable. Once we call error or complete on Subject we can't reuse it.again.please refer the below code for it.

ngOnInit() {

    this.mySubject$ = new Subject();

    this.mySubject$    

        .subscribe( x => 

            { 

                console.log('Initial subscription', x);

            });

    this.mySubject$.next(1);

    this.mySubject$.next(2);

    this.mySubject$.complete(); // Complete

    this.mySubject$

       .subscribe( x => 

            { 

                console.log('Final subscription', x);

            });

    this.mySubject$.next(3);

    this.mySubject$.next(4);

}

Output:

Behavior Subject:

Behavior subject stores the latest value. It holds the latest value emitted to consumers. Behavior subject should be initialized.It always requires a starting value.

  ngOnInit() {

    this.behaviorSubject$ = new BehaviorSubject(1); //Initial value mentioned

    this.behaviorSubject$

        .subscribe( x => 

            { 

                console.log('Initial subscription', x);

            });

    this.behaviorSubject$.next(2);

    this.behaviorSubject$.next(3);

    this.behaviorSubject$

        .subscribe( x => 

            { 

                console.log('Final subscription', x);

            });

    this.behaviorSubject$.next(4);

    this.behaviorSubject$.next(5);

   }

Output:

In the above example, For the initial subscription, it holds the current value which is 1, then it prints the remaining value for the initial subscription. For the final subscription, it prints the current value 3 which is from the initial subscription then it prints the remaining values.

ReplaySubject:

To get all the values that passed through the subject since from the beginning we can use ReplaceSubject. The ReplaceSubject will save all the values and give them to each subscriber event after it gets completed.

ReplaceSubject doesn't require an initial value.

 ngOnInit() {

    this.behaviorSubject$ = new ReplaySubject();

    this.behaviorSubject$

        .subscribe( x => 

            { 

                console.log('Initial subscription', x);

            });

    this.behaviorSubject$.next(2);

    this.behaviorSubject$.next(3);

    this.behaviorSubject$

        .subscribe( x => 

            { 

                console.log('Final subscription', x);

            });

    this.behaviorSubject$.next(4);

    this.behaviorSubject$.next(5);

  }

Output:

 

In the above example, both subscriptions got all the values.