Calorie Calculator in Angular

Sure, I can provide you with a simple example of a Calorie Calculator implemented in Angular. Keep in mind that this is a basic example and you might want to extend or customize it based on your specific requirements. Let's create a simple Angular application with a Calorie Calculator component. Make sure you have Node.js and Angular CLI installed. Create a new Angular project:
ng new calorie-calculator cd calorie-calculator

Create a new component for the Calorie Calculator:

ng generate component calorie-calculator

Open the calorie-calculator.component.ts file and implement the logic:

// src/app/calorie-calculator/calorie-calculator.component.ts import { Component } from '@angular/core'; @Component({ selector: 'app-calorie-calculator', templateUrl: './calorie-calculator.component.html', styleUrls: ['./calorie-calculator.component.css'] }) export class CalorieCalculatorComponent { weight: number; height: number; age: number; gender: string; activityLevel: number; result: number; calculateCalories() { // Basic Harris-Benedict Equation for Total Daily Energy Expenditure (TDEE) if (this.gender === 'male') { this.result = (10 * this.weight) + (6.25 * this.height) - (5 * this.age) + 5; } else { this.result = (10 * this.weight) + (6.25 * this.height) - (5 * this.age) - 161; } // Adjust for activity level this.result *= this.activityLevel; // Display the result alert('Your estimated daily caloric needs: ' + this.result.toFixed(2) + ' calories'); } }

Open the calorie-calculator.component.html file and create the UI:

<!-- src/app/calorie-calculator/calorie-calculator.component.html --> <div> <h2>Calorie Calculator</h2> <form (ngSubmit)="calculateCalories()"> <label for="weight">Weight (kg): </label> <input type="number" [(ngModel)]="weight" name="weight" required> <br> <label for="height">Height (cm): </label> <input type="number" [(ngModel)]="height" name="height" required> <br> <label for="age">Age: </label> <input type="number" [(ngModel)]="age" name="age" required> <br> <label for="gender">Gender: </label> <select [(ngModel)]="gender" name="gender" required> <option value="male">Male</option> <option value="female">Female</option> </select> <br> <label for="activityLevel">Activity Level: </label> <select [(ngModel)]="activityLevel" name="activityLevel" required> <option value="1.2">Sedentary (little or no exercise)</option> <option value="1.375">Lightly active (light exercise/sports 1-3 days/week)</option> <option value="1.55">Moderately active (moderate exercise/sports 3-5 days/week)</option> <option value="1.725">Very active (hard exercise/sports 6-7 days a week)</option> <option value="1.9">Extra active (very hard exercise/sports & physical job or 2x training)</option> </select> <br> <button type="submit">Calculate</button> </form> </div>

Open the app.module.ts file and import the necessary modules:

// src/app/app.module.ts import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { AppComponent } from './app.component'; import { CalorieCalculatorComponent } from './calorie-calculator/calorie-calculator.component'; @NgModule({ declarations: [ AppComponent, CalorieCalculatorComponent ], imports: [ BrowserModule, FormsModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }