Calculator App Using Angular

Last Updated : 04 Sep, 2024

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

Screenshot-2024-08-31-222553 — Calculator App Using Angular

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

Screenshot-2024-08-31-222816 — 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.

HTML

<!-- src/index.html -->  <!doctype html> <html lang="en">  <head>     <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>     <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.

HTML

<!-- 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>

CSS

/* 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; }

JavaScript

// 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

Output

Quiz App using Angular

eswarbe06sp

Improve

Article Tags :