Ayush Agarwal

Posted on May 23, 2023 • Updated on Aug 5, 2023 • Originally published at blogs.ayushdev.com

Building Pokefetch: A Pokémon Type Finder with Angular and PokeAPI

#angular #typescript #frontend #webdev

In this blog post, we will explore how to build a web application named Pokefetch using Angular and the PokeAPI open API. Our goal is to create a user-friendly interface that allows users to input the name of a Pokemon and instantly retrieve its corresponding type.

Throughout this blog post, we will dive into setting up an Angular project, integrating the PokeAPI, handling user input, making HTTP requests, and displaying the retrieved Pokémon type data on a webpage. We will explore Angular components and services to build a seamless user experience.

So, grab your Poké Balls and join us on this exciting journey as we build Pokefetch, a web application that combines the power of Angular and the PokeAPI to bring Pokmon-type information to your fingertips.

Let's get started!

Setting Up Angular

To build our Pokefetch project, we first need to set up Angular in our development environment. Follow these steps to get started:

Step 1: Install Angular CLI

Angular provides a command-line interface (CLI) tool that makes creating, managing, and building s easy. Open your terminal or command prompt and run the following command to install the Angular CLI globally:

npm install -g @angular/cli

This command will install the latest version of the Angular CLI on your machine.

Step 2: Create a New Angular Project

Once the Angular CLI is installed, we can create a new Angular project by running the following command:

ng new pokefetch
cd pokefetch

This command will generate a new Angular project named “pokefetch” in a directory with the same name and navigate into it. Angular CLI will set up the project structure, install dependencies, and generate initial files.

Creating Component and Service Folder:

In Angular, components represent different parts of our application's UI, while services handle business logic and data retrieval. Let's create the necessary folders to organize our components and services.

Create two folders named components and services at the path src/app.

Step 3: Tailwind CSS configuration

We will be using Tailwind CSS for the styling of our application. It is very simple to configure Tailwind CSS in your application. You can visit the official Tailwind CSS website or read one of my previous blogs on the same:

Setup Tailwind CSS in Angular Application

With this, the initial project setup is completed, and we can start with the project, but before that, let’s see an overview of the Pokefetch project, including its goals and features.

Step 4: Basic CSS setup for the application

Let us write some CSS to have a default configuration at the application level. For this

Below is the simple code to write in app.component.html for CSS setup.

<div class="h-screen w-screen bg-gray-400">
</div>

Here, we are using three Tailwind classes, two for the full height and width of the page and the final to set the background colour gray.

Introducing Pokefetch Project

Project Overview

We have a simple application to display Pokemon type in an intuitive card.

In the search bar, enter the name of the Pokemon and hit Search. The type of the Pokemon is displayed on a small card as depicted in the picture.

The project can be viewed at: Pokefetch

Introduction to PokeAPI

PokeAPI is a powerful and comprehensive open API that provides vast data about the Pokémon universe. It is a central hub for accessing information on Pokémon species, moves, abilities, types, and much more.

With PokeAPI, developers can easily integrate Pokémon-related data into their applications and projects. The API offers a RESTful architecture, allowing us to make HTTP requests to retrieve specific information or perform complex queries. Whether you need details about a Pokémon’s type, abilities, or evolution chain, PokeAPI has got you covered.

Our Pokefetch project will leverage the ***PokeAPI to fetch Pokémon type information based on user input***.

Creating Navbar Component

Let’s start building our application with the topmost component, the Navbar.

Generating Navbar Component

ng generate component components/navbar

Angular CLI will create the necessary files and update the project structure. The generated files will include:

navbar.component.ts: The TypeScript file containing the navbar component's logic and functionality.
navbar.component.html: The HTML template file that defines the structure and layout of the navbar component.
navbar.component.css: The CSS file that allows you to style the navbar component.
navbar.component.spec.ts: Jasmine test file for writing test cases on the navbar component.

Create a folder named images at the path src/app/assets/images. This folder will be used to put all our images that might be used in the application. For a start, we will be placing a Pokeball SVG image to be used in our Navbar.

Download the image here: Pokeball SVG.

For our application, we will only be using a template file because for styling, we are using Tailwind CSS, and Jasmine’s test case is not the focus of this blog.

Navbar Template Code

