Building Pokefetch: A Pokémon Type Finder with Angular and PokeAPI
Tags: angular, typescript, frontend, webdev
Published: 2023-05-23 14:55:14

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:

```bash
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:

```bash
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](https://blogs.ayushdev.com/how-to-integrate-tailwind-css-in-your-angular-project)

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.

```xml
<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.
    
   
![Pokefetch Preview](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4tfc1in93y3xdv1ii9d7.png)
    

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](https://pokefetch.ayushdev.com)
    
#### 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**

```bash
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](https://github.com/ayushhagarwal/Ng_Pokemon_Details/commit/53177899d16f7a56e0ba136a83889047a1a5f4db#diff-fe9b13c329bf815c96727353ec564536ed66cdc41be94f200f8d73a0557c5c48).

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**

```xml
<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 &lt;nav&gt; 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.

```xml
<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.

```bash
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:

```xml
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:*

```typescript
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 `HttpClient`class from `'@angular/common/http'` , we access methods for sending GET, POST, PUT, DELETE, etc., requests.

### Calling the PokeAPI to Fetch Pokémon Type

```typescript
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 :

```typescript
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:

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

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

```typescript
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:

```typescript
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:

1. Open the `pokemon-search.component.html` file located in the `src/app/components` folder.
    
2. Add the following code to create the search form:
    
    ```xml
    <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.
    
3. Add the following code to display the fetched Pokémon type:
    
    ```xml
    <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:
    
    ```typescript
    import { FormsModule } from '@angular/forms';
    ```
    
    In the `imports` array of the `@NgModule` decorator, add `FormsModule` as one of the imported modules:
    
    ```typescript
    imports: [
      // Other imported modules
      FormsModule
    ],
    ```
    
4. 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.

```typescript
<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](https://github.com/ayushhagarwal/Pokefetch)

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](https://pokefetch.ayushdev.com)

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!**](https://www.buymeacoffee.com/ayushdev)

Thank you! 🙏

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