[[oktatas:web:angular|< Angular]]

====== Angular Triangle ======

  * **Szerző:** Sallai András
  * Copyright (c) Sallai András, 2021
  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC Attribution-Share Alike 4.0 International]]
  * Web: https://szit.hu

===== Triangle osztály =====


<code javascript 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;
    }
}
</code>


===== Használat =====

<code javascript 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);
  }
}

</code>


Template:

<code html 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>

</code>


<code javascript 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 { }
</code>