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
BMI calculator using AngularPrerequisites
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
Folder StructureExample: 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> <!--src/app/app.component.html--> <app-bmi-calculator></app-bmi-calculator>
/** 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); } // 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(); }); }); // 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'; } } } // 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 { } // 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!'); }); }); // 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'; } Steps to Run the Application
Open the terminal, run this command from your root directory to start the application
ng serve --open
Open your browser and navigate to http://localhost:4200
Output:
BMI calculator using Angular
Explore
AngularJS Basics
AngularJS Directives
AngularJS Filters
AngularJS Converting Functions
AngularJS Comparing Functions
AngularJS Questions
AngularJS Examples
2 min read
My Profile