Angular - Billentyűzet figyelése

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

• (keyup)
• (keydown)
• (keypress)

src/app/app.component.html

    <div class="mb-3">
      <label for="pass" class="form-label">Jelszó</label>
      <input type="password" 
      class="form-control" 
      id="pass" name="pass"
      [(ngModel)]="pass"
      (keyup)="onKeyUp($event)"      
      >
    </div>

src/app/app.component.ts

  onKeyUp(event:any) {
    if(event.key == 'Enter') {
      console.log('Az Enter lett lenyomva');
    }
  }

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