Angular Templates & Data Binding verstehen: Ein Anfängerleitfaden

Als Angular-Einsteiger kann es anfangs herausfordernd sein, die vielen neuen Konzepte zu begreifen. Zwei besonders wichtige Grundlagen sind Templates und Data Binding. In diesem Artikel erklären wir dir Schritt für Schritt, was sie bedeuten und wie du sie effektiv einsetzt.

🔧 Was sind Angular Templates?

Ein Template ist der HTML-Teil einer Komponente in Angular. Es beschreibt, wie die Benutzeroberfläche aussieht und wie sie sich verhält.

Beispiel:

<h1>{{ title }}</h1>
<button (click)="sayHello()">Klick mich</button>

Hier zeigen wir eine Variable (title) mit Interpolation an und binden ein Klick-Event an eine Methode (sayHello()).

🔗 Arten des Data Bindings in Angular

Data Binding verbindet Komponentendaten mit dem Template – entweder in eine Richtung oder in beide.

1. Interpolation: {{ variable }}

Zeigt Werte im HTML an:

<p>{{ username }}</p>

2. Property Binding: [property]="value"

Bindet eine Komponenteneigenschaft an ein DOM-Attribut:

<img [src]="imageUrl">

3. Event Binding: (event)="handler()"

Reagiert auf DOM-Ereignisse:

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

4. Two-Way Binding: [(ngModel)]

Synchronisiert Daten zwischen Template und Komponente:

<input [(ngModel)]="username">
<p>Hallo, {{ username }}</p>

Hinweis: Für ngModel musst du das FormsModule importieren.

🎨 Attribut-Direktiven: [ngClass] & [ngStyle]

Mit Attribut-Direktiven kannst du dynamisch Klassen und Stile anwenden:

[ngClass] – Dynamische Klassen

<p [ngClass]="{ 'active': isActive, 'disabled': !isActive }">Status</p>

[ngStyle] – Dynamische Inline-Styles

<p [ngStyle]="{ 'color': isError ? 'red' : 'green' }">Nachricht</p>

🔁 Struktur-Direktiven

*ngIf – Bedingte Anzeige

<p *ngIf="isVisible">Ich bin sichtbar!</p>

*ngFor – Iteration über Listen

<ul>
  <li *ngFor="let user of users">{{ user.name }}</li>
</ul>

🧪 Moderne Kontrollfluss-Direktiven (ab Angular 17+)

Die neuen Angular-Direktiven machen Templates klarer und lesbarer.

@if & @else

@if (isLoggedIn) {
  <p>Willkommen zurück!</p>
} @else {
  <p>Bitte melde dich an.</p>
}

@for

@for (let item of items; track item.id) {
  <div>{{ item.name }}</div>
}

@switch, @case, @default

@switch (status) {
  @case ('success') {
    <p>Erfolg!</p>
  }
  @case ('error') {
    <p>Fehler!</p>
  }
  @default {
    <p>Lade...</p>
  }
}

✅ Fazit

Angular Templates und Data Binding sind die Basis jeder Angular-Anwendung. Wenn du diese Konzepte beherrschst, bist du gut gerüstet, um komplexere Anwendungen zu bauen.

📘 Tipp: Nutze die neuen @if- und @for-Direktiven, wenn du Angular 17+ einsetzt – sie machen dein Template einfacher und übersichtlicher!

Bleib dran für weitere Angular-Tutorials und Entwickler-Tipps! 🚀