<nav class="flex items-center justify-between flex-wrap bg-teal-400 p-4">
  <div class="flex items-center flex-shrink-0 text-white mr-6">
    <img
      src="../../../assets/images/pokeball.svg"
      alt="Pokeball"
      class="w-10 h-10 mr-0.5"
    />
    <span class="font-semibold text-xl tracking-tight">Pokemon</span>
  </div>
</nav>

The <nav> element sets the background color and padding in the template mentioned above. Inside is a flex container with a logo image (pokeball.svg) and the text "Pokemon" using a specific font size and font weight. The classes flex, items-center, justify-between, and flex-wrap control the layout and alignment of the navbar.

Finally, to ensure that the navbar component is rendered in the application, open the app.component.html file located in the src/app folder and add the <app-navbar></app-navbar> tag where you want the navbar to appear.

<div class="h-screen w-screen bg-gray-400">
  <app-navbar></app-navbar>
</div>

Start your application, and you will see the navbar component on your webpage.

ng serve

Implementing the PokeAPI Service

To fetch the Pokémon type data from the PokeAPI, we need to create and implement a service in our Pokefetch project. Here are the steps to generate and use the PokeAPI service:

Generating the PokeAPI Service

Run the following command to generate the PokeAPI service using the Angular CLI:

ng generate service service/pokemon

Note: Check that PokemonService and HttpClientModule are imported in the app.module.ts file. If not, import it like this:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HttpClientModule } from '@angular/common/http';
import { PokemonService } from './service/pokemon.service';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule
  ],
  providers: [
    PokemonService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Understanding HTTP Requests with Angular HttpClient

The HttpClient module in Angular allows us to make HTTP requests to external APIs. By importing the HttpClientclass from '@angular/common/http' , we access methods for sending GET, POST, PUT, DELETE, etc., requests.

Calling the PokeAPI to Fetch Pokémon Type

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { map } from 'rxjs';

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

  constructor(private http: HttpClient) { }

  getPokemonType(name: string): Observable<string> {
    name=name.toLowerCase();
    return this.http.get<any>            (`https://pokeapi.co/api/v2/pokemon/${name}`).pipe(
      map(response => response.types[0].type.name)
    );
  }
}

We import the necessary dependencies in this service: Injectable and HttpClient from @angular/core and @angular/common/http, respectively. The getPokemonType method takes a Pokémon name as input and returns an observable that emits the Pokémon's type.

We convert the name to lowercase od because the API only supports lowercase names and uses the HttpClient to send a GET request to the PokeAPI. The response from the API is then mapped to extract the first type of the Pokémon.

Now, we can inject this service into our components and use the getPokemonType method to fetch Pokémon type information based on user input.

Rendering Pokémon Type in the Pokemon-Search Component

In the Pokemon-Search component, we will utilize the PokeAPI service to fetch the type of a Pokémon based on user input. By importing and injecting the PokemonService, we can seamlessly retrieve the Pokémon type and render it in the component's template. Let's dive into implementing this functionality.

Creating the Pokemon-Search Component

Run the below command in the Angular CLI :

ng generate component components/pokemon-search

This command will create the necessary files for the component and update the project structure like Navbar.

We will be using pokemon-search.component.ts file to use the service created earlier.

Importing and Injecting the PokemonService

To use the PokemonService in the Pokemon-Search component, we must import and inject it. Here are the steps to import and inject the PokemonService:

Open the pokemon-search.component.ts file located in the src/app/components folder.
Import the PokemonService by adding the following line at the top of the file:
```
import { PokemonService } from '../../services/pokemon.service';
```
In the PokemonSearchComponent class, declare a property called pokemonType of type string to store the fetched Pokemon type:
```
pokemonType: string;
```
In the constructor, inject the PokemonService by adding the following parameter:
```
constructor(private pokemonService: PokemonService) { }
```

Create a method called search in the PokemonSearchComponent class to handle the search functionality:

search() {
  this.pokemonService.getPokemonType(this.searchTerm).subscribe(
    (type: string) => {
      this.pokemonType = type;
    },
    (error: any) => {
      console.log(error);
    }
  );
}

This is how the pokemon-search.component.ts will look after all the changes:

import { Component, OnInit } from '@angular/core';
import { PokemonService } from '../../service/pokemon.service';
@Component({
  selector: 'app-pokemon-search',
  templateUrl: './pokemon-search.component.html',
  styleUrls: ['./pokemon-search.component.css']
})
export class PokemonSearchComponent implements OnInit {

  pokemonType: string;

  constructor(private pokemonService: PokemonService) { }

  ngOnInit(): void {
  }
  searchTerm: string;

  search() {
             this.pokemonService.getPokemonType(this.searchTerm).subscribe(
      type => {
        this.pokemonType = type;
      },
      error => console.log(error)
    );
  }
}

Save the changes to the pokemon-search.component.ts file.

By importing and injecting the PokemonService, we establish a connection between the Pokemon-Search component and the functionality provided by the service. The search method uses the injected PokemonService to fetch the Pokemon type based on the searchTerm. The fetched type is then stored in the pokemonType property.

Next, we will integrate this functionality into the template of the Pokemon-Search component.

Fetching Pokémon Type and Displaying it in the Template

To fetch the Pokémon type using the PokemonService and display it in the template, follow these steps:

Open the pokemon-search.component.html file located in the src/app/components folder.

Add the following code to create the search form:

<div class="flex justify-center mt-20">
  <form class="flex items-center">
    <input
      type="text"
      placeholder="Search Pokemon"
      [(ngModel)]="searchTerm"
      name="searchTerm"
      class="py-2 px-10 rounded-l-md focus:outline-none"
    />
    <button
      type="submit"
      (click)="search()"
      class="bg-blue-500 hover:bg-blue-700 text-white py-2 px-4 rounded-r-md"
    >
      Search
    </button>
  </form>
</div>

This code creates a search form with an input field and a button. The ngModel directive is used to bind the input field value to the searchTerm property of the component.

Add the following code to display the fetched Pokémon type:
```
<div class="flex justify-center mt-10">
  <div
    *ngIf="pokemonType && pokemonType.length > 0"
    class="max-w-sm rounded overflow-hidden shadow-lg"
  >
    <div class="flex items-center flex-col px-6 py-4 bg-green-300">
      <div class="font-bold text-xl mb-2">Type</div>
      <p class="text-gray-700 text-base">
        {{ pokemonType }}
      </p>
    </div>
  </div>
</div>
```
This code displays a container with a green background that appears when the pokemonType property has a value. Inside the container, the fetched Pokémon type is displayed using the {{ pokemonType }} interpolation syntax.

Important Note: To use two-way data binding with ngModel in the Pokemon-Search component, we need to import the FormsModule in the app.module.ts file.

Open the app.module.ts file located in the src/app folder and import the FormsModule by adding the following line at the top of the file:
```
import { FormsModule } from '@angular/forms';
```
In the imports array of the @NgModule decorator, add FormsModule as one of the imported modules:
```
imports: [
  // Other imported modules
  FormsModule
],
```
Save the changes to the pokemon-search.component.html file.

When a user enters a Pokémon name and clicks the search button, the search() method is triggered, which calls the getPokemonType() method from the PokemonService. The fetched Pokémon type is stored in the pokemonType property and displayed in the template.

Finally, add the selector to utilize the Pokemon-Search component in the app.component.html file.

<div class="h-screen w-screen bg-gray-400">
  <app-navbar></app-navbar>
  <app-pokemon-search></app-pokemon-search>
</div>

Save the file and check your webpage.

Voila! The pokefetch application is ready for use.

Conclusion

In conclusion, the Pokefetch project provides a basic understanding of building an Angular application that fetches and displays Pokémon types using the PokeAPI.

However, it’s important to note that this project is a starting point for beginners. There is ample room for enhancement in terms of functionality and styling. For instance, you can implement additional features like displaying detailed Pokémon information or improving the user interface with CSS styling.

By following this tutorial, beginners have learned how to integrate services, make API calls, and utilize forms for user input. This project lays the foundation for further exploration and empowers beginners to continue building more advanced Angular applications.

I would love to hear from you! Your valuable input will help me enhance the project and make future improvements. Also, would you like to read the next blog on writing test cases for the application we built here? Let me know in the comments.

You can find the complete source code of the Pokefetch project on my GitHub repository. Feel free to visit the repository, comment, or contribute to the project.

GitHub Repository: Pokefetch Repo

In addition to the GitHub repository, I have also hosted the Pokefetch project for you to explore. You can access the live version of the project at: Try Pokefetch

Lastly, Your support keeps me going, and I give my 100 percent to these blogs! If you've found value, consider fueling the blog with a coffee ☕️ donation at the below link.

Buy me a COFFEE!

Thank you! 🙏

Feel free to try it out and provide your valuable feedback!