Working with Observable and BehaviorSubject in Angular

Observable:

Observable opens a continuous communication channel which can emit multiple values of data over a  period of time. Observable will not be invoked until you subscribe to it. The subscribe method has three call back functions as parameters. When ever the data is available then first callback function will be invoked. When there is an error then second callback method will be invoked. Once you call complete() from observer then third callback function will be invoked. Here is an example.

Step #1: First import necessary libraries.

import {Observable} from 'rxjs'; 

Step #2: Declare a variable as Observable and  define Observable. 

1. data:Observable<number>;  
2.  ngOnInit(){  
3.      this.data = new Observable(observer=>{  
4.        observer.next(1);  
5.        observer.next(2);  
6.        observer.next(3);  
7.        observer.error("Error Occurred");  
8.        observer.complete();  
9.        observer.next(4);
10.      });  

There are multiple ways of creating Observables. The above is one way of doing it. In the above example we are using next() method to send data to subscriber. We did not subscribe data yet. So we can do it as below.

Step #2: Subscribe to Observable data. 

1. data:Observable<number>;  
2.    ngOnInit(){  
3.        this.data = new Observable(observer=>{  
4.          observer.next(1);  
5.          observer.next(2);  
6.          observer.next(3);  
7.          observer.error("Error Occurred");  
8.          observer.complete(); 
9.          observer.next(4); 
10.        });  
11.   
12.        this.data.subscribe(value=>{  
13.          console.log(value);  
14.        },  
15.       error=>{  
16.         console.log(error);  
17.       },  
18.       ()=>{  
19.         console.log("Completed");  
20.       }  
21.       );  
22. }  

we have subscribed to the data by calling subscribe method with three call backs. When you call next() from Observable, first callback of subscribe method will be executed. So it will log 1,2,3 to browser console.

Next we are calling error() method. So second callback method will be executed. So it will log "Error Occurred" to the browser console.

Finally we are calling complete() method. Because error is already called the observer will not work afterwards. If you want complete callback method to be called then comment this line  observer.error("Error Occurred");. So third callback method will be executed. Once you call complete, you can not send data to any more. Hence you will not see 4 in the console.

Output:

BehaviorSubject:

 BehaviourSubject is a special type of observable which returns last saved value. It means by the time you subscribe to it, it has some value to return. Due to this when you create a BehaviorSubject you need to provide some initial value. The below example illustrates that.

behaviorSubject = new BehaviorSubject<number>(0);  

ngOnInit(){  

    this.behaviorSubject.next(1);  

    this.behaviorSubject.next(2);  

    this.behaviorSubject.next(3);  

            

    this.behaviorSubject.subscribe(value=>{  

         console.log(value);  

       });  

}  

In the above code we are calling next method 3 times with different numbers before we subscribe to it. So only the last value will be return when you subscribe the data. From there on wards when you call next method that value will be received by Subscriber.

Output: