Angular Components

Quotes component

The quotes component (quotes.component.ts) is the part interacting with the services, both the blocking and the reactive one.

This component uses the reactive or the blocking service, depending on the user’s choice (via buttons on the HTML page, as we’ll see in the next subsection). It subscribes to the Observable<Quote> object, and it pushes a new element in the data array every time a new item arrives. That’s the most important part of the component logic. To make sure that the UI refreshes after each update, we use Angular’s ChangeDetectorRef via injection to force change detection.

As you can see, no matter which service we’re calling, the result will be an Observable. This is because the blocking HTTP API that we use also returns an Observable object. The only difference is that the blocking service returns a full array of quotes all at once.