Data-binding

Einführung

Data Binding ist ein wesentlicher Bestandteil von Angular, der eine Verbindung zwischen der Benutzeroberfläche (Template) und der Logik (Komponente) herstellt. Es ermöglicht die einfache Synchronisation von Daten und das dynamische Aktualisieren von Inhalten in der Anwendung.

Angular unterstützt verschiedene Arten von Data Binding, die sich für unterschiedliche Anwendungsfälle eignen.

---

Arten von Data Binding

1. Interpolationsbindung (String Interpolation)

Interpolationsbindung wird verwendet, um Daten aus der Komponente in das Template zu rendern. Sie wird durch doppelte geschweifte Klammern ({{ }}) dargestellt.

Beispiel:

export class AppComponent {
  title = 'Willkommen bei Angular';
}

<h1>{{ title }}</h1>

Ausgabe:

<h1>Willkommen bei Angular</h1>

---

2. Eigenschaftsbindung (Property Binding)

Eigenschaftsbindung ([property]) wird verwendet, um DOM-Element-Eigenschaften dynamisch zu setzen.

Beispiel:

export class AppComponent {
  isDisabled = true;
}

<button [disabled]="isDisabled">Klicke mich</button>

Ergebnis: Der Button ist deaktiviert, da isDisabled den Wert true hat.

---

3. Ereignisbindung (Event Binding)

Ereignisbindung ((event)) wird verwendet, um Ereignisse wie Mausklicks oder Tastenanschläge zu handhaben.

Beispiel:

export class AppComponent {
  onClick() {
    alert('Button wurde geklickt!');
  }
}

<button (click)="onClick()">Klicke mich</button>

Ergebnis: Beim Klicken des Buttons erscheint ein Alert mit der Nachricht "Button wurde geklickt!".

---

4. Zwei-Wege-Datenbindung (Two-Way Data Binding)

Die Zwei-Wege-Datenbindung synchronisiert Daten zwischen der Komponente und dem Template. Dies wird durch die Kombination von Eigenschafts- und Ereignisbindung erreicht.

In Angular wird die ngModel-Direktive für die Zwei-Wege-Bindung genutzt.

Beispiel:

export class AppComponent {
  userInput = '';
}

<input [(ngModel)]="userInput" placeholder="Gib etwas ein">
<p>Deine Eingabe: {{ userInput }}</p>

Ergebnis: Änderungen im Eingabefeld werden sofort im Paragraphen angezeigt und umgekehrt.

Hinweis: Für die Nutzung von ngModel muss das FormsModule importiert werden.

---

Unterschiede der Bindungsarten

Bindungsart	Richtung	Anwendungsfall
Interpolation	Komponente → UI	Daten anzeigen
Property Binding	Komponente → UI	Eigenschaften dynamisch setzen
Event Binding	UI → Komponente	Ereignisse von der UI an die Komponente senden
Two-Way Binding	Beide Richtungen	Daten zwischen UI und Komponente synchronisieren

---

Zusammenfassung

Data Binding ist ein leistungsstarkes Werkzeug in Angular, das die Synchronisation zwischen Benutzeroberfläche und Anwendungslogik vereinfacht. Durch die Kombination der verschiedenen Bindungsarten können Entwickler interaktive und datengetriebene Anwendungen effizient erstellen.