Observables in Angular

What are the Observables?

In a very simple terms we use Observables to perform  asynchronous operations and handle asynchronous data. Another way of performing asynchronous operations or handling asynchronous  data is using Promise.

Observable is a better technique for event handling, asynchronous programming, and handling multiple values as compared to techniques like promises. Angular makes use of observable as an interface to handle a variety of common asynchronous operations.It provide support for data sharing between publishers and subscribers in an angular application.

Observable is a function that converts the ordinary stream of data into an observable stream of data. You can think of Observable as a wrapper around the ordinary stream of data.

Observable stream or simple Observable emits the value from the stream asynchronously. It emits the complete signals when the stream completes or an error signal if the stream errors out.

Observables are declarative. You define an observable function just like any other variable. The observable starts to emit values only when someone subscribes to it.

Observables are not native to angular or javascript.  It is provided by another javascript library that is RxJS.

What is RxJS?

Full form of RxJS is Reactive Extension library for Javascript. It is a javascript library, that allows us to work with asynchronous data stream. Now RxJS has two main players.  First one is observable and second one is observer.

So as we have seen above observable is the stream of data and Observer is going to use that data. Now in order to make this observer use the data emitted by this observable, the observer has to subscribe to that observable.

Create An Observable

In order to use this observable we need to import the RxJS library. And this RxJS library is automatically get installed when we create the new angular project. Lets see the below code which is written inside app.component.ts

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';

@Component({
  selector:'app-root',
  templateUrl:'./app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit{
  myObservable = new Observable((observer) => {
  console.log("Observable starts");
  observer.next(1);
  observer.next(2);
  observer.next(3);
  observer.next(4);
  observer.next(5);
});

ngOnInit() {
  this.myObservable.subscribe((response) => {
    console.log(response);
  })
}
}

In the above code you can see we have imported the observable from rxjs library. Then inside class we have created the observable  which name is myObservable with the help of new Observable constructor. In observable  constructor we need to pass a callback function. And this callback function takes an argument which will be the observer.And this argument will be injected by rxjs library. This observer is nothing but the subscriber which is waiting for the data.

Inside that callback function we have just console log one message also emitted some data. To emit the data we have called next() method. So our observable is ready now. But this observable will emit the data only if there is a subscriber. If there is no subscriber then observable will not emit the data.

So we have created the subscriber inside the ngOnInit() method. This subscriber method takes three optional parameters. These optional parameters are callback function i.e next, error and complete.  Will see error and complete callback later. Here we have used only next callback. Whenever the next method emitted the value this next callback is getting executed. In our code this next callback function will be called 5 times because observable have emitted the data 5 times.

We have simply log the value i.e response. And if we will run this code, we will get the below output in console.

import { Component, OnInit } from '@angular/core'; 
import { Observable } from 'rxjs';

@Component({ 
 selector:'app-root',
 templateUrl:'./app.component.html',
 styleUrls: ['./app.component.scss'] 
})
export class AppComponent implements OnInit{
 myObservable = new Observable((observer) => { 
  console.log("Observable starts");
  setTimeout(()=> {observer.next(1);}, 1000)
  setTimeout(()=> {observer.next(2);}, 2000)
  setTimeout(()=> {observer.next(3);}, 3000)
  setTimeout(()=> {observer.next(4);}, 4000)
  setTimeout(()=> {observer.next(5);}, 5000)
 });

ngOnInit() { 
  this.myObservable.subscribe((response) => {
    console.log(response); 
  }) 
} 
}