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 beginners and experienced developers looking to enhance their skills in front-end development and Angular framework. In this article, we will explain how to create a basic calculator using Angular with a good user interface developed by using CSS, HTML, and Bootstrap.
Project Preview
Prerequisites
- Basic understanding of HTML, CSS and JavaScript.
- Angular CLI
Approach For Creating Calculator App
- Initialize a new Angular application using Angular CLI.
- Integrate Bootstrap into our Angular project for responsive and styled components.
- Develop a dedicated component to encapsulate our calculator's logic and UI.
- Utilize HTML and Bootstrap classes to create the calculator layout.
- Write TypeScript logic to handle arithmetic operations and user interactions.
- Apply custom styles to enhance the visual appeal.
Steps to Create Calculator App using Angular
Step 1 : Initialize a New Angular Project
Open your terminal and run the following command to create a new Angular project
ng new calculator
cd calculator
Folder Structure
Dependencies
"dependencies": {
"@angular/animations": "^18.2.0",
"@angular/common": "^18.2.0",
"@angular/compiler": "^18.2.0",
"@angular/core": "^18.2.0",
"@angular/forms": "^18.2.0",
"@angular/platform-browser": "^18.2.0",
"@angular/platform-browser-dynamic": "^18.2.0",
"@angular/platform-server": "^18.2.0",
"@angular/router": "^18.2.0",
"@angular/ssr": "^18.2.0",
"express": "^4.18.2",
"rxjs": "~7.8.0",
"tslib": "^2.3.0",
"zone.js": "~0.14.10"
}
Step 2 : Integrate Bootstrap
Once project is created. We integrate Bootstrap framework in this application. For integrating Bootstrap here we use CDN links in the index html file.
<!-- src/index.html -->
<!doctype html>
<html lang="en">
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet">
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<meta charset="utf-8">
<title>Calculator</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>
Step 3 : Business Logic
Once bootstrap framework is integrated then we need to develop the logic for implementing the calculator app using Angular. For we develop basic User interface in the app.component.html file and for good look we use bootstrap and css. Once basic is UI created then we develop the calculator logic in the app.component.ts file.
<!-- src/app/app.component.html -->
<div class="container mt-5">
<div class="row justify-content-center">
<div class="col-md-4">
<div class="card">
<div class="card-body">
<h2 class="text-center text-success">Calculator</h2>
<input type="text" class="form-control mb-3 text-right" [value]="display" readonly>
<div class="btn-group d-flex mb-2" role="group">
<button class="btn btn-danger w-100" (click)="clear()">C</button>
<button class="btn btn-success w-100" (click)="appendInput('/')">/</button>
</div>
<div class="btn-group d-flex mb-2" role="group">
<button class="btn btn-success w-100" (click)="appendInput('7')">7</button>
<button class="btn btn-success w-100" (click)="appendInput('8')">8</button>
<button class="btn btn-success w-100" (click)="appendInput('9')">9</button>
<button class="btn btn-success w-100" (click)="appendInput('*')">*</button>
</div>
<div class="btn-group d-flex mb-2" role="group">
<button class="btn btn-success w-100" (click)="appendInput('4')">4</button>
<button class="btn btn-success w-100" (click)="appendInput('5')">5</button>
<button class="btn btn-success w-100" (click)="appendInput('6')">6</button>
<button class="btn btn-success w-100" (click)="appendInput('-')">-</button>
</div>
<div class="btn-group d-flex mb-2" role="group">
<button class="btn btn-success w-100" (click)="appendInput('1')">1</button>
<button class="btn btn-success w-100" (click)="appendInput('2')">2</button>
<button class="btn btn-success w-100" (click)="appendInput('3')">3</button>
<button class="btn btn-success w-100" (click)="appendInput('+')">+</button>
</div>
<div class="btn-group d-flex mb-2" role="group">
<button class="btn btn-success w-100" (click)="appendInput('0')">0</button>
<button class="btn btn-success w-100" (click)="appendInput('.')">.</button>
<button class="btn btn-primary w-100" (click)="calculate()">=</button>
</div>
</div>
</div>
</div>
</div>
</div>
/* src/app/app.component.css */
.card {
box-shadow: 0 4px 8px green;
border-radius: 10px;
}
.card-body {
padding: 20px;
}
.btn {
font-size: 1.2rem;
padding: 15px;
border: 1px solid white;
}
.btn-group .btn {
border-radius: 0;
}
.form-control {
font-size: 2rem;
padding: 10px;
border-radius: 5px;
}
h2 {
margin-bottom: 20px;
}
// src/app/app.component.ts
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
@Component({
selector: 'app-root',
standalone: true,
imports: [RouterOutlet],
templateUrl: './app.component.html',
styleUrl: './app.component.css'
})
export class AppComponent {
title = 'calculator';
display: string = '';
appendInput(value: string): void {
this.display += value;
}
clear(): void {
this.display = '';
}
calculate(): void {
try {
this.display = eval(this.display);
} catch (e) {
this.display = 'Error';
}
}
}
Step 4 : Run the Application
Once development is completed. Now we need to run the angular application by using below command.
ng serve