Creating A Reactive Data Source in Angular 4 – Part 1

WRITTEN BY GARETH DUNNE @JSDIARIES

One of the most important aspects to nail down in Angular 4 is the idea of creating 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 React.js, Angular 4 enables you to create data that is shareable to all of your components via a service . We will then use Observables and Subjects to make this data reactive. This is achieved using the external reactive JavaScript library Rxjs.

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 4.

In this tutorial I hope to show how you can make your own reactive data source using the Brewery API for data. In this part we will just start with setting up the project.

You can see the final version of what end of this tutorial series here.

https://github.com/garethgd/angular-4-beer-search

Source

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

Brewery API

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.

Brwery API Menu
Brewery Applications

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

Register New Application
Register New Application

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

API Explorer
API Explorer

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.

Setup

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

No better way to get started than to watch this starting video by Gary Simon from Coursetro.

Once set up, we need to scaffold our Angular application. This is very easily done through the Angular CLI.

We will open up our terminal and in our current directory we want to generate the project with the styles scss flag.

We have now generated a Angular project with a sass styling structure.

Next lets generate our home component. This is a component that will display an initial request of beer from the API.

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

This is a service that contains all our methods that we will use to request data from the Brewery’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.

This HTTP object in the constructor will be used to make the HTTP requests. 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 animations and API calls to have a list of beers transition into our homepage.