Abb. 6–8 Ausgabe des Payloads für das KeyboardEvent
Alle nativen DOM-Events10 können mit Event Bindings abgefangen und verarbeitet werden. Die Tabelle 6–4 zeigt die wichtigsten Events und wann sie ausgelöst werden.
Warum die Angular-Syntax verwenden?
Als Grundlage haben wir in der Einführung gezeigt, wie Event Handler in JavaScript eingesetzt werden, um native DOM-Events abzufangen. Aus Gewohnheit liegt es nahe, diesen Weg zu verwenden, anstatt die Angular-Syntax mit runden Klammern einzusetzen. Leider funktioniert das nicht! Nur wenn wir die eingebaute Angular-Syntax verwenden, wird die Handler-Funktion als Methode der Komponentenklasse angesehen. Würden wir Event Handler von JavaScript einsetzen, würde der Browser versuchen, die Methode im Gültigkeitsbereich des Fensters zu suchen – wo sie nicht existiert.
Es muss deshalb für Events immer die Angular-Syntax geschrieben werden. Das hat aber den Vorteil, dass wir uns grundsätzlich nur einen Weg merken müssen, egal ob für native oder selbst definierte Ereignisse.
| Event | wird ausgelöst beim … |
| click | Klick auf das Element |
| change | Ändern des Werts eines Formularfelds |
| dblclick | Doppelklick auf das Element |
| focus | Fokussieren des Elements durch Auswählen (Maus oder Tastatur) |
| blur | Verlassen des Elements (z. B. Klick außerhalb) |
| keydown | Drücken einer Taste |
| keyup | Loslassen einer Taste |
| mouseover | Überfahren mit der Maus |
| mouseout | Verlassen mit der Maus |
| contextmenu | Aufrufen des Kontextmenüs |
| select | Auswählen von Text |
| copy, paste | Kopieren/Einfügen von Text |
| submit | Abschicken eines Formulars |
Tab. 6–4 Native DOM-Events (Auswahl)
6.3.2Eigene Events definieren
Wenn wir eine Komponente an ein DOM-Element binden, können wir aus der Komponente heraus Ereignisse triggern. Diese Ereignisse können wir auf dem Element abfangen und verarbeiten, wie wir es gerade gelernt haben.
EventEmitter
Dazu denken wir uns zunächst eine neue Komponente Event-Component. Wir wollen in dieser Komponente das Event fooEvent triggern und aus der Komponente herausgeben. In der Klasse legen wir deshalb eine Eigenschaft fooEvent an und initialisieren sie mit einem sogenannten EventEmitter. Dieses Objekt brauchen wir, um ein Ereignis auszulösen. Mit dem Typparameter in spitzen Klammern geben wir an, von welchem Typ der zurückgegebene Payload ist. Im Zweifel sollte hier any eingetragen werden.
Der Decorator @Output()
Um anzuzeigen, dass die Eigenschaft foo Ereignisse aus der Komponente herausgeben kann, verwenden wir den Decorator @Output(). Analog zum Decorator @Input() definieren wir damit die öffentliche Schnittstelle unserer Komponente und legen genau fest, welche Daten herein- und hinausfließen.
Die Methode emit()
Zum Auslösen von Events verfügt der EventEmitter über die Methode emit(value). Das Argument value ist der Event-Payload. Sollen keine zusätzlichen Daten übertragen werden, können wir den Payload auch undefiniert lassen.
Im Template unserer EventComponent legen wir einen Button an. Das click-Event binden wir an eine Handler-Methode, die das Event foo-Event auslöst und aus der Komponente »hinauswirft«.
<!-- Template -->
<button (click)="handleClick()">foo auslösen</button>
import { Component, EventEmitter, Output } from '@angular/core';
@Component({ /* ... */ })
export class EventComponent {
@Output() fooEvent = new EventEmitter<any>();
handleClick() {
this.fooEvent.emit();
}
}
Listing 6–40 Eigene Events für eine Komponente definieren
Innerhalb unserer Hauptkomponente MyComponent binden wir die Event-Component ins Template ein. Damit verschachteln wir die Komponenten, und es entsteht ein Komponentenbaum.
Eigenes Event abonnieren
Auf dem DOM-Element können wir jetzt mit einem Event Binding das Ereignis fooEvent abfangen und eine Handler-Methode aufrufen:
<event-component (fooEvent)="handleFoo()">
</event-component>
Listing 6–41 Eigenes Event abonnieren mit Event Binding
Wenn wir beim Auslösen des Events in der EventComponent einen Payload übergeben haben, können wir diese Daten mit an die Handler-Methode übergeben:
<event-component (fooEvent)="handleFoo($event)">
</event-component>
Listing 6–42 Payload an die Handler-Methode übergeben
Die Kommunikation zwischen den verschachtelten Komponenten ist in der Abbildung 6–9 skizziert. Das Event fooEvent fließt aus der
