Vorlagen und Datenbindung

Mit Vorlagen können Sie dynamische Inhalte in Angular anzeigen. In dieser Lektion erfahren Sie, wie Vorlagen und Datenbindung funktionieren.

Was ist eine Vorlage?

Eine Vorlage ist HTML, das Angular zum Rendern der Ansicht einer Komponente verwendet. Sie kombiniert HTML mit Angular-spezifischer Syntax, um Daten anzuzeigen.

Interpolation

Mit Interpolation können Sie Werte aus Ihrer Komponente in das HTML einfügen. Verwenden Sie doppelte geschweifte Klammern, um Daten anzuzeigen:

{{ data }}

{{ username }}

Property Binding

Mit Property Binding können Sie Eigenschaften von HTML-Elementen dynamisch festlegen:

[src] = "imageUrl"

<img [src]="user.profilePicture">

Event Binding

Mit Event Binding kann Ihre Anwendung auf Benutzeraktionen reagieren:

(click)="onClick()"

<button (click)="showAlert()">Click me</button>

Zwei-Wege-Bindung

Die Zwei-Wege-Bindung hält Ihre Benutzeroberfläche und Ihre Daten synchron. Verwenden Sie [(ngModel)]:

<input [(ngModel)]="user.name">

Strukturelle Direktiven

Strukturelle Direktiven verändern die Struktur des DOM. Beispiele sind *ngIf und *ngFor.

<div *ngIf="isVisible">Visible Content</div>

ngFor verwenden

*ngFor durchläuft Daten und zeigt Elemente wiederholt an:

<li *ngFor="let item of items">{{ item }}</li>

Zusammenfassung

Sie haben gelernt, wie Sie Vorlagen und Datenbindung verwenden, um dynamische Angular-Ansichten zu erstellen!