< Angular

Angular Triangle

Szerző: Sallai András

Copyright © Sallai András, 2021

Licenc: CC Attribution-Share Alike 4.0 International

Web: https://szit.hu

Triangle osztály

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; } }

Használat

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:

<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>
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 { }