In Angular,
the most essential use is 2-way binding.
The data is
kept in the background and displayed and changed in the front end.
Mit
Defines the
2Way Binding.
Here an input
field is connected to the binding and the inputs and outputs in the text field
are automatically transferred to the data model in the background.
Data file .ts
The .ts file
contains the data
Here is a
Variable ListName
Angular Typescript Codebehind
File 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 {
}
}
|
The output
file .html
In the
front-end file, the data or variables are connected via ngModel
Angular/Html Code Frontend File
src\app\components\liste\liste.component.html
|
<p>Eingabe: <input type="text" class="forms-control" [(ngModel)]="ListName" ></p>
Ausgabe={{ ListName }}
|
Output is in
html in the browser
|
Angular Data Binding:
Input:
Output Titel=Data Excample
|