Joke generator App Using Angular

Angular has become one of the most popular frameworks for building dynamic web applications. In this project, we build a simple yet entertaining Joke generator app using Angular. The app will fetch random jokes from a public API and display them to the user.

This project will help us understand how to work with Angular components, services and HTTP clients as well as how to integrate Angular Material for a polished user interface. We will explain the New Angular Project creation and creating necessary services and components, Fetching data from an API.

Project Preview

Prerequisites

• Node JS and npm
• Angular CLI
• CSS and HTML
• Bootstrap Framework

Approach

1. Setting up a new Angular Project.
2. Creating a component to display jokes.
3. Creating a service to fetch jokes from an external API.
4. Integrating Angular Material for UI components.
5. Styling the App for clean look.
6. Running and Testing the App.

Steps to Create Joke Generator App Using Angular

Step 1: Install Angular CLI

npm install -g @angular/cli

Step 2: Creating Angular Project

ng new jokes

Folder Structure:

Dependencies

"dependencies": {
    "@angular/animations": "^18.0.0",
    "@angular/common": "^18.0.0",
    "@angular/compiler": "^18.0.0",
    "@angular/core": "^18.0.0",
    "@angular/forms": "^18.0.0",
    "@angular/platform-browser": "^18.0.0",
    "@angular/platform-browser-dynamic": "^18.0.0",
    "@angular/platform-server": "^18.0.0",
    "@angular/router": "^18.0.0",
    "@angular/ssr": "^18.0.7",
    "express": "^4.18.2",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.14.3"
}

Example

    
    
    
  
    Jokes
    
    
    



    

    
        
            Jokes
                😆😂😁
            
            
                
            
            Generate Joke
        
    

/* app.component.css */
.animated-smiley {
    display: inline-block;
    animation: bounce 1s infinite;
}

@keyframes bounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-30px);
    }

    60% {
        transform: translateY(-15px);
    }
}

// app.config.ts
import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';
import { provideClientHydration } from '@angular/platform-browser';
import { provideHttpClient } from '@angular/common/http';
import { app } from '../../server';

export const appConfig: ApplicationConfig = {
    providers: [provideZoneChangeDetection({ eventCoalescing: true }), 
    provideRouter(routes), provideClientHydration(), provideHttpClient()]
};

// app.component.ts
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { JokesService } from './jokes.service';
import { response } from 'express';
@Component({
    selector: 'app-root',
    standalone: true,
    imports: [RouterOutlet],
    templateUrl: './app.component.html',
    styleUrl: './app.component.css'
})
export class AppComponent {
    title = 'jokes';
    joke = "";
    constructor(private jokesService: JokesService) {

    }
    getJokes() {
        this.jokesService.get().subscribe(response => {
            this.joke = response.joke;
        })
    }
}

// jokes.services.ts
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';

@Injectable({
    providedIn: 'root'
})
export class JokesService {
    url = "https://icanhazdadjoke.com/";
    constructor(private http: HttpClient) { }
    get(): Observable {
        return this.http.get(this.url, { headers: { 'Accept': 'application/json' } });
    }
}

Step 3: Integrate Joke generator API

Once required User Interface is created, Now we need integrate Joke generator API to display the random jokes on the web application while click on the Generate Joke button. Here we use a third party API for random joke generator below we provide that API information for your reference.

API Information

API Name : Dad Joke API
API URL : https://icanhazdadjoke.com/
Method : GET
Response Format : application/json

To integrate this API into our application open jokes.service.ts file in the project. And import the HttpClient to communicate with the API. Below we provide that source code for your reference.

jokes.service.ts file is generated when run the below command in the project.

ng g s --skip-tests jokes

// jokes.services.ts
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';

@Injectable({
    providedIn: 'root'
})
export class JokesService {
    url = "https://icanhazdadjoke.com/";
    constructor(private http: HttpClient) { }
    get(): Observable {
        return this.http.get(this.url, { headers: { 'Accept': 'application/json' } });
    }
}

Step 4: Run the Project

Once development is completed. Now run the Angular project by using below command. And if project is successfully ran then by default the application run on localhost with port number 4200 in your system.

ng serve

Output