Two-Way-Binding mit ngModel
Mit Techniken wie der String-Interpolation oder dem Property Binding lassen sich Informationen aus dem TypeScript-Code leicht in das HTML-DOM übertragen und dort anzeigen. Möchte man jedoch Eingaben aus dem Benutzerinterface wieder in den Programmcode einlesen, wird es etwas komplizierter. In den letzten Jahren haben sich bei der Angular-Entwicklung reaktive Formulare etabliert, die diese Aufgabe mit Bravour meistern. Diese Formulare werden in einem späteren Abschnitt noch behandelt. Doch nicht immer ist eine so umfangreiche Lösung notwendig. Eine einfachere Möglichkeit bietet das Two-Way-Binding mit Hilfe der Direktive ngModel. Damit lässt sich eine Variable aus dem TypeScript-Code direkt mit einem HTML-Element verbinden. Das ist vor allem bei Eingabefeldern (Input-Elementen) praktisch, denn Änderungen des Nutzers werden automatisch in die Variable übertragen. Ebenso werden Änderungen am Variablenwerte automatisch auf das HTML übertragen. Bei einem Textfeld geschieht die Aktualisierung unmittelbar beim Schreiben. Handelt es sich um ein Kontrollkästchen (Checkbox), wird der Wert bei jeder Zustandsänderung aktualisiert. Um der beschriebene Two-Way-Binding zu verwenden, stellt Angular die Direktive ngModel bereit. Sie ist nicht automatisch verfügbar, sondern Teil des FormsModule aus dem Paket @angular/forms und muss zunächst importiert werden. Entweder in der in der Hauptmoduldatei, meistens app.module.ts, oder direkt in der Komponente. Erst dann kann ngModel im Template verwendet werden.
import { Component } from '@angular/core'; import { FormsModule} from "@angular/forms"; @Component({ selector: 'app-twoway-binding', standalone: true, imports: [FormsModule], templateUrl: './twoway-binding.component.html', styleUrl: './twoway-binding.component.scss' }) export class TwowayBindingComponent { firstName: string = ''; lastName: string = ''; isEmployee: boolean = false; }
<div> <label for="firstName">First Name:</label> <input id="firstName" type="text" [(ngModel)]="firstName" /> </div> <div> <label for="lastName">Last Namen:</label> <input id="lastName" type="text" [(ngModel)]="lastName" /> </div> <div> <label> <input type="checkbox" [(ngModel)]="isEmployee" /> Is Employee </label> </div> <hr /> <div> <p><strong>First Name:</strong> {{ firstName }}</p> <p><strong>Last Name:</strong> {{ lastName }}</p> <p><strong>Is Employee:</strong> {{ isEmployee }}</p> </div>
Im HTML-Template des Beispiels befinden sich drei Eingabeelemente, die über ngModel mit Variablen aus dem TypeScript-Code verbunden sind. Für den Vornamen und Nachnamen kommen einfache Textfelder (type="text") zum Einsatz. Sobald etwas in ein Feld geschrieben wird, wird der Wert direkt in die jeweilige Variable (firstName oder lastName) übernommen. Das dritte Eingabeelement ist ein Kontrollkästchen (type="checkbox"), das an die Variable isEmployee gebunden ist. Wird das Kästchen aktiviert oder deaktiviert, ändert sich der Wahrheitswert dieser Variable sofort. Unterhalb der Eingabeelemente befindet sich ein kleiner Kontrollbereich. Dort werden die aktuellen Werte der Variablen mithilfe der String-Interpolation angezeigt. So lässt sich sofort sehen, ob das Two-Way-Binding korrekt funktioniert und die Änderungen aus den Eingabefeldern tatsächlich im Programm ankommen. Eingaben in den Input-Elemente führen zu einer umgehenden Aktualisierung der Anzeige.