Veröffentlicht am

Eventbinding in Angular – Erklärung

Um im Template auf Events wie z.B click() oder mouseover() reagieren zu können, muss man sich mit dem Eventbinding auseinandersetzen, also dem Binden von Events an eine Komponente.
Ich selbst hatte beim Lernen von Angular oft Probleme, mir die Funktionsweisen genau vorzustellen, zumal ich vorher auf eine völlig andere Weise entwickelte und auch der Workflow erst in Fleisch und Blut übergehen musste.
Tatsächlich musste ich lernen „in Angular zu denken“.

Wie erklärt man Eventbinding?

Um das ganze mal völlig unprofessionell aber dafür bildlich zu erklären:

Eventbinding heißt, dass man dem Template erklären muss, was in der Komponente passieren soll, wenn das gewünschte Event ausgelöst wird.

1. Simples Template zur Veranschaulichung (Listing 1)

Innerhalb des DOM-Elements <a> wird mit runden Klammern das Event notiert, auf das man reagieren möchte. Im Beispiel also der Mausklick auf den Link: (click).
Nun wird noch diejenige Funktion auf der rechten Seite des Gleichheitszeichens aufgeführt, die beim Event ausgeführt werden soll: (click)=“alertText(‚freitext‘)“



<div style="text-align:center">

<h1>
   Eventbinding
  </h1>

</div>


<a href="#" (click)="alertText('It works')">Click</a>

2. Funktionsdeklaration innerhalb der Komponente (Listing 2):

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  /*
  * Funktion, die den String entgegennimmt, und, in diesem beispiel, nur ein alert() damit anstellt
  * */
  alertText(alertString: string): void {
    alert(alertString);
  }
}

3. Beispiel Download

Im Download-Beispiel habe ich nur die app.component.ts und die app.component.html aus dem Beitrag hier integriert, damit der Download nicht zu groß wird.
Um es auszuprobieren, einfach mit der Angular CLI (ng new eventbinding) eine neue App anlegen und die Dateien ersetzen.

Download des Beispiels als zip