Connecting an API to an Angular 4 front-end application

For Gothenburgh Tech Week (May 1–7) this year Craft Academy is presenting a short talk on “What is an app and how do I make one?”, that Amber Wilkie and I will be hosting.

To get prepared for my first ever professional talk, I may start getting prepared and work on how to speak programming = this blogpost. Follow along :)


The API

The API is built by Amber — so therefore I will not talk about the API. Although I can say that its built with Ruby on Rails and allows one to manipulate a contact form. When a form has been filled out, it creates a Contact in the back-end database. This information will be available in an API endpoint Amber created.


Setting up a new Angular 4 application

I will start from the beginning. Make sure you have Node.js installed on your machine, follow the instructions here: https://nodejs.org/en/. When that is done run .node -v to test that evverything is up to date. And just in case test so you have the latset version of npm; .npm -v otherwise do: .npm install npm -g.

Now we are ready to install angular and its packages on your computer:

$npm install -g @angular/cli

We are using /cli — due to it being very simple when creating, mananging and building, it automatically creates new projects and some useful commands for continue building in the app. Its easier than to having to do everything manually.

Then create a new project:

$ng new my_new_project
$cd my_new_project

And then to run the server: (http://localhost:4200)

$ng serve

The Angular 4 app

If you go through your files now, you may see that you have automatically gotten a component and a module.

The component defines the applications logic that supports the view. The component interacts with the view through properties and methods. The Angular application architecture is built up with components. You nest components wihtin each other to make it possible to build single page websites. The app.component.ts is our root component.

While the module is a container for the different parts in the application — controllers, services, filters and directives for example — which all together will group the whole apps functionality. It’s also where you import necessary dependencies and external modules, and identify the providers and components. Basically it bootstraps the application. In our app the app.module.ts is our root module.

And you probably know what the .html and .css files do. If not, the .html is where you add what you want the view to look like. And the .css is what we use to make the tags more beautiful and change the different elements, that have been added to the .html file. The .spec file we can just ignore — since it has nothing to do with what we are building for the moment.

Connecting the API to our app

Let me just start by saying, don’t overcomplicate it. Which is easier said than done. When I started creating the front-end, I made 6 new files — hoping to get a response from the back-end. Did it work? No. It should not be that hard I thought after a day. So a project that should actually have taken about an hour, took a day and a half… One of the reasons I am writing this post, to show you how easy it is.

So let’s go into our app.component.ts file. This will be where we are going to call the API.

We need to make sure that it is imported into the module and identify it as a provider:

Why you may ask. It’s because we will need to expose the API, and only a provider can do that.

Lets import some required libraries for the app to behave as we want.

We need http— a class that performs http requests, as well as response, when a http request returns, it will emit a response. .map helps us manipulate the data, and in this case it we are calling the .json method on the response because the actual response is not a collection of data but a JSON string.

Then lets call the apiURL and set it to private. Why are we setting it to private you may ask, it’s because we can call it within this AppComponent class, only. After that we just write a new method (getData()) that gets the response from the API. Let’s also set the response to json — so we get the body. We also need to define the method — which we are doing right under the console.log.

After that we need somewhere to store the data — to later on show it in the view. So we need to assign a new variable. We are calling it data and setting it to anything right now. After that, a new method that gets the response from the API and getData() method that we later on store inside the variable data. Now we have succesfully connected our Angular app to our back end. Lets see if it actually works.

Displaying our data

If you run your server and open your browser. You probably will only see “app works!”. But if you look beneath (in other words, open up your console) you might see that we are getting some kind of object.

Well this obejct actually has our data! Open up the object in the object, and tada (!) — you now have your data from the API. So how shall we get the data to the view? Once again, it’s much simpler than you think.

In Angular 4 there is a directive called *NgFor— quite helpful actually. This particular directive instantiates a template once per item from an iterable. In other words, it loops through an item from the iterable.

So in our code, we simply assign an attribute (contacts) with the data from contacts. data is where we stored the response from the API and contacts is what the API has called the arrays. Then we assign all attributes (that the API has) to the contact. If anything seems unclear, like the attributes etc. Check what the console has given you. For example in my case, I have an array (data) in an array (contacts) therefore its data.contacts and not just data. Same goes for the attributes. The let contact however you could name whatever, like let ebbaisbest.

This is the result, and as you see everything is on repeat.

So to divide them into separate divs (and once again, much EASIER than thought), just add another div into the container. Pro-tip, don’t go googling “How to repeat one array at a time ngFor Angular 4”. This is how you do it.

And voila, you got yourself some nice “contact cards”. Now just add some nice styling (will not be taught in this particular blog post) and you got yourself a webpage that people may actually enjoy.

If you by any chance had a hard time connecting your API to your front-end or just loved my awesome blog post and want to get to know me, please join Craft Academy’s talk at Gothenburgh Tech Week: