BMI calculator in Angular tutorial

This BMI calculator demonstrates some basic concepts in programming in Angular.

First make sure you have the latest version of Node.js installed on your system. Then install Angular CLI:
sudo npm install -g @angular/cli
The sudo is only needed on Linux and Mac systems.

Create a new project using this Angular CLI command:
ng new bmi-calculator
A set of files will be created inside the bmi-calculator folder. Open it using your favourite editor. I am using Visual Studio Code.

In the terminal run the command: ng serve
This will compile all of the Angular project files each time you make changes to the code and run a web server on your machine. To open it, navigate in your browser to: http://localhost:4200 You should see a working Angular web page template.

To make our life easier, first we will disable the strict mode inside the tsconfig.json file. Change the line that says "strict": true, to "strict": false. This will loosen up the level of type safety Typescript enforces.

Generate the BMI calculator component, which will do the BMI calculations, using this command:
ng g c bmicalc (which is shorthand for ng generate component bmicalc)

A blank component will be generated inside the app folder which can be called using the app-bmicalc tag.

Now delete all of the contents of the app.component.html file and replace it with the HTML code below.

<app-bmicalc></app-bmicalc>

This will simply show the contents of our bmicalc component, which we will generate next.

First we will need to create a template that this component will use. It is a simple HTML form, where the use can input the height and weight. The inputWeight and inputHeight values will be passed to the BmicalcComponent class to make the BMI calculation. The calculated BMI will be shown inside the tag only when the calculation is made.

Calculate your BMI by filling in the fields below

Your weight (kg): 
<input type="text" [(ngModel)]="inputWeight" /> 
Your height (cm): 
<input type="text" [(ngModel)]="inputHeight" /> 
<button (click)="onCalculateBMI()">Calculate!</button>
Your BMI is {{ calculatedBMI }}
<hr />
Underweight: BMI less than 18.5 
Normal weight: BMI of 18.5 to 24.9 
Overweight: BMI of 25 to 29.9 
Obesity: BMI of 30 or higher

Because we are using [(ngModel)] directive, the app.module.ts needs to import the FormsModule.
On top of the file add:

import { FormsModule } from '@angular/forms';

and make sure it is specified in the imports inside the @NgModule decorator.

imports: [BrowserModule, FormsModule],

Change the BmicalcComponent class (inside the bmicalc.component.ts file) and add these lines:

export class BmicalcComponent {
calculatedBMI = 0;
inputHeight: number;
inputWeight: number;

onCalculateBMI = () => {
let bmi =
this.inputWeight / ((this.inputHeight / 100) * (this.inputHeight / 100));

this.calculatedBMI = Number(bmi.toFixed(1));
};
}

The BMI calculation is simple. You simply divide your wight (in kilograms) by your height square (in meters).

Now you can decided if you need to go on a diet while learning Angular. 🙂

References

NodeJS website

Angular project website