Observables and Subscriptions In Angular

One of the most important concepts to understand in Angular is what Observables are, how they work, and how to use them in your code. The Angular website has some extensive documentation on Observables, but in this blog I plan to cover the basics of its usage and what you need to know to begin working with observables. As someone fairly new to Angular, it quickly became apparent that understanding this data flow early would make my life easier.

So what are Observables? At a high level Observables are a means to transmit information or events between the different parts of an application. Observables help you pass data asynchronously and are great for calling on an API or service when getting a response could take an unknown amount of time. An Observable provides a steady data stream to relay our information.

In turn, a Subscription is how we access this data! An Observer will subscribe or ‘listen’ to this Observable and have access to the data provided as well as any changes that take place within the stream. An Observable is going to provide information when an Observer subscribes to it, and it will continue to do so until it is Unsubscribed from. For the sake of continuity, I am going to mainly use the language provided in the Angular documentation, which calls the object that provides the data a subject and the any object that receives the data an observer. The observer can also be called a consumer, because it consumes the data of the Observable

For example, if you are a developer on the job hunt, you may subscribe to websites like indeed or Linkedin to receive messages about the latest positions available. You get emails whenever a new position that matches your description is available. However, when you finally find that perfect job, you can unsubscribe to these websites and you (eventually) stop receiving these emails. Linkedin acts as the Observable, and to access the data stream, or emails, you must subscribe to the Observable.

Overview examples are great, but we are more interested in utilizing this feature practically in our applications. I will demonstrate how to use Observables and subscribe to them in Angular.

How To Create An Observable

ng new application-name

command. I will not go into detail here on how to set up an Angular application, but I will make the code available and go over what you need to do to create an observable within a boiler-plate Angular application.

In our app.component.ts component, lets add the following code:

Here, we are creating local variable ‘observable’ and assigning it to an Observable by calling the create method on the Observable object imported from rxjs. We then pass the create method an observer function which affects our stream of data. You can see on line 13 when the Observable is first subscribed to, it returns a string ‘Begin subscription to observer’. To imitate the time delay of an HTTP request, I have written two timeout functions, one that returns another string 3 seconds later, and one that calls the complete() method on the observer, ending the stream.

To subscribe to this observable, we can call the .subscribe() method on the observable object inside of our ngOnInit() function. This means that as soon as our component is initialized, we begin subscribing to the Observable. We can either hook into the data provided by the observable, any errors it may throw, or when it is completed. below is a demonstration of attaching to all three.

If we start our development server with the

ng serve

command and navigate to localhost:4200, we can see the result of our subscription on the console.

Ignore the ‘Angular is running..’ and ‘[WDS] Live Reloading’ logs. They are not part of our blog and do not affect the observable demonstration

Note that as you might have predicted ‘Initialization’ is logged right after ‘Begin subscription…’. However, the ‘Update in data’ log and the ‘Subscription finished’ log appear after. This is because we are observing an asynchronous Observable. As I mentioned earlier, one of the main uses for Observables is handling asynchronous data flow, and here we have demonstrated that.

To demonstrate the ability to log an error on our Observable, let’s change the observable object slightly to produce an error instead of completing. If we comment out our observer.complete() setTimeout and write a new timeout below it that looks like this:

We can see our subscription on line 31 caught the error, and will log the message.

The error ends the subscription

A More Practical Example

We can create a new component to get the time with the following command:

ng generate component get-the-time

Inside of the newly generate get-the-time.component.ts file, let us change the code. We will create an Observable that gets the current time every second as in the Angular documentation, but we will also assign it to a variable that we will update. On initialization of the component, we will subscribe to our time Observable and use the data from the stream to update our currentTime variable.

And we can show the time by simply adding this to our new html component

and changing our original app.component.html to only the following line of code

<app-get-the-time></app-get-the-time>

In the browser, we will now see a clock that updates the time every second!

Be sure to include the .toString method in your Observable

Wrapping Up

I highly recommend practicing by creating some Observables yourself and utilizing them in your own projects. Think of scenarios where you would need to asynchronously fetch a stream of data, like updating the weather, or filling in a list of To Do items. I hope this blog will help any Angular beginners trying to understand some of the core concepts. Feel free to leave some feedback or ask any questions, and as always, Happy Coding!

GitHub:

Resources:

I ‘m a Web Developer and a Flatiron coding bootcamp alumni. I currently work in the financial tech industry as a Front End Engineer