Event-Binding

Die vorhergehenden Beispiele haben gezeigt, wie Daten aus dem TypeScript mit HTML-Elementen verbunden werden können. Eine Änderung von Variablenwerten führte dabei unmittelbar zu einer Aktualisierung der Benutzeroberfläche.

Neben diesen Daten lassen sich jedoch auch im HTML auftretende Ereignisse, etwa Klicks oder Tastatureingaben, mit dem Programmcode verknüpfen. Ein klassisches Beispiel ist das Anklicken einer Schaltfläche, das zur Ausführung einer Methode führt. In Angular wird dieses Verhalten durch Event Binding umgesetzt. Die Methode wird dabei mit einem HTML-Element verbunden und ermöglicht so ein interaktives Zusammenspiel zwischen View und Komponente. Die View nimmt Aktionen eines Nutzers entgegen, und die Komponente kann darauf reagieren.

Das folgende Beispiel zeigt Event Binding an einer Schaltfläche, die auf ein click-Ereignis reagiert, sowie an einem Texteingabefeld, das auf das Ereignis keydown anspricht. Beide Elemente sind mit einem Methodennamen aus dem TypeScript verknüpft. Auffällig ist, dass bei beiden Methodenaufrufen mit $event das sogenannte Event-Objekt übergeben wird. Bei einer Schaltfläche, bei der oft nur das Ereignis selbst relevant ist, mag das nicht zwingend notwendig wirken. Bei einem Texteingabefeld, das auf Eingaben reagieren soll, ist der Zugriff auf den eingegebenen Wert jedoch unerlässlich.

<h2>Sample for Event Binding</h2>
<p>
    <input type="text" (keydown)="textInput($event)"/>
</p>
<p>
    <button (click)="buttonClick($event)">Klick Me</button>
</p>

import { Component } from '@angular/core';

@Component({
  selector: 'app-event-binding',
  standalone: true,
  imports: [],
  templateUrl: './event-binding.component.html',
  styleUrl: './event-binding.component.scss'
})
export class EventBindingComponent {

  textInput(event: Event) {
    const value = (event.target as HTMLInputElement).value;
    console.log(value);
  }

  buttonClick(event: Event) {
    console.log('Button clicked');
  }
}

Aktuell leitet das Texteingabefeld sämtliche Eingaben an die Komponente weiter. Soll im Code jedoch nur reagiert werden, wenn die Eingabe abgeschlossen ist, also erst nachdem die Enter-Taste betätigt wurde, ist eine genaue Analyse des Events erforderlich.

Als Alternative lässt sich mit Event-Filtern präziser festlegen, wann ein Ereignis ausgelöst werden soll. Für das beschriebene Problem bietet sich der Filter keydown.enter an. In diesem Fall wird die Methode nur dann aufgerufen, wenn tatsächlich die Enter-Taste gedrückt wurde. Dadurch lässt sich die Interaktion deutlich feiner steuern, ohne zusätzlichen Programmcode im TypeScript implementieren zu müssen.

<input type="text" (keydown.enter)="textInput($event)"/>

Alternativ können zum Event Objekt auch eigene Typen als Parameter vom HTML- Template in die Komponente übertragen werden. Es ist sogar möglich eigene Parameter und das Event Objekt kombiniert zu übertragen. Das nachfolgende Beispiel zeigt beide Möglichkeiten.

<p>
  <button (click)="setState('active')">Set Active</button>
</p>

<p>
  <button (click)="setStateEvent('active', $event)">Set Active with Event</button>
</p>

state: string = '';

setState(newState: string): void {
  this.state = newState;

  if (newState === 'active') {
    console.log('State was set to active.');
  }
}

setStateEvent(newState: string, event: Event): void {
  this.state = newState;

  // This is the Event Object
  console.log('Event:', event);

  if (newState === 'active') {
    console.log('State was set to active.');
  }
}