Readdy Write  
0,00 €
Your View Money
Views: Count
Self 20% 0
Your Content 60% 0

Users by Links 0
u1*(Content+Views) 10% 0
Follow-Follower 0
s2*(Income) 5% 0

Count
Followers 0
Login Register as User

Angular: Beispiel Two-Way-Binding ngModel

22.12.2020 (👁4209)

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