BMI -Angular

KROK 1: Utworzenie projektu Angular w Visual Studio 2022

1. Otwórz Visual Studio 2022.
2. Wybierz: File > New > Project.
3. Wyszukaj: Angular App
4. Nazwij projekt: BMIApp.
5. Kliknij Create.
6. Poczekaj, aż Visual Studio utworzy projekt.
7. Przejdź do katalogu projektu (cd BMIApp)

KROK 2: Instalacja zależności

npm install @angular/forms@19.2.14 --legacy-peer-deps

KROK 3: Utworzenie komponentu bmi-calculator

W terminalu (Visual Studio) wpisz:

ng generate component bmi-calculator --standalone

KROK 4: Kod komponentu BMI

bmi-calculator.component.ts

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

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

  obliczBMI() {
    if (this.height > 0 && this.weight > 0) {
      const heightInMeters = this.height / 100;
      this.bmi = this.weight / (heightInMeters * heightInMeters);
      alert(`Twoje BMI to: ${this.bmi.toFixed(1)}`);
    }
  }
}

bmi-calculator.component.html

<div class="container">
  <img src="assets/bmi.png" alt="BMI" class="bmi-image">

  <label>Podaj wzrost (cm):</label>
  <input type="number" [(ngModel)]="height" placeholder="np. 180">

  <label>Podaj wagę (kg):</label>
  <input type="number" [(ngModel)]="weight" placeholder="np. 75">

  <button (click)="obliczBMI()">Oblicz</button>

  <p *ngIf="bmi !== null">Twoje BMI wynosi: {{ bmi | number:'1.1-1' }}</p>
</div>

bmi-calculator.component.css

.container {
  background-color: #c3fcbc;
  padding: 30px 20px;
  border-radius: 16px;
  max-width: 450px;
  margin: 40px auto;
  text-align: center;
  font-family: 'Segoe UI', sans-serif;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}

.bmi-image {
  width: 120px;
  display: block;
  margin: 0 auto 20px auto;
}

label {
  display: block;
  margin: 10px 0 5px;
  font-weight: 600;
}

input {
  width: 90%;
  padding: 10px;
  margin: 0 auto 10px auto;
  display: block;
  border-radius: 5px;
  border: 1px solid #ccc;
  font-size: 16px;
}

button {
  background-color: #ffffff;
  padding: 10px 25px;
  border-radius: 8px;
  border: 1px solid #999;
  font-size: 16px;
  font-weight: 600;
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

button:hover {
  background-color: #f2f2f2;
  transform: scale(1.03);
}

p {
  margin-top: 20px;
  font-weight: bold;
  font-size: 18px;
}

KROK 5: Podłączenie komponentu jako startowego

app.component.ts

Kod powinien wyglądać tak:

import { Component } from '@angular/core';
import { BmiCalculatorComponent } from './bmi-calculator/bmi-calculator.component';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [BmiCalculatorComponent],
  template: `<app-bmi-calculator></app-bmi-calculator>`,
})
export class AppComponent {}

main.ts

Upewnij się, że wygląda tak:

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent)
  .catch(err => console.error(err));

KROK 6: Uruchamiamy Twój projekt.

Przejdź do app.component.html i ustaw ścieżkę do Twojej strony

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

UWAGA!

Jeśli tworzysz wersję komponentów „standalone”, to  Visual Studio czasem wygeneruje app.module.ts, co powoduje błędy z komponentami standalone.

Upewnij się, że plik app.module.ts został usunięty, bo nie jest potrzebny w podejściu standalone.

Dla obrazka nie tworzylem katalodu assets tylko dodałem go bezpiośrednio do katakolu Public