Angular: Beispiel Two-Way-Binding
In Angular ist die wesentlichste Nutzung das 2-way-Binding.
Dabei werden die Daten im Hintergrund gehalten und im Frontend angezeigt und geändert.
Mit
[(ngModel)]="ListName"
|
Wird die 2Way Binding definiert.
Hier wird ein Eingabefeld angebunden an das Binding und die Eingaben und Ausgaben im Textfeld werden automatisch in das Datenmodel im Hintergrund übertragen.
Daten-Datei .ts
Die .ts Datei enthält die Daten
Hier eine Variable ListName
Angular Typescript Codebehind
Datei src\app\components\liste\liste.component.ts
import { Component, OnInit } from '@angular/core';
@Component({ selector: 'app-liste', templateUrl: './liste.component.html', styleUrls: ['./liste.component.css'] }) export class ListeComponent implements OnInit {
//< Angular Data > ListName: string = "Data Excample";
//</ Angular Data >
constructor() { }
ngOnInit(): void { }
}
|
Die Ausgabedatei .html
In der Frontend Datei werden über ngModel die Daten oder Variablen angebunden
Angular/Html Code Frontenddatei
src\app\components\liste\liste.component.html
<p>Eingabe: <input type="text" class="forms-control" [(ngModel)]="ListName" ></p>
Ausgabe={{ ListName }}
|
Ausgabe ist in html im Browser
Angular
Data Binding: Eingabe: Ausgabe Titel=Data Excample |