Meme Generator App using Angular

Last Updated : 12 Aug, 2024

Angular has become one of the, most popular frameworks for building dynamic web applications. In this project, we will build a simple yet entertaining Meme generator app using Angular.

The app will fetch random memes 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 polished user interface.

Project Preview

Prerequisites

Approach

Setting up a new Angular Project.
Integrate Bootstrap Framework.
Develop the logic
Configure the HttpClient
Integrate Meme Generator API into our application
Run the Application

Steps to Create Meme Generator App Using Angular

Here we provide step by step process to Create Meme Generator App Using Angular. Below we provide that information for your reference.

Step 1 : Creating Angular Project

First we need create a angular project by using below command and select CSS as Stylesheets.

ng new memes

Project 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"
}

Step 2 : Add Bootstrap Framework

Once Project is created. Here we use Bootstrap Framework for response web design. In this Angular application we use Bootstrap in the form of CDN. For this go to Bootstrap Framework official website locate Bootstrap CSS and JS CDN links and copy them and paste those links in index.html file of Angular Project. Below we provide that source code for your reference.

Step 3 : Create a UI For Meme Generator

Now Its time to create a basic user interface for Meme Generator application. For this we change app.component.html file and app.component.css in the project. By default there a html code in that file remove it and create user interface based on your requirement. Below we provide that source code and output for your reference.

Step 4 : Configure HTTP provideHttpClient

Configuration of provideHttpClient is important for dealing with HttpClient in the application. To configure provideHttpClient follow the below process. Open the app.config.ts file in our project. Now import the provideHttpClient from @angular/common/http then only HttpClient will work otherwise application shows errors. Below we provide that source code for your reference.

Step 5 : Integrate Meme generator API

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

API Information

API Name : Image Flip Meme
API URL : https://api.imgflip.com/get_memes
Method : GET
Response Format : application/json

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

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

ng g s --skip-tests memes

Step 6 : 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

Example: Below is the Code Example demonstrating Meme Generator App for which we have used an API to generate random memes.

HTML

<!-- index.html -->
<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
          rel="stylesheet">
    <script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
    <title>Memes</title>
    <base href="/">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href=
"https://static.vecteezy.com/system/resources/thumbnails/012/721
 /537/small_2x/sad-frog-meme-icon-free-vector.jpg">
</head>

<body>
    <app-root></app-root>
</body>

</html>

HTML

<!-- app.component.html -->
<div class="d-flex justify-content-center align-items-center">
    <div class="memes text-center">
        <div class="container">
            <div class="memes-header">
                <h3 class="text mt-5 mb-4" style="font-weight: bold; color: green;">
                  Create Your Memes</h3>
            </div>
            <div class="form-group mb-3" style="width: 500px;">
                <input type="text" class="form-control" [(ngModel)]="topText"
                       placeholder="Enter top text">
            </div>
            <div class="form-group mb-3" style="width: 500px;">
                <input type="text" class="form-control" [(ngModel)]="bottomText"
                       placeholder="Enter bottom text">
            </div>
            <div class="memes-body bg-light position-relative mx-auto" 
                 style="width: 500px; height: 400px;">
                <img *ngIf="memeUrl" [src]="memeUrl" alt="Meme" class="img-fluid"
                    style="width: 100%; height: 100%; object-fit: cover;">
                <div *ngIf="memeUrl" class="meme-text top-text position-absolute
                                            text-center w-100 text-white"
                    style="top: 10px; font-weight: bold;">
                    {{ topText }}
                </div>
                <div *ngIf="memeUrl" class="meme-text bottom-text position-absolute
                                            text-center w-100 text-white"
                    style="bottom: 10px; font-weight: bold;">
                    {{ bottomText }}
                </div>
            </div>
            <button class="btn btn-success text mt-3 mb-3" (click)="getMeme()"
                    type="button">Generate Meme</button>
        </div>
    </div>
</div>

CSS

/* app.component.css */
.meme-text {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    font-weight: bold;
    text-shadow: 2px 2px 4px #000;
    width: 90%;
}

.top-text {
    top: 10px;
}

.bottom-text {
    bottom: 10px;
}

JavaScript

// app.config.ts
import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';
import { provideHttpClient } from '@angular/common/http';

import { routes } from './app.routes';
import { provideClientHydration } from '@angular/platform-browser';

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

JavaScript

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

@Injectable({
    providedIn: 'root'
})
export class MemesService {
    private apiUrl = 'https://api.imgflip.com/get_memes';

    constructor(private http: HttpClient) { }

    getMeme(): Observable<any> {
        return this.http.get<any>(this.apiUrl);
    }
}

JavaScript

// src/app/app.component.ts

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { MemesService } from './memes.service';
import { HttpClient, HttpClientModule, provideHttpClient } from '@angular/common/http';
import { bootstrapApplication } from '@angular/platform-browser';

@Component({
    selector: 'app-root',
    standalone: true,
    imports: [CommonModule, FormsModule, HttpClientModule],

    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],

})
export class AppComponent {
    memeUrl: string | undefined;
    topText: string = '';
    bottomText: string = '';

    constructor(private memesService: MemesService) { }

    getMeme(): void {
        this.memesService.getMeme().subscribe(response => {
            const memes = response.data.memes;
            const randomMeme = memes[Math.floor(Math.random() * memes.length)];
            this.memeUrl = randomMeme.url;
        });
    }
}

Output

Now enter conversation text in given text fields and click on Generate Meme button Then every click you get a new meme on the application. Below we provide that output for reference.

News App Using Angular

myarticzixi

Improve

Article Tags :

Meme Generator App using Angular

Prerequisites

Approach

Steps to Create Meme Generator App Using Angular

Step 1 : Creating Angular Project

Project Structure

Dependencies

Step 2 : Add Bootstrap Framework

Step 3 : Create a UI For Meme Generator

Step 4 : Configure HTTP provideHttpClient

Step 5 : Integrate Meme generator API

API Information

Step 6 : Run the Project

Output

Similar Reads

Thank You!

What kind of Experience do you want to share?