Zweidirektionale Datenbindung in Angular

In Angular kann man es so einrichten, dass bei der Eingabe von Text in ein Inputfeld dieser Text automatisch in eine Klasseneigenschaft übernommen wird. Dies wird zweidirektionale Datenbindung genannt.

Damit diese Bindung funktioniert, muss sie zunächst aktiviert werden. Dazu importieren wir im Modul der Komponente FormsModule:

import { FormsModule } from '@angular/forms';

Und fügen sie dann in die Eigenschaft imports des Dekorators @Component hinzu:

@Component({
	selector: 'app-root',
	standalone: true,
	imports: [FormsModule, UserComponent],
	templateUrl: './app.component.html',
	styleUrl: './app.component.css'
})

Danach ist die zweidirektionale Datenbindung aktiviert und wir können sie nutzen. Lassen Sie uns das tun.

Lassen Sie uns zunächst eine Klasseneigenschaft deklarieren, die wir dann der zweidirektionalen Bindung unterziehen:

export class AppComponent {
	public text: string = '';
}

Nehmen wir an, wir haben ein Div und ein Inputfeld. Lassen Sie uns im Div eine bestimmte Klasseneigenschaft anzeigen:

<div>
	{{ text }}
</div>
<input>

Lassen Sie uns unsere Eigenschaft text an die Änderungen des Inputfelds binden. Dazu muss im Inputfeld eine spezielle Direktive [(ngModel)] geschrieben werden, deren Wert auf unsere Klasseneigenschaft gesetzt werden sollte:

<div>
	{{ text }}
</div>
<input [(ngModel)]="text">

Wenn Sie nun den Code starten und beginnen, Text in das Inputfeld einzugeben, wird dieser Text sofort im Div angezeigt.

Gegeben sind ein Inputfeld und ein Absatz. Im Inputfeld wird eine Zahl angezeigt. Sorgen Sie dafür, dass während der Eingabe einer Zahl in das Inputfeld im Absatz das Quadrat dieser Zahl angezeigt wird.

Gegeben sind zwei Inputfelder und ein Absatz. In die Inputfelder werden Zahlen eingegeben. Sorgen Sie dafür, dass im Absatz die Summe der eingegebenen Zahlen angezeigt wird.