Understanding RxJS Observables Lifecycle

Posted By : Manisha Kirodiwal | 30-Oct-2019

Observable lifecycle:

Followings are the 4 stages of the observable lifecycle:

  1. Creation
  2. Subscription
  3. Execution
  4. Destruction

 

Observables Creation

For creating an Observable, first import Observable from RxJS.

        import { Observable } from "rxjs";
        var observable = Observable.create((observer:any) => {
            observer.next('Hello World!')
        })
    

app.component.ts file:

import { Component, OnInit } from '@angular/core';
import { Observable } from "rxjs/";
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent implements OnInit{
  title = 'ngcanvas';
  ngOnInit(): void {
    var observable = Observable.create()
  }
}
    

Observables Subscription:

If you want to ask RxJS to execute the code on the observable or, in a light term, to call the observable to begin execution, use the subscription method like this:

        export class AppComponent implements OnInit{
            title = 'ngcanvas';
            ngOnInit(): void {
              var observable = Observable.create((observer:any) => {
                observer.next('Hello World!')
            })
            observable.subscribe(function logMessage(message:any) {
              console.log(message);
            })
          }          
    

This subscribe function will result “hello world” to be print in the console.

 

Observables Execution:

The Observer is responsible for executing instructions in Observable so that each subscriber who subscribes can provide three values ??to Observable:

Next value: The observer sends a value that can be a number, a string, or an object. There may be more than one next message on a particular observable

Error value: The observer sends a JavaScript exception. If there is an error in the observable, nothing else can be delivered to the observable

Complete value: The observer sends no value. This usually signals that the subscriptions for the observable are complete. If the complete value is sent, nothing else can be delivered to the observable.

 

This can be illustrated with the code block below:
 

        export class AppComponent implements OnInit{
            title = 'ngcanvas';
            ngOnInit(): void {
              var observable = Observable.create((observer:any) => {
                observer.next('I am number 1')
                observer.next('I am number 2')
                observer.error('I am number 3')
                observer.complete('I am number 4')
                observer.next('I am number 5')
            })
            observable.subscribe(function logMessage(message:any) {
              console.log(message);
            })
          }
          }                   
    

 

If you run the application now in the dev server with

ng serve

When you see the console in the developer tools you will notice that either the error value or the complete value automatically stops execution and the number 5 never appears in the console. This is a simple synchronous exercise. Let's wrap timers around some of the values ?? to make it asynchronous.

 

        export class AppComponent implements OnInit{
            title = 'ngcanvas';
            ngOnInit(): void {
              var observable = Observable.create((observer:any) => {
                observer.next('I am number 1')
                observer.next('I am number 2')
                setInterval(() => {
                  observer.next('Random Async log message')
              }, 2000)
              observer.next('I am number 3')
              observer.next('I am number 4')
                setInterval(() => {
                  observer.error('This is the end')
              }, 6001)
              observer.next('I am number 5')
            })
            observable.subscribe(function logMessage(message:any) {
              console.log(message);
            })
          }
          }                            
    

 

Destroying an Observable

You will notice that either the error value or the complete value automatically stops execution and the number 5 never appears in the console. This is a simple synchronous exercise. Let's wrap timers around some of the values ??to make it asynchronous.

return function unsubscribe() {
  clearInterval(observable);
};                           
    

 

About Author

Author Image
Manisha Kirodiwal

Manisha is a Web Application developer and she is good in working with Angular, TypeScript , JavaScript and Jquery. In free time she loves to dance and cooking.

Request for Proposal

Name is required

Comment is required

Sending message..