Angular HTTP and Observables

In the previous article, we’ve seen how to use Angular services in our application. Here, we will understand the concept by the previous article’s example, so please read the previous article first.

The limitation was that we’d used hard-coded data in the StudentService, which can’t be used in real-life applications. So instead, we’ll be fetching data from the webserver by an HTTP request to the server and use it in real-life apps.

Let’s first understand the HTTP request and HTTP response mechanism.

Angular http response mechanism

Suppose we’ve multiple components in our app, and each component uses StudentService for data transfer. But from where StudentService will get data, and how does Observable relates to HTTP requests?

What is HTTP Observable in Angular?

Service will fetch the data from the webserver by making an HTTP request, and the HTTP get request will hit a web API(Application Programming Interface) which will fetch the data from the database and send it back as an HTTP response. The response that we get from an HTTP call is Observable. Therefore, the service will cast it into an array of objects and return to the components needed.

NOTE: The components need to subscribe to get the data and to use it.

What Is the Difference Between HTTP Response and Observable?

The basic difference between HTTP response and Observable is HTTP response is a single item, whereas Observable is a sequence of items that arrive asynchronously.


In this article, you’ve learned about API and to fetch data through an API call. You’ve also learned the difference between HTTP and Observables. In the next article, you’ll also learn about how to use the fetched data into different components in your app.

Read Next: Angular HTTP Fetch Data

Leave a Reply

Your email address will not be published.