Una de las formas más efectivas de aprender desarrollo frontend moderno es crear proyectos funcionales que resuelvan problemas reales. Hoy te traigo una guía completa para construir una calculadora de IMC con Angular y TypeScript, ideal para afianzar conocimientos y practicar con componentes, formularios y lógica en el navegador.
No solo vamos a ver el código, sino que también entenderás la lógica detrás del cálculo, cómo estructurar la aplicación y cómo mejorarla. Y si ya vienes de trabajar con otros lenguajes como PHP o HTML, te invito a revisar también este artículo: Crea una calculadora de gastos en PHP y HTML paso a paso.
¿Qué es el IMC y por qué hacer una calculadora de IMC con Angular?
El Índice de Masa Corporal (IMC) es un valor que relaciona el peso y la altura de una persona, permitiendo evaluar de forma general su estado nutricional. La fórmula es simple:
IMC = peso (kg) / altura² (m²)
Crear una calculadora de IMC con Angular es una excusa perfecta para practicar con formularios reactivos, validaciones y lógica de negocio simple pero significativa. Además, podrás añadir mejoras como categorías visuales (bajo peso, normal, sobrepeso, etc.) y mensajes personalizados.
Requisitos previos antes de comenzar
Antes de construir esta herramienta, asegúrate de tener instalado:
- Node.js y npm
- Angular CLI (puedes instalarlo con
npm install -g @angular/cli) - Un editor de código como Visual Studio Code
Si aún no sabes cómo configurar tu entorno, te recomiendo esta guía previa: ¿Cómo empezar con Angular desde cero? Guía paso a paso para principiantes.
Además, si Angular te resulta nuevo, no te preocupes: puedes complementar este artículo con Introducción a TypeScript: Lo que necesitas saber antes de trabajar con Angular o React.
Paso 1: Crear el proyecto para tu calculadora de IMC con Angular y TypeScript
Primero, abre tu terminal y escribe:
ng new calculadora-imc
Cuando el sistema te pregunte por las opciones, responde que sí a la configuración de routing y elige CSS como estilo base. Luego accede al directorio del proyecto:
cd calculadora-imc
Finalmente, ejecuta:
ng serve
Esto abrirá tu app base en http://localhost:4200/.
Paso 2: Crear el componente de la calculadora de IMC
Ahora crearemos un componente específico para nuestra calculadora:
ng generate component imc
Esto creará una carpeta con los archivos necesarios para trabajar: .ts, .html, .css y .spec.ts.
Asegúrate de importar y registrar el componente en app-routing.module.ts para que se muestre correctamente al navegar.
Paso 3: Añadir el formulario al componente HTML
En el archivo imc.component.html, agrega el siguiente formulario:
<form (ngSubmit)="calcularIMC()" #formularioIMC="ngForm">
<label>Peso (kg):</label>
<input type="number" [(ngModel)]="peso" name="peso" required />
<label>Altura (m):</label>
<input type="number" [(ngModel)]="altura" name="altura" required step="0.01" />
<button type="submit">Calcular IMC</button>
</form>
<div *ngIf="resultado">
<p><strong>Tu IMC es:</strong> {{ resultado }}</p>
<p><strong>Estado:</strong> {{ estado }}</p>
</div>
Con esto tendremos una interfaz limpia, sencilla y funcional, centrada en la experiencia del usuario.
Paso 4: Programar la lógica en TypeScript
En imc.component.ts, añade la lógica necesaria para el cálculo:
import { Component } from '@angular/core';
@Component({
selector: 'app-imc',
templateUrl: './imc.component.html',
styleUrls: ['./imc.component.css']
})
export class ImcComponent {
peso!: number;
altura!: number;
resultado: number | null = null;
estado: string = '';
calcularIMC() {
if (this.peso > 0 && this.altura > 0) {
this.resultado = +(this.peso / (this.altura * this.altura)).toFixed(2);
this.estado = this.obtenerEstado(this.resultado);
}
}
obtenerEstado(imc: number): string {
if (imc < 18.5) return 'Bajo peso';
if (imc >= 18.5 && imc < 25) return 'Peso normal';
if (imc >= 25 && imc < 30) return 'Sobrepeso';
return 'Obesidad';
}
}
Con este bloque de código, Angular se encargará de gestionar el formulario, calcular el IMC y mostrar el resultado dinámicamente.
Mejora tu calculadora de IMC con Angular usando estilos CSS
Es importante que tu aplicación no solo funcione bien, sino que también luzca profesional. Aquí tienes un ejemplo básico de estilo para imc.component.css:
form {
max-width: 300px;
margin: auto;
display: flex;
flex-direction: column;
}
label {
margin-top: 10px;
}
input, button {
margin-top: 5px;
padding: 8px;
font-size: 1rem;
}
Puedes personalizar los estilos según tu marca o diseño visual preferido. Considera añadir colores según el estado de IMC para mejorar la experiencia.
¿Qué estás practicando al crear esta calculadora?
Este proyecto sencillo pone en práctica varios elementos clave de Angular y TypeScript:
- Data binding con
[(ngModel)] - Eventos del formulario con
(ngSubmit) - Lógica condicional y funciones en componentes
- Separación clara entre lógica y vista
- Buenas prácticas para la experiencia de usuario
Y lo mejor es que todo este conocimiento es aplicable a proyectos más grandes. Si te interesa dar el siguiente paso, no te pierdas esta guía: CRUD con Angular y TypeScript: primer proyecto paso a paso.
Posibles mejoras para tu calculadora
Una vez que tienes la calculadora funcional, puedes seguir optimizándola con ideas como estas:
Añadir validaciones visuales
Implementa mensajes de error si el usuario deja los campos vacíos o introduce valores incorrectos.
Mostrar categorías con colores
Usa colores distintos según el estado: azul para normal, rojo para obesidad, etc.
Convertirla en PWA
¿Te imaginas usar esta calculadora desde el móvil como una app? Angular permite convertir cualquier proyecto en una Progressive Web App fácilmente.
Guardar los resultados en localStorage
Puedes almacenar los cálculos previos y mostrarlos en una tabla para revisión futura.
¿Dónde puedes aprender más sobre Angular y proyectos similares?
Si te interesa seguir creciendo como desarrollador frontend, aquí tienes algunos recursos recomendados:
- 📚 Documentación oficial de Angular
- 🧠 Introducción a TypeScript
- 🔄 CRUD con Angular y TypeScript
- 🧮 Calculadora de gastos en PHP y HTML
Además, si quieres explorar nuevas ideas para practicar con proyectos reales, plataformas como FreeCodeCamp o StackBlitz son excelentes para experimentar.
Conclusión: por qué crear una calculadora de IMC con Angular y TypeScript
Desarrollar una calculadora de IMC con Angular y TypeScript no solo es un ejercicio práctico, sino también una excelente manera de consolidar conocimientos clave en frontend moderno. A través de este ejemplo:
- Aprendes a crear componentes reutilizables
- Dominas la lógica y estructura de Angular
- Integras TypeScript de forma natural en tu flujo de trabajo
- Generas un proyecto funcional que puedes añadir a tu portfolio
Y lo más importante: comprendes cómo pequeños proyectos te preparan para desafíos más grandes.
