Angular eseménykezelés

Szerző: Sallai András
Copyright © Sallai András, 2022, 2023
Licenc: 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 ¹⁾ figyeljük.

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

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

src/app/app.component.html

<h1>Teszt</h1>
 
<p>{{name}}</p>
 
<button (click)="valt()">Vált</button>

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

src/app/app.component.ts

export class AppComponent {
    title= 'Teszt';
    name = 'János';
    valt(): void {
        this.name = 'Béla';
    }    
}

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:

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

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

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

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>

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

Billentyű figyelése

Enter

src/app/app.component.ts

<input type="text"
(keyup.enter)="addEmployee()"
>

src/app/app.component.ts

//...
export class AppComponent {
 
  addEmployee() {
    console.log('működik')
  }
}

¹⁾

https://angular.io/guide/event-binding, https://angular.io/guide/user-input