Angular Triangle

• Szerző: Sallai András
• Copyright © Sallai András, 2021
• Licenc: CC Attribution-Share Alike 4.0 International
• Web: https://szit.hu

triangle.ts

export class Triangle {
    base: number;
    height: number;
    area: number;
    constructor() {
        this.base = 0;
        this.height = 0;
        this.area = 0;
    }
    calcArea() {
        this.area = this.base * this.height / 2;
    }
}

app.component.ts

import { Component } from '@angular/core';
import { Triangle } from './triangle';
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'triangle';
  base: string;
  height: string;
  area: string;
 
  constructor() {
    this.base = '';
    this.height = '';
    this.area = '';
  }
  calcArea(): any {
    let triangle = new Triangle();
    triangle.base = Number(this.base);
    triangle.height = Number(this.height);
    triangle.calcArea();
    this.area = String(triangle.area);
  }
}

Template:

app.component.html

<div class="container">
 
  <h1>Háromszög</h1>
 
  <h2>Háromszög területe</h2>
 
  <label for="base"
  class="form-label">Alap</label>
  <input type="text" id="base"
  class="form-control"
  [(ngModel)]="base"><br>
 
 
  <label for="height" 
  class="form-label">Magasság</label>
 
  <input type="text" id="height"
  class="form-control"
  [(ngModel)]="height"><br>
 
  <button (click)="calcArea()"
  class="btn btn-primary mb-3">
    Számít
  </button><br>
 
  <label class="form-label">Terület</label>
  <input type="text"
  class="form-control"
  disabled
  [(ngModel)]="area"><br>
 
</div>
 
<div class="content"><span>{{ title }} app is running!</span></div>

app.module.ts

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