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

====== Angular - Billentyűzet figyelése ======

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

===== Amit figyelhetünk =====

  * (keyup)
  * (keydown)
  * (keypress)

===== A felengedett billentyű figyelése =====


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

===== Billentyű kiválasztása =====

<code javascript src/app/app.component.ts>
  onKeyUp(event:any) {
    if(event.key == 'Enter') {
      console.log('Az Enter lett lenyomva');
    }
  }
</code>

===== Háromszög =====

<code cmd>
ng new app01
cd app01
code .

ng g c triangle
ng add bootstrap
</code>


<code javascript src/app/app.module.ts>
//...
import { ReactiveFormsModule } from '@angular/forms';
//...

import: [
  ReactiveFormsModule
]

//...
</code>

<code javascript src/app/app.component.html>
<div class="container">
    
    <app-triangle></app-triangle>
</div>
</code>


<code scss src/styles.scss>
@import "bootstrap";
</code>

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

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

</code>

{{:oktatas:web:angular:triangle.png|}}