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
Project PreviewPrerequisites
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
Project StructureDependencies
"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>
<!-- 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>
/* 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;
}
// 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()]
};
// 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);
}
}
// 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.
Similar Reads
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
3 min read
Quote Generator App Using Angular
A Quote Generator App is a simple application that displays random quotes to users. It is a great project for practising Angular basics such as components, services, data and API integration.Here we develop a simple Quote Generator App using Angular. This application can able to display a new Quote
6 min read
Angular ng generate
The ng generate command is one of the most commonly used commands in Angular CLI. It is used to generate various Angular elements like components, services, modules, pipes, and more. This command helps maintain consistency across the project by automatically creating the necessary files and updating
10 min read
News App Using Angular
We will be developing a News Application using the Angular framework. This interactive app will allow users to search for news articles and filter them by category. With a clean and responsive design, it will dynamically display articles, providing an engaging and user-friendly experience. The app w
9 min read
Event Calender using Angular
In this article, we will walk through the steps to create a dynamic Event Calendar using Angular 17 standalone components. This calendar will allow users to add events to specific dates and view them interactively. We will utilize Angular's powerful features and best practices to build a clean and e
6 min read
Calculator App Using Angular
This Calculator app will provide basic arithmetic functionalities such as addition, subtraction, multiplication, and division, with a clean and modern UI. It will be fully responsive and interactive, ensuring a great user experience across different devices. This project is suitable for both beginne
4 min read
Movie App Using Angular
We will be creating a Movie Search Engine using Angular. This application allows users to search for movies by entering keywords and fetching and displaying a list of movie results in card format. The search engine initially loads a default set of movies to showcase the functionality. Through this p
5 min read
Generate QR code using AngularJS
In this article, we will see how to generate and display QR codes in our Angular apps. A QR code is a matrix of black and white squares that can be read by a camera or a smartphone. A QR code can store information and URLs that make it easy to read for a bot or smartphone user. In a business scenari
3 min read
Expense Tracker Using Angular
Managing expenses efficiently is very important for personal finance. In this article, we'll walk through creating a simple yet effective Expense Tracker application using Angular 17. This project will showcase Angular's powerful features and provide a hands-on example of how to manage financial dat
7 min read
Dice Rolling App Using Angular
We will be developing a Dice Rolling Application using the Angular framework. This application will showcase how to implement interactive features with smooth animations and a responsive layout. We will use FontAwesome icons to represent dice faces and create an engaging user experience with a visua
3 min read