Angular Basics-8

Photo by Rafal Jedrzejek on Unsplash

Welcome to part-8 of Angular Basics series. In this part also, we will learn about Observables. The starting point can be taken from here.

It’s a simple project, which already have an inbuilt observable.

Basic Project

We will build our own observables from ground up to learn more about Observables. They are given to us in angular by a package called rxjs. We are going to create our own observable in home.component.ts file.

Here, we are using the interval from rxjs, which is logging count after every second. In obsevables, we have to subscribe to it. Also notice that we are unsubscribing to it and adding it to the ngOnDestroy, so that it will stop once we are done.

home.component.ts

In localhost, we will see an increasing counter in the home component and it will stop, once we move away from it.

localhost

We will now build a real custom observable. Here, we are using Observable from rxjs and using setInterval to increase the count.

After that we are again subscribing to it and console logging the data.

home.component.ts

We will see the same behavior in localhost. As we can see that emitting new data is the most important thing that observables do, but they also throw errors.

In home.component.ts file, we are throwing an error if count is greater then 4. Now, in the subscribe method, we are console logging the error.

home.component.ts

When an error is thrown, it cancels the observable and it dies.

localhost

But in most cases the Observable will be completed, as in the case of http request. We can also throw an observer.complete() and catch that in the subscription.

home.component.ts

Now, after count of 2, we will see the Complete message.

Completed

We can add operators also to add functionality before our observable starts. There are many operators and we will use filter and map and we are using them in our home.component.ts file.

home.component.ts

Now, because of the filter our round will start with 2 and then complete.

localhost

This completes our post on Observables. You can find the code for the same in this github repo.

--

--

--

Founder TWD, JavaScript & ReactJS Trainer, Youtuber, Blogger

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Bootstrapping a JavaScript Project with Webpack.

What To Do When You’ve Run Out Of Programming Tasks

5 Habits of Great Software Engineers

Http Status Codes

4 Types of Projects You Must Have in Your Portfolio

How to Build an API Interrogation Tool Part 2 of 3

Adding Amplify Auth to your Ionic/Angular projects.

Visualize Data with GridDB and the WebAPI using React.js

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Nabendu Biswas

Nabendu Biswas

Founder TWD, JavaScript & ReactJS Trainer, Youtuber, Blogger

More from Medium

Angular Material with Examples

Directives In Angular

How to Use RxJS debounceTime with Angular

Simple Routing set up in Angular