Poke-API — Angular HttpClient GET Tutorial

I have yet to meet a developer who doesn’t have at least some appreciation for Pokemon — if not a full blown childhood obsession like myself. So, I decided it’d be fun to use the Poke-API to illustrate one of the most important foundational Web-Dev (and Data Mining / Visualization / Analysis) skills — APIs.

What is an API you might ask? API stands for Application Programming Interface and, according to Google, is defined as a set of functions and procedures allowing the creation of applications that access the features or data of an operating system, application, or other service. In more basic terms, and API is the set of instructions that allows an application to talk to another application.

While APIs can have many different types of calls, two of the most common are GET (reading from the remote entity) and POST (writing back to the remote entity). The syntax used to make these calls, can vary greatly by language and platform, however. This tutorial will show you how to create a basic Angular application that makes GET calls to the Poke-API server. Let’s hop right in!

Create a New Angular Project

ng new poke-tutorial
cd poke-tutorial

Create a Service to GET data from Poke-API

ng g service pokeData

In your file directory you’ll see two new files

In poke-data.service.ts, import Angular’s HttpClient

import {HttpClient} from '@angular/common/http';

and include HttpClient as a parameter in the constructor

constructor(private http:HttpClient) { }

Now, create a GET function in this service file. This takes in a URL string and makes the call.

getData(url:string){
   return this.http.get(url)
}

Add the HttpClientModule to app.module.ts

import {HttpClientModule} from '@angular/common/http';
...
imports: [
   BrowserModule,
   HttpClientModule
],

Edit our app.component.ts to use the service

First, Import OnInit and our service, and add service as provider

import { PokeDataService} from './poke-data.service'
import { Component, OnInit } from '@angular/core';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css'],
   providers: [PokeDataService]
})

Implement OnInit and take in Service with a constructor

export class AppComponent implements OnInit{
constructor(private srv: PokeDataService){}
ngOnInit(){}
}

Write getPoke function. Calls service, sets field this.poke to the returned object from the HTTP request.

export class AppComponent implements OnInit{
poke: any;
url = 'https://pokeapi.co/api/v2/pokemon/growlithe/'
constructor(private srv: PokeDataService){}
getPoke():void{
   this.srv.getData(this.url).subscribe(data=>this.poke=data)
}
ngOnInit(){
this.getPoke()
}
}

Edit our HTML to display the Pokemon that was received from Poke-API server

<div style="text-align:center">
<h1>
Welcome from {{ poke.name }}!
</h1>
<img width="300" alt="Pokemon sprite" src=                                               {{poke.sprites.front_default}}>
</div>

and when you serve your app… you should see this!

Taking it a step forward… Adding User Input!

Add an input and Button to our HTML

<div style="text-align:center">
<h1>
Welcome from {{ poke.name }}!
</h1>
<img width="300" alt="Pokemon sprite" src={{poke.sprites.front_default}}>
<input id = "Pokemon2GET">
<button id = "iChooseYou">I CHOOSE YOU!!</button>
</div>

Add event listener and function to change the url

constructor(private srv: PokeDataService){
   let self = this;
   window.onload=function(){
      let btn = document.getElementById("iChooseYou");
      btn.addEventListener("click", (e:Event) => self.changeURL());
   }
}
changeURL():void{
let pokemon2use = (<HTMLInputElement>document.getElementById("Pokemon2Get")).value
this.url = 'https://pokeapi.co/api/v2/pokemon/'+ pokemon2use + '/'
console.log(this.url)
this.getPoke()
}

Now when you serve your app, you can type in a New Pokemon and Press “I CHOOSE YOU!!” button

Congratulations! You now have a super nerdy API app that you can show off to your friends. Add this one to the Github for sure. But in all seriousness, this project can serve as a backbone for more intense work with API calls. So play around, experiment, enjoy, and leave a comment letting me know how it goes, or just what your favorite Pokemon is (mine is Bulbasaur).

Stay Golden, Everyone ❤