Understanding of Angular observable.

In this blog, we are going to discuss the Angular Observable. We are going to understand the Angular


Angular uses Observable to treat asynchronous code. The same way that we use callbacks and promises in vanilla JavaScript. In fact, the Observable will be added to future versions of JavaScript, but until that happens it is implemented in Angular with the help of the RxJS library.

Observables are widely used in Angular for handling asynchronous code. For example, to work with Ajax, when listening to events and navigating between the pages of an application i.e. routing. To understand why we need to use asynchronous code instead of plain JavaScript, think about a code that waits for a response from a remote server. There is no way of knowing when the response will return, and whether it will ever come back, so it is not a good idea to stop executing the script until the response is received. Asynchronous code is a much better solution, and the way Angular prefers to handle asynchronous code is through observables.

Working of Angular Observable

The observable behavior follows the programming pattern of an observer which has two main players:

  1. Observable
  2. Observer

The Observable sends data while the Observer subscribes to it to receive the data.

The Observable fires the data in response to an event. For example, when a user clicks a button or in response to data that is received from a remote server.

On the other hand, the Observer has three handles to use the data that it receives:

  • onNext handles the requested data
  • onError to handle errors
  • onComplete which is used when the process ends

So, thanks for following this blog, and if you need any help please leave your queries in the comment box we will be happy to help you.