Understanding RxJS Observables Lifecycle
Posted By : Manisha Kirodiwal | 30-Oct-2019
Observable lifecycle:
Followings are the 4 stages of the observable lifecycle:
- Creation
- Subscription
- Execution
- 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);
};
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
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.