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

====== Angular eseménykezelés ======

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

===== Eseménykezelés =====

Helyezzünk el egy gombot, aminek a click eseményét ((https://angular.io/guide/event-binding, https://angular.io/guide/user-input)) figyeljük.

Szerkesszük az **src/app/app.component.html** fájlt.

Egészítsük ki a fájlt:

<code html src/app/app.component.html>
<h1>Teszt</h1>

<p>{{name}}</p>

<button (click)="valt()">Vált</button>

</code>

Írjuk meg hozzá, a függvényt az **src/app/app.component.ts** fájlban:

<code javascript src/app/app.component.ts>
export class AppComponent {
    title= 'Teszt';
    name = 'János';
    valt(): void {
        this.name = 'Béla';
    }    
}
</code>

Nézzük meg a böngészőben az eredményt.
===== Gyűjtemény =====

| (click) | kattintás  |
| (change) | változik az elem (select, textarea, input stb. |
| (dblclick) | dupla kattintás  |
| (submit) | űrlap elküldése  |
| (blur) | egy elem elveszti a fókuszt  |
| (focus) | egy elem megkapja a fókuszt  |
| (scroll) | A scroll esemény a dokumentum görgetésekor következik be  |
| (keyup) | A felhasználó megnyomja, majd elengedi egy billentyűt.  |
| (keydown) | A felhasználó lenyomott egy billentyűt. |
| (keypress) | A felhasználó egy karakterértéket generáló billentyűt nyom le. |
| (mouseup) | A felhasználó elengedi az egér gombot, egy elem felett.  |
| (mousedown) | A felhasználó megnyom egy egér gombit, egy elem felett. |
| (mouseenter) | Ha az egeret egy elem felé mozgatunk.  |
| (mouseleave) | Az egér elhagy egy elemet.  |
| (mousemove) | Az egér mozog egy elem felett.  |
| (mousover) | Az egér az elem fölé kerül.  |
| (copy) | Egy elem tartalmának másolása.  |
| (cut) | Egy elem tartalmának kivágása.  |
| (paste) | Egy elembe tartalmat illesztünk.  |
| (drag) | Egy elem vagy a szöveg húzása.  |
| (drop) | A húzott adatok eldobása.  |
| (dragover) | Egy húzható szöveget vagy elemet, egy \\ egy érvényes ejtési cél fölé húznak.  |
| (input) | Amikor egy elem bemenetet kap  |

===== $event =====

Az $event egy speciális változó, ami információkat tartalmaz egy eseményről, annak kiváltójáról.


Példa:

<code html5>
<select (change)="selectFruit($event)">
  <option value="1">alma</option>
  <option value="2">körte</option>
  <option value="3">barack</option>
  <option value="4">szilva</option>
</select>
</code>

<code javascript>
//...
export class AppComponent {
  selectFruit(event: any) {
    console.log(event.target.value);
  }
}

</code>

A konzolon, a kiválasztott gyümölcstől függően 1, 2, 3 vagy 4 érték jelenik meg.



==== Másik példa ====

<code html5 src/app/app.component.html>
<label for="name">Név</label>
<input type="text" name="name" 
[(ngModel)]="name" #nameCtrl="ngModel">

<button (click)="goButton($event, nameCtrl.value)">
  Mehet
</button>
</code>

<code javascript src/app/app.component.ts>
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name !: string;
  goButton(event: Event, name: string) {
    console.log('Név: ', name);
    console.log(event);
  }
}
</code>


===== Billentyű figyelése =====
==== Enter ====

<code html src/app/app.component.ts>
<input type="text"
(keyup.enter)="addEmployee()"
>
</code>

<code javascript src/app/app.component.ts>
//...
export class AppComponent {

  addEmployee() {
    console.log('működik')
  }
}
</code>