Zum Inhalt

M294 Block 03

Inhaltsverzeichnis

Data Binding

Data Binding bedeutete die Kommunikation zwischen der Komponente .ts und der Vorlage .html. 
Angular kennt  3 Hauptarten von Data Binding:

  1. One-Way Binding - Component to view (TS-HTML)
String Interpolation 
{{ name }}
Zeigt Werte aus der Komponente in HTML an. 

Property  Binding
[src]="imageUrl"
[class.active]="isActive"
[style.color]="color"
Setzt HTML-Eigenschaften dynamisch anhand von Variablen.
  1. One-Way Binding - View to Component (HTML to TS) 
(click)="doSomething()"

Wenn der Nutzer klickt, wird eine Funktion in TypeScript ausgeführt.

  1. Two-Way Binding (beidseitige Datenweitergabe)
    Daten werden automatisch in beide Richtungen synchronisiert.
    ngModel
    [(ngModel)]="value"
    Änderungen im HTML und in TypeScript bleiben immer synchron.

Two-way-Binding in Angular

Das Two-Way-Binding in Angular ermöglicht es Ihnen, Daten in beide Richtungen zu synchronisieren: zwischen der Komponente (TypeScript-Datei) und der Vorlage (HTML-Datei).

Das bedeutet:

  • Wenn Sie in einem Eingabefeld der Webseite etwas ändern, wird die Änderung automatisch in der Komponente gespeichert.

  • Wenn die Komponente die Daten ändert, wird dies sofort in der Webseite angezeigt.

Voraussetzung: Das FormsModule
Um das Two-Way-Binding zu verwenden, benötigen Sie die ngModel-Direktive, die Teil des FormsModule ist. Das FormsModule müssen Sie zuerst in Ihrer App importieren, damit ngModel funktioniert.

Die Schreibweise [(ngModel)] sieht aus wie eine Kombination aus
[ ] (Property-Binding) und
( ) (Event-Binding).

Technisch ist es eine Kurzschreibweise für:
[ngModel]="name"
(ngModelChange)="name = $event"

Angular verbindet diese beiden automatisch – deshalb spricht man von Two-Way-Binding.

BEISPIEL

  1. HTML (Vorlage)

    Hello, {{name}}!

  2. TypeScript (Komponente

export class AppComponent {
  name: string = '';
}
  1. APP Module (Registrierung) 
    Damit das funktioniert, müssen Sie im AppModule das FormsModule hinzufügen: 
import { FormsModule } from '@angular/forms';
@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, FormsModule],
})
export class AppModule {}

Was passiert hier?

  • Die Variable name wird in der Komponente definiert.
  • Diese Variable ist mit dem Eingabefeld (input) verbunden. Wenn Sie etwas in das Eingabefeld schreiben, wird die Variable name automatisch angepasst.
  • Gleichzeitig zeigt der {{name}}-Platzhalter in der Vorlage den aktuellen Wert der Variable an.

Warum ist das praktisch?

Das Two-Way-Binding spart Ihnen Zeit, da Sie keine zusätzlichen Funktionen schreiben müssen, um die Daten zwischen HTML und TypeScript zu synchronisieren. Alles passiert automatisch!

Input Properties

Links für Code: Angular - Input

Dieses Beispiel zeigt, wie ein Child Component ein Event an den Parent sendet und wie der Parent darauf reagiert.

Übersicht

Was lernst du hier?

  • Ein Child kann ein eigenes Event definieren.
  • Der Parent kann dieses Event abonnieren.
  • Werte können vom Child nach oben in den Parent geschickt werden.

Parent Component (App)

import {Component} from '@angular/core';
import {Child} from './child';

@Component({
 selector: 'app-root',
 template: `<app-child (addItemEvent)="addItem($event)"/> <p>🐢 all the way down {{ items.length }}</p>` ,
 imports: [Child],
})
export class App {
 items = new Array();

addItem(item: string) {
 this.items.push(item);
 }
}

!!! success "Erklärung"  

- Der Parent bindet das Child ein.  
- Das Event addItemEvent vom Child wird mit (addItemEvent)="addItem($event)" abonniert.  
- $event enthält den Wert aus dem Child.  
- Die Funktion addItem fügt das empfangene Item in die Liste ein.

## Child Component

s

Erklärung

  • Das Child definiert ein eigenes Output Event: addItemEvent.
  • output() bedeutet, dass dieses Event einen String sendet.
  • Beim Klicken des Buttons wird addItem() ausgeführt.
  • addItemEvent.emit('🐢') sendet das Event und den Wert nach oben.

Ablauf

Child Button Klick
↓
addItem() wird ausgeführt
↓
addItemEvent.emit('🐢')
↓
Parent empfängt das Event
↓
Parent führt addItem('🐢') aus
↓
items.length erhöht sich

Kurzfassung

  • Child sendet Event → Parent empfängt Event.
  • Kommunikation von unten nach oben.
  • Liste im Parent wächst bei jedem Klick.

Output Properties

Links für Code: Angular - Output

Attribute Directives

Attribute Directives sind Anweisungen, die das Aussehen oder Verhalten von HTML-Elementen verändern.

Angular bringt einige wichtige Attribute Directives mit:

  • [NgStyle] → damit kann ich ein HTML-Element dynamisch stylen
    (z. B. abhängig von einer Bedingung)

  • [NgClass] → damit kann ich einem HTML-Element dynamisch CSS-Klassen zuweisen

Wir werden uns diese Directives später mit Beispielen genauer anschauen.