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") }) } } |