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

Shop4Reebok-Clone

YouTube Video | Create App using unsplash API in ReactJS — 4

NodeJS API-Part 6 / Adding Sequelize and MySQL Database

JavaScript: Dangerous ‘in’ keyword

INTRODUCING REACT HOOKS

React Tutorials — Create YouTube Player- 3

Day 7: States in React

Footer, Offer and Contact.

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

Catch every request error in Angular

State Management in Angular using Redux

Angular Data binding

Getting Started with Pipes in Angular