Angular 5 HTTP using Observables – Part 1

WRITTEN BY GARETH DUNNE @JSDIARIES

One of the more advanced aspects of frontend development to know as an experienced UI developer is the creation of reactive data sources.

No matter what kind of data you want to show your user, in order to take advantage of web applications you should really have your data be dynamic and reactive.

In comparison to libraries like React.js, Angular 4 enables you to create data that is shareable to all of your UI components via a service .

In Angular,  we can use Observables and Subjects to make this data reactive and as a result refresh our UI. This is achieved by using an external reactive JavaScript library called Rxjs.

I won’t be going into too much detail on what goes on behind the scenes of the Rxjs library but just know that it is an important aspect of using data in the Angular project.  In this tutorial I will demonstrate how to use it as dynamic data retrieving tool.

And while Rxjs is also available to be used with React, in my personal opinion it is much easier and it better fits the architecture to be used in combination with Angular 5.

Redux is more commonly used in combination with React for the data flow and state management of a project but the details of that can be found in another post here.

In this tutorial, I want to demonstrate how you can make your own reactive data source using BreweryDB’s APIs. I also want to show how modern frontend frameworks like Angular allow us to create seamless user interfaces that respond to the changing of data.

In this part, we will just start with setting up the project.

On a side note, if your looking to expand your Angular and Typescript knowledge I highly recommend this Angular & TypeScript book by Yakov Fain.

This tutorial series is based on my application Beer Name Finder which you can view here:

.

If you enjoy this dashboard, please consider giving it an upvote on Product Hunt here.

I took the designs and styles of this application from Coursetro’s MEAN stack tutorial and was able to implement a service for interactions with the data and the Brewery API.

As this tutorial will be broken down into a few posts, you can see the source code in the GIT here.

In order to retrieve data from a source via HTTP we will use the Brewery API. This will at least keep our data source interesting and offer plenty of different data options to be displayed.

Navigate to the developer API section here.

After signing up for a developer account, create a new application with whatever details you like.

The documentation is quite verbose and you can find a wide variety of different ways to query the api for specific beers.

You can also test the results of any api calls via the api explorer. This is useful for when you are testing different query parameters to retrieve specific datasets of beer information

For now, we just need the api key generated by your app. This will be needed in order to make a http request to the Brewery API server so store this somewhere to reference later on.

In order to progress from here we need to have Node.js and the Angular CLI installed.

I’d recommend to getting started by watching this video by Gary Simon from Coursetro who details the installation steps.

Once set up from the instructions of that video, we need to scaffold the structure our Angular application. This is very easily done through the Angular CLI.

Open up the terminal or command window and in the current directory we want to generate the project with the styling scss flag.

ng new My_New_Project --style=sass

We have now generated a Angular project with a solid SASS styling structure. This step is of course optional depending on your CSS preprocessor preferences.

If you want to style the project with normal CSS that is fine too.

Next, lets generate our home component. This is a component that will contain all of our UI for displaying all the beer data requested from the BreweryDB API.

ng generate component home

From here, we want to generate our service that will hold all the logic for retrieving data that can be shared with any our components.

ng generate service beerservice

This is a service that contains all our methods that we will use to request data from BreweryDB’s APIs. When you open up this service you will see that the Angular CLI has automatically injected a HTTP object into the constructor for us.

Lets modify this service so it now looks like this.

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import { Beer } from './beer';
import "rxjs/Rx";
import { Subject } from 'rxjs/Subject';
import { Observable } from 'rxjs/Observable';


@Injectable()
export class BeerService {
private _baseUrl: string = "/api/v2/"
private _allBeersUrl: string = this._baseUrl + "beers?glasswareId=1&withBreweries=Y"
private _randomBeerUrl: string = this._baseUrl + "beer/random?hasLabels=Y&withBreweries=Y";
private _beerByIdUrl: string = this._baseUrl + "beer/oeGSxs&key="
private _searchUrl: string = this._baseUrl + 'search?q='
beerAnnouncedSource = new Subject();

result: any;
apiKey: string = "&key=yourAPIKeyHere";

constructor(private _http: Http) { }

}

The HTTP object in the constructor will be used to make the HTTP requests to the BreweryDB APIs. Meanwhile, we have added all the necessary imports in the top of the file that we will need later on for this service.

This is our basic structure set up. In part 2 we will add our API calls to our beer service.