Two-Way-Binding mit ngModel
Synchronisieren Sie Formulareingaben mit dem Component-Zustand.
Two-Way-Binding mit ngModel ist eine kostenlose Angular Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Angular Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Angular Academy-Kurs umfasst insgesamt 4 Lektionen.
Was ist Two-Way Binding?
Two-Way Binding hält einen Wert zwischen Komponente und View synchron: Wird eine Seite aktualisiert, wird auch die andere aktualisiert. Die Syntax dafür ist [()], die sogenannte Banana-in-a-Box-Syntax.
Die Banana-in-a-Box-Syntax
Die kombinierte Syntax [(...)] ist eine Kurzform für ein Property Binding und ein Event Binding. Die eckigen Klammern bilden die Box, die runden Klammern die Banane.
<!-- shorthand -->
<input [(ngModel)]="name">
<!-- equivalent to -->
<input [ngModel]="name" (ngModelChange)="name = $event">ngModel kennenlernen
ngModel ist eine Direktive für Two-Way Binding bei Formularsteuerelementen wie Eingabefeldern, Auswahllisten und Textbereichen.
<input [(ngModel)]="username">
<p>Hello, {{ username }}</p>FormsModule importieren
Um ngModel zu verwenden, müssen Sie FormsModule in Ihre Standalone-Komponente oder Ihr NgModule importieren.
import { FormsModule } from "@angular/forms";
@Component({
selector: "app-demo",
standalone: true,
imports: [FormsModule],
template: "<input [(ngModel)]='name'>"
})
export class DemoComponent {
name = "";
}Ein Texteingabefeld binden
Während der Benutzer tippt, wird die gebundene Eigenschaft sofort aktualisiert. Wenn Sie die Eigenschaft im Code ändern, wird auch das Eingabefeld aktualisiert.
<input [(ngModel)]="email">
<p>Current: {{ email }}</p>Eine Checkbox binden
ngModel funktioniert mit Checkboxen und bindet dabei an einen booleschen Wert.
<input type="checkbox" [(ngModel)]="agreed">
<p>Agreed: {{ agreed }}</p>
// component
agreed = false;Eine Auswahlliste binden
Bei einem Select-Element bindet ngModel an den Wert der ausgewählten Option.
<select [(ngModel)]="color">
<option value="red">Red</option>
<option value="blue">Blue</option>
</select>
<p>Picked: {{ color }}</p>ngModel in Formularen
Fügen Sie innerhalb eines template-gesteuerten Formulars ein name-Attribut hinzu, damit Angular das Steuerelement beim Formular registriert.
<form #f="ngForm">
<input name="city" [(ngModel)]="city">
</form>Eigenständiges ngModel
Außerhalb eines Formulars funktioniert ngModel eigenständig, sofern FormsModule importiert wurde. Ein name ist nicht erforderlich.
<input [(ngModel)]="search">Wann Sie ngModel verwenden sollten
ngModel eignet sich besonders für einfache template-gesteuerte Formulare. Für komplexe Validierungen und dynamische Formulare werden häufig reaktive Formulare bevorzugt.
Auf Änderungen reagieren
Wenn Sie lediglich auf Änderungen reagieren müssen, binden Sie das Ereignis (ngModelChange) direkt, anstatt vollständiges Two-Way Binding zu verwenden.
<input [ngModel]="q" (ngModelChange)="onSearch($event)">Kurze Überprüfung
Testen Sie Ihr Verständnis von Two-Way Binding mit ngModel.
Zusammenfassung
Two-Way Binding verwendet die Banana-in-a-Box-Syntax [(ngModel)], die Property Binding und Event Binding kombiniert. Importieren Sie FormsModule, um sie für Eingabefelder, Checkboxen und Auswahllisten zu verwenden.
Häufig gestellte Fragen
Ist die Lektion „Two-Way-Binding mit ngModel“ kostenlos?
Ja — der vollständige Text von „Two-Way-Binding mit ngModel“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Angular Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Angular Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Two-Way-Binding mit ngModel“?
Synchronisieren Sie Formulareingaben mit dem Component-Zustand. Du übst Angular Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Angular Academy zu starten?
Keine Vorkenntnisse erforderlich. Angular Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.
Wie lange dauert die Lektion „Two-Way-Binding mit ngModel“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Angular Academy-Lektion Code schreiben und ausführen?
Ja. Jede Angular Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Rückblick auf Property- und Event-Binding
- Two-Way-Binding mit ngModel
- model()-Signal-Inputs
- Benutzerdefinierte Two-Way-bindbare Properties