Freelance Project Requests info@CodeDocu.de Software Development in C# WPF Asp.Net Core Vba Excel Word SQL-Server EF Linq, UWP Net
#

 

 

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

[(ngModel)]="ListName"

 

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

  }

 

}

 

 

 

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

 

Mobile

.

Contact for Jobs, Project Requests: raimund.popp@microsoft-programmierer.de