#

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 { ComponentOnInit } from '@angular/core';

 

@Component({

  selector: 'app-liste',

  templateUrl: './liste.component.html',

  styleUrls: ['./liste.component.css']

})

export class ListeComponent implements OnInit {

  

  //< Angular Data >

  ListNamestring = "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

 

Mobile

.

soap2day