Welcome folks today in this blog post we will be creating the observables with error handling and events using the rxjs library in typescript in browser. All the full source code of the application is shown below.
Get Started
In order to get started you need to make a new angular project using the below command as shown below
ng new sampleproject
cd sampleproject
And after that you will see the below directory structure of the angular app as shown below
And now we need to write the code inside the app.component.ts file as shown below.
app.component.ts
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
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 = 'sample app'; myObservable = new Observable((observer) => { console.log("Observable starts") setTimeout(() => { observer.next("John Williamson") }, 1000); setTimeout(() => { observer.next("Trent Boult") }, 2000); observer.next("Tom Latham") }) } |
As you can see we are initializing the new observable object and inside it we are passing the observer and inside it we are using the next() method to stream the chunks of data to the subscriber. And we have surrounded the code inside the setTimeout() method to delay the process.
And now we need to subscribe to this observable using the subscribe() method as shown below
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
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 = 'sample app'; myObservable = new Observable((observer) => { console.log("Observable starts") setTimeout(() => { observer.next("John Williamson") }, 1000); setTimeout(() => { observer.next("Trent Boult") }, 2000); observer.next("Tom Latham") }) ngOnInit(): void { this.myObservable.subscribe((val) => { console.log(val) }) } } |
As you can see in the above typescript code we are writing the code inside the ngOnInit() lifecycle hook method we are subscribing to the observable and inside it we are getting the stream chunks of data inside the callback function.
And now we can even send the error and completed events as well from the observable using the error() and complete() methods as shown below
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
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 = 'sample app'; myObservable = new Observable((observer) => { console.log("Observable starts") setTimeout(() => { observer.next("John Williamson") observer.error("Error takes place") }, 1000); setTimeout(() => { observer.next("Trent Boult") }, 2000); observer.next("Tom Latham") observer.complete() }) ngOnInit(): void { this.myObservable.subscribe((val) => { console.log(val) },(err) => { console.log(err) },() => { console.log("The observable is complete") }) } } |
