oktatas:web:angular:angular_billentyuzet_figyelese
< Angular
Angular - Billentyűzet figyelése
Amit figyelhetünk
(keyup)
(keydown)
(keypress)
A felengedett billentyű figyelése
Billentyű kiválasztása
Háromszög
ng new app01
cd app01
code .
ng g c triangle
ng add bootstrap
- src/app/app.module.ts
//...
import { ReactiveFormsModule } from '@angular/forms';
//...
import: [
ReactiveFormsModule
]
//...
- src/app/app.component.html
<div class="container">
<app-triangle></app-triangle>
</div>
- src/styles.scss
@import "bootstrap";
- src/app/triangle/triangle.component.html
<h2>Háromszög területe</h2>
<div class="triangleForm">
<div class="mt-3">
<input type="text"
placeholder="alap"
[formControl]="base"
class="form-control"
>
</div>
<div class="mt-3">
<input type="text"
placeholder="magasság"
[formControl]="height"
(keyup)="onKeyup($event)"
class="form-control"
>
</div>
<div class="mt-3" *ngIf="areaVisible">
<label for="area" class="form-label">Terület</label>
<input type="text"
[formControl]="area"
class="form-control"
>
</div>
</div>
- src/app/triangle/triangle.component.ts
import { Component, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';
@Component({
selector: 'app-triangle',
templateUrl: './triangle.component.html',
styleUrls: ['./triangle.component.scss']
})
export class TriangleComponent implements OnInit {
base = new FormControl('');
height = new FormControl('');
area = new FormControl('');
areaVisible = false;
constructor() { }
ngOnInit(): void {
}
onKeyup(event:any) {
if (event.key == 'Enter') {
this.onKeyEnter();
}
}
onKeyEnter() {
let base = Number(this.base.value);
let height = Number(this.height.value);
let area = this.calcArea(base, height);
this.areaVisible = true;
this.area.setValue(area);
}
calcArea(base: number, height: number) {
return base * height / 2;
}
}
oktatas/web/angular/angular_billentyuzet_figyelese.txt · Utolsó módosítás: 2023/01/24 23:07 szerkesztette: admin