und kann einzeln gewartet, wiederverwendet oder ausgetauscht werden.
Was haben wir gelernt?
Komponenten können verschachtelt werden und bilden eine Baumstruktur.
DOM-Propertys sind native Eigenschaften eines Elements, Attribute sind Bestandteile von HTML.
Property Bindings schreiben in DOM-Eigenschaften eines Elements.
Bindings werden immer automatisch aktualisiert, wenn sich die Daten ändern.
Es wird in der Regel die Notation mit eckigen Klammern verwendet: <element [prop]="exp"></element>.
Eine Komponente kann ihre eigenen Propertys mit dem Decorator @Input() markieren, sodass wir diese Propertys mithilfe von Property Bindings von außen setzen können.
Damit können Daten im Komponentenbaum nach unten gereicht werden: von Eltern zu Kindern.
Demo und Quelltext: https://ng-buch.de/bm4-it1-prop
6.3Event Bindings: auf Ereignisse in Komponenten reagieren
Im vorangegangenen Abschnitt haben wir gelernt, wie wir mit Property Bindings die Eigenschaften von DOM-Elementen manipulieren können. Wir können damit unter anderem Daten in eine Komponente hineingeben und dort verarbeiten. Auf diese Weise können wir Informationen im Komponentenbaum nach unten reichen.
Um Informationen durch die gesamte Baumstruktur hindurch austauschen zu können, brauchen wir noch ein Gegenstück dazu: Mit den sogenannten Event Bindings können wir Ereignisse auf einem DOM-Element abfangen und verarbeiten.
<element (myEvent)="myHandler()"></element>
Listing 6–35 Event Binding
Diese Ereignisse sind entweder native DOM-Events oder werden innerhalb einer Komponente getriggert.
Abb. 6–7 Datenfluss von Kind zu Eltern mit Event Bindings
6.3.1Native DOM-Events
Event Handler in JavaScript
Wir schauen uns zunächst die nativen DOM-Events an. Es handelt sich dabei um alle Ereignisse, die auf einem DOM-Element ausgelöst werden können, entweder durch Benutzeraktionen oder durch Statusänderungen im Browser. Wenn wir kein Webframework einsetzen, würden wir DOM-Ereignisse mit Event-Handlern in JavaScript abfangen. Über on-Attribute auf einem HTML-Element geben wir eine Handler-Funktion an, die ausgeführt wird, wenn ein bestimmtes Ereignis eintritt. In diesem Beispiel wird die Funktion myClickHandler() aufgerufen, wenn der Benutzer auf den Button klickt:
<button onclick="myClickHandler()">My Button</button>
Listing 6–36 Event Handler in JavaScript
Nach dem gleichen Prinzip funktionieren auch die Event Bindings in Angular. Wir verwenden hier die Syntax mit runden Klammern, die wir im Abschnitt zur Template-Syntax schon kennengelernt haben. Die angegebene Handler-Funktion ist eine Methode der Komponente, in deren Template wir uns befinden:
<!-- Template -->
<button (click)="myClickHandler()">My Button</button>
// Klasse
@Component({ /* ... */ })
export class MyComponent {
myClickHandler() {
console.log('Button geklickt');
}
}
Listing 6–37 Event Bindings in Angular
Payload übergeben
Klickt der Benutzer auf den Button, wird die Methode myClickHandler() aus der Klasse MyComponent ausgeführt. Häufig werden zu einem Event weitere Informationen mitgeliefert. Diesen sogenannten Payload können wir an die Handler-Funktion übergeben und verarbeiten. Mit klassischen Event-Handlern in JavaScript verwenden wir die Variable event:
<input onkeyup="myKeyHandler(event)" type="text">
Listing 6–38 Event-Payload übergeben (JavaScript)
In Angular wird dafür die Variable $event eingesetzt. Sie beinhaltet immer automatisch den Payload für das jeweilige Ereignis.
<!-- Template -->
<input (keyup)="myKeyHandler($event)" type="text">
// Klasse
@Component({ /* ... */ })
export class MyComponent {
myKeyHandler(e: KeyboardEvent) {
console.log(e);
}
}
Listing 6–39 Event-Payload übergeben (Angular)
Geben wir, wie im Beispiel, den Event-Payload auf der Konsole aus, erhalten wir die Ausgabe, die in der Abbildung 6–8 dargestellt ist.
Der Payload ist ein Objekt vom Typ KeyboardEvent. Es handelt sich um ein natives DOM-Ereignis, das vom W3C spezifiziert ist.9 Das Objekt enthält viele Informationen, unter anderem, welche Taste gedrückt wurde, um das Event auszulösen. Im Beispiel wurde auf der Tastatur die Taste
Mit dem Wissen, welchen Typ das Event hat, können wir die Handler-Methode typisieren, wie wir es im Beispiel oben schon getan haben. So können wir sicherstellen, dass der Handler wirklich
