15 Jul 2018

How to Mock an API in Angular v6

Introduction

In this tutorial you’ll learn how to setup an Angular v6 application using the Angular CLI and mock an observable API for your application.

When I first started learning front-end development using AngularJS, I would work through tutorials and felt I had a grasp on the basics to start working on my own applications. However, most tutorials use synchronous data and I at least wanted the feeling of hitting an API even if I wasn’t. If you’re looking to do the same, this tutorial is for you.

Setup

If you haven’t already, you’ll first need to install the Angular CLI.

npm install -g @angular/cli

If you never worked with AngularJS, you have no idea how much easier this CLI makes it for beginners who are just starting out. I wish there was an equivelant back then!

Once the CLI is installed, you can then create a new application.

ng new mocked-api
cd mocked-api

Once your application has been created, you can run the application.

ng serve

Open a browser to http://localhost:4200 and you should see the default Angular application as shown below.

Default Angular application

Creating a service

Now we can move on to creating a service for our observable which will serve as our mocked API.

ng g service services/fighters/fighters

Here we’ve created a new Angular service prefixing our service name with a new path: services/fighters. I prefer to keep my services grouped together within a services directory. Without it, Angular would default to placing services into src/app and that directory can get polluted rather quickly.

Open our new service in src/app/services/fighters and you should see the auto-generated service below.

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class FightersService {

  constructor() { }
}

Within this file we need to import of from rxjs. This is what allows us to create an observable—the default return value in Angular for HTTP requests.

import { of } from 'rxjs';

From here, we add a new fighters property to the service containing the data we want to serve as our mocked response. Then we add a get method that returns fighters as an observable by leveraging of.

export class FightersService {
  fighters: Array<object> = [
    { name: 'Conor McGregor', wins: 21, losses: 3 },
    { name: 'Tony Ferguson', wins: 23, losses: 3 },
    { name: 'Max Holloway', wins: 19: losses: 3 },
    { name: 'Jon Jones', wins: 22, losses: 1 },
    { name: 'Daniel Cormier', wins: 21, losses: 1 },
    { name: 'Brock Lesnar', wins: 5, losses: 3 }
  ];

  constructor() { }

  get() {
    return of(this.fighters);
  }
}

Now our service is ready to be consumed by our application. Within app.component.ts we can import our new service as well as the OnInit lifecycle hook from @angular/core.

import { Component, OnInit } from '@angular/core';
import { FightersService } from './services/fighters/fighters.service';

Now we can update AppComponent to consume our service.

export class AppComponent implements OnInit {
  title = 'app';
  fighters: Array<object>;

  constructor(private fightersService: FightersService) { }

  ngOnInit() {
    this.fightersService.get().subscribe(res => {
      this.fighters = res;
    });
  }
}

First we create a new fighters property which we’ll set to the result of our service call. Then we use dependency injection to inject our service into the component’s constructor.

Then we update AppComponent to implement OnInit and add the ngOnInit lifecycle hook. Within ngOnInit we call our service method, subscribe to the observable, and set the result to fighters.

Now that our component has data to render to the view, we can update the template in app.component.html (I add this in place of the existing “links to help you start”. Feel free to replace the entire template if you want).

<table>
  <thead>
    <th>Name</th>
    <th>Wins</th>
    <th>Losses</th>
  </thead>
  <tbody>
    <tr *ngFor="let fighter of fighters">
      <td>{{fighter.name}}</td>
      <td>{{fighter.wins}}</td>
      <td>{{fighter.losses}}</td>
    </tr>
  </tbody>
</table>

To wrap this up, we’ll add some CSS to app.component.css to clean up our table a bit.

table {
  width: 50%;
  margin: 0 auto;
  border-collapse: collapse;
}

td, th {
  border: 1px solid #DDD;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #DDD;
}

Save that and you should now see a table displaying data using our mocked API.

Angular application displaying mocked data

Conclusion

You’ve now learned how to create an app using the CLI, create a new service, and mock an API using of.

If you found this valuable and would like to see more, feel free to let me know on Twitter.


Before you go...

Feeling stuck copying and pasting from tutorials that don't build realistic applications?

Become an Angular developer by building a real application using open-source libraries with a real API and database.

"The advice and techniques in this book landed me my dream job and literally doubled my salary. Well worth the $99 bucks, so much so that I have been waiting for it to be for sale just to pay the man for the good he has done to my career." -Levi Robertson

CLICK HERE FOR A FREE 8 CHAPTER PREVIEW OF THE ANGULAR TUTORIAL

Learning a front-end framework is hard. "Getting started" tutorials cover the basics but you leave thinking, "Okay, now how do I build something with this?"

The truth is, getting started tutorials aren't all that great for beginners. They're demos to highlight as many features as quickly as possible.

They're great for showing off what a framework can do. They aren't so great for teaching you how to build web apps.

The end result is a basic application that doesn't mimick what it's like building real applications as a front-end developer.

You'll work with a mocked API and database. Application architecture isn't covered. Automated testing is skipped altogether.

Trust me, I've been there. But those days are over.

With The Angular Tutorial, you'll learn how to build applications using a real API and database. You'll leverage 3rd party APIs like Zomato, Google Places, and open-source libraries just as you would in a real job.

The Angular Tutorial assumes you have no previous knowledge of the Angular framework. It starts at the very beginning.

Every piece of code is explained and tested to make you interview ready.

Ready to get started? 👇