How to Fetch Data from an API in Angular

The Dad Jokes App: Spreading Laughter One Click at a Time

This article will demonstrate how to get data from external APIs in an Angular project.

Humor has a unique way of brightening up our day and creating moments of joy. In the digital age, countless apps cater to various interests, and one app that stands out is the Dad Jokes App. This lighthearted application brings a collection of witty and groan-inducing dad jokes to your fingertips, ensuring laughter is just a click away. In this article, we'll explore the features and development of the Dad Jokes App and its impact on users' daily lives.

Prerequisites

• NodeJs Installed

• Basic Angular Knowledge

• Angular CLI installed

NOTE: The demo is using Tailwind CSS to get started with the starter, clone the repository:

Creating an Angular Project

To create an Angular project, be sure to have installed the Angular CLI on your local environment:

    npm install -g @angular/cli

You can learn more about the Angular CLI here:

https://angular.io/cli

To start a new Angular project, run the following script on a terminal (CMD):

    ng new dad-jokes

You will be prompted to select some choices for configurations. You can go with the defaults for this article.

Running Angular Locally

Navigate to the project's root directory:

    cd dad-jokes

Run the following command to start the Angular development server:

    ng serve

Open your browser and visit http://localhost:4200. You should see the default Angular app running successfully.

Creating a Service:

An Angular service class provides reusable functionality to your Angular application. Services typically handle data access, business logic, and other tasks not specific to a particular component. Services are defined using the @Injectable() decorator, which tells Angular that the class can be injected into other classes as a dependency. This allows you to easily share code and data between different parts of your application.

This article will use an Angular service to get data from an API.

To create a new service, run the following:

    ng generate service jokes

A new file will be created, src/app/jokes.service.ts. Here, we will define the service to get data from an API.

    import { Injectable } from '@angular/core';
    @Injectable({
      providedIn: 'root'
    })
    export class JokesService {
      constructor() { }
    }

Update the code to request an HTTP API request and retrieve the jokes.
We will use the API: https://icanhazdadjoke.com to fetch random “dad” jokes

Here's an example implementation:

    import { Injectable } from '@angular/core';
    import { HttpClient } from '@angular/common/http';
    import { Observable } from 'rxjs';
    @Injectable({
      providedIn: 'root',
    })
    export class JokesService {
      url = 'https://icanhazdadjoke.com';
      constructor(private http: HttpClient) {}
      getJoke(): Observable<any> {
        return this.http.get(this.url, { headers: { Accept: 'application/json' } });
      }
    }

This service is used to get jokes from the icanhazdadjoke.com API. The JokesService class is decorated with the @Injectable() decorator, which tells Angular that the class can be injected into other classes as a dependency. This allows you to easily share code and data between different parts of your application.

The JokesService class has a single property, URL, and URL of the icanhazdadjoke.com API. The class also has a constructor that takes an instance of the HttpClient service as a dependency. The HttpClient service is used to make HTTP requests to the icanhazdadjoke.com API.

The JokesService class has a single method, getJoke(), which returns an Observable of type any. The getJoke() method requests an HTTP to the icanhazdadjoke.com API and returns an Observable of the response data. The Observable can be subscribed to in order to get the joke data.

Rendering Data:

Now, let's render the fetched joke in our app's component. Open the src/app.component.ts file.

Start by importing the JokesService:

    import { JokesService } from './jokes.service';

We then update the AppComponent() class:

    export class AppComponent {
      joke: string = '';
      title = 'Dad jokes';
      constructor(private jokeService: JokesService) { }  
      fetchJoke(): void {
        this.jokeService.getJoke().subscribe((data: any) => {
          this.joke = data.joke;
        });
      }
    }

Code explanations:

• The joke property is a string that will hold the joke that is fetched from the API.

• The constructor method takes an instance of the JokesService class as a dependency. The JokesService class is used to fetch jokes from an API.

• The fetchJoke() method calls the getJoke() method on the JokesService class and subscribes to the returned Observable.

The fetchJoke() method is called when the application is loaded. The method calls the getJoke() method on the JokesService class. The getJoke() method returns an Observable of type any. The Observable emits an object that contains the joke data. The callback function passed to the subscribe() method is called when the Observable emits a value. The callback function sets the joke property to the joke property of the object that was emitted by the Observable.

The complete src/app.component.ts file:

    import { Component } from '@angular/core';
    import { JokesService } from './jokes.service';
    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
    })
    export class AppComponent {
      joke: string = '';
      title = 'Dad jokes';
      constructor(private jokeService: JokesService) { }  
      fetchJoke(): void {
        this.jokeService.getJoke().subscribe((data: any) => {
          this.joke = data.joke;
        });
      }
    }

Next, we update our web view by opening the **app.component.html** file. Update the file:

    <nav class="bg-blue-500 p-4">
      <div class="container mx-auto flex items-center justify-between">
        <a href="#" class="text-xl font-bold text-white">Dad Jokes</a>
      </div>
    </nav>
    <div class="container mx-auto text-center">
      <h3 class="mb-4 text-3xl font-bold">Don't Laugh Challenge</h3>
      <div id="joke" class="mb-4 rounded-lg bg-gray-200 p-4">{{ joke }}</div>
      <button
        id="jokeBtn"
        class="rounded-lg bg-blue-500 px-4 py-2 text-white"
        (click)="fetchJoke()"
      >
        Get Another Joke
      </button>
    </div>

Reload your browser to view the changes:

NOTE: The demo above used Tailwind CSS to get started with the starter, clone the repository:

The complete source code is available on GitHub:

Conclusion:

In this article, we explored how to fetch data from an API using Angular. We covered the prerequisites, setting up an Angular project, fetching jokes from an API using a service, rendering the data in the app's component, and deploying the app on Vercel. With the app up and running, users can now enjoy a delightful collection of dad jokes, spreading laughter one click at a time.

A live demo of the app can be view here:

https://dad-jokes-angular.vercel.app/