BMI calculator using Angular

Last Updated : 23 Jul, 2025

In this article, we will create a BMI Calculator application using the Angular framework. A BMI calculator helps in determining the relationship between a person’s height and weight by providing a numerical value. This value categorizes the individual into one of four categories: underweight, normal weight, overweight, or obesity.

Project Preview

Screenshot-2024-08-03-at-22-49-03-BmiCalculatorApp — BMI calculator using Angular

Prerequisites

Steps to Create BMI Calculator using Angular

Step 1: Install Angular CLI

If you haven’t installed Angular CLI yet, install it using the following command

npm install -g @angular/cli

Step 2: Create a New Angular Project

ng new bmi-calculator-app
cd bmi-calculator-app

Step 3: Create Standalone Component

Create a standalone component. You can generate a standalone component using the Angular CLI:

ng generate component BmiCalculator

Dependencies

"dependencies": {
    "@angular/animations": "^16.2.0",
    "@angular/common": "^16.2.0",
    "@angular/compiler": "^16.2.0",
    "@angular/core": "^16.2.0",
    "@angular/forms": "^16.2.0",
    "@angular/platform-browser": "^16.2.0",
    "@angular/platform-browser-dynamic": "^16.2.0",
    "@angular/router": "^16.2.0",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.13.0"
  },
"devDependencies": {
    "@angular-devkit/build-angular": "^16.2.0",
    "@angular/cli": "~16.2.0",
    "@angular/compiler-cli": "^16.2.0",
    "@types/jasmine": "~4.3.0",
    "jasmine-core": "~4.6.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.2.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.1.0",
    "typescript": "~5.1.3"
  }

Project Structure

Example: Create the required files as seen in the folder structure and add the following codes.

HTML

<!--src/app/bmi-calculator/bmi-calculator.component.html-->

<div class="container">
    <h1>GeeksforGeeks</h1>
    <h3>BMI CALCULATOR IN ANGULAR</h3>
    <div class="input-group">
        <label>
            Weight (kg):
            <input type="number" [(ngModel)]="weight" 
            placeholder="Enter your weight" />
        </label>
    </div>
    <div class="input-group">
        <label>
            Height (cm):
            <input type="number" [(ngModel)]="height" 
            placeholder="Enter your height" />
        </label>
    </div>
    <button (click)="calculateBMI()">Calculate</button>
    <div class="result" *ngIf="bmi !== null">
        <h3>Your BMI: {{ bmi }}</h3>
        <h3>Status: {{ status }}</h3>
    </div>
</div>

HTML

<!--src/app/app.component.html-->

<app-bmi-calculator></app-bmi-calculator>

CSS

/** src/app/bmi-calculator/bmi-calculator-component.css**/

.container {
    max-width: 600px;
    margin: 30px auto;
    padding: 30px;
    background: linear-gradient(to right, #ffffff, #f9f9f9);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    text-align: center;
    font-family: 'Arial', sans-serif;
}

h1 {
    color: #27ae60;
    font-size: 2.8em;
    margin-bottom: 20px;
    font-weight: 700;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

.input-group {
    margin: 15px 0;
}

.input-group label {
    font-size: 18px;
    color: #2c3e50;
    display: block;
    margin-bottom: 8px;
}

.input-group input {
    padding: 14px;
    border: 2px solid #3498db;
    border-radius: 10px;
    font-size: 16px;
    width: calc(100% - 28px);
    box-sizing: border-box;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.input-group input:focus {
    border-color: #1abc9c;
    box-shadow: 0 0 8px rgba(26, 188, 156, 0.5);
    outline: none;
}

button {
    padding: 14px 30px;
    background-color: #1abc9c;
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 18px;
    cursor: pointer;
    margin-top: 20px;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

button:hover {
    background-color: #16a085;
    transform: scale(1.05);
}

.result {
    margin-top: 25px;
    color: #2c3e50;
}

.result h3 {
    font-size: 24px;
    margin: 12px 0;
    font-weight: 700;
    color: #34495e;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

JavaScript

// src/app/bmi-calculator/bmi-calculator.component.spec.ts

import { ComponentFixture, TestBed } from '@angular/core/testing';

import { BmiCalculatorComponent } from './bmi-calculator.component';

describe('BmiCalculatorComponent', () => {
    let component: BmiCalculatorComponent;
    let fixture: ComponentFixture<BmiCalculatorComponent>;

    beforeEach(() => {
        TestBed.configureTestingModule({
            declarations: [BmiCalculatorComponent]
        });
        fixture = TestBed.createComponent(BmiCalculatorComponent);
        component = fixture.componentInstance;
        fixture.detectChanges();
    });

    it('should create', () => {
        expect(component).toBeTruthy();
    });
});

JavaScript

// src/app/bmi-calculator/bmi-calculator.component.ts

import { Component } from '@angular/core';

@Component({
    selector: 'app-bmi-calculator',
    templateUrl: './bmi-calculator.component.html',
    styleUrls: ['./bmi-calculator.component.css']
})
export class BmiCalculatorComponent {
    weight: number | null = null;
    height: number | null = null;
    bmi: number | null = null;
    status: string = '';

    calculateBMI(): void {
        if (this.weight == null || this.height == null) {
            alert('Please enter both weight and height!');
            return;
        }

        const heightInMeters = this.height / 100;
        this.bmi = +(this.weight / (heightInMeters 
            * heightInMeters)).toFixed(2);

        if (this.bmi < 18.5) {
            this.status = 'Underweight';
        } else if (this.bmi < 24.9) {
            this.status = 'Normal weight';
        } else if (this.bmi < 29.9) {
            this.status = 'Overweight';
        } else {
            this.status = 'Obesity';
        }
    }
}

JavaScript

// src/app/app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { BmiCalculatorComponent } from
    './bmi-calculator/bmi-calculator.component';

@NgModule({
    declarations: [
        AppComponent,
        BmiCalculatorComponent
    ],
    imports: [
        BrowserModule,
        FormsModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

JavaScript

// src/app/app.component.spec.ts

import { TestBed } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { AppComponent } from './app.component';

describe('AppComponent', () => {
    beforeEach(() => TestBed.configureTestingModule({
        imports: [RouterTestingModule],
        declarations: [AppComponent]
    }));

    it('should create the app', () => {
        const fixture = TestBed.createComponent(AppComponent);
        const app = fixture.componentInstance;
        expect(app).toBeTruthy();
    });

    it(`should have as title 'bmi-calculator-app'`, () => {
        const fixture = TestBed.createComponent(AppComponent);
        const app = fixture.componentInstance;
        expect(app.title).toEqual('bmi-calculator-app');
    });

    it('should render title', () => {
        const fixture = TestBed.createComponent(AppComponent);
        fixture.detectChanges();
        const compiled = fixture.nativeElement as HTMLElement;
        expect(compiled.querySelector('.content span')?.textContent)
        .toContain('bmi-calculator-app app is running!');
    });
});

JavaScript

// src/app/app.component.ts

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    title = 'bmi-calculator-app';
}