---
description: Fetching data, Observables and Subscription
---

# Swap - HttpClient

### Context

1. With Angular we have the [HTTPClient ](https://angular.io/guide/http). This returns an Observable, that we subscribe to and do all sorts of cool things. \
   Well, the thing to understand is that this is not something unique to Angular, but is actually the handiwork of a library - [RxJs](https://www.learnrxjs.io/)\

2. With Angular, we are used to creating **Services**. Inject dependencies into services, which then are used to abstract methods and other utilities. \
   and with StencilJS, there are no services, just Components.&#x20;



### Alternatives

1. Create a .ts file - **data.service.ts -** which exports a function, that makes the API call.
2. RxJS fromFetch - [https://rxjs-dev.firebaseapp.com/api/fetch/fromFetch](https://rxjs-dev.firebaseapp.com/api/fetch/fromFetch) ( Uses [the Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) to make an HTTP request.) , but returns an Observable.&#x20;



### Flow

1. The component calls the fetchEvents ( a method ) **from** within the Service Component, which makes the API call - and returns an Observable.&#x20;
2. The component subscribes to this, and _as data comes in, it changes the state_ - and if necessary, that would get passed to the child component via Props.
3. Observables would be subscribed in the **componentWillLoad()** lifecycle hook. ( since it's called only once ), and unsubscribed in the  **disconnectedCallback().**

