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
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
|