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: Dateien .ts .html .module und Daten binden

17.12.2020 (👁3855)

Angular: Dateien und Datenbindung

In Angular benötigt man 3 Dateien.

1)    Die .html Datei als Ausgabe

2)    Die .ts TypeScript Datei als  Code-Behind zum Programmcode ausführen

3)    Die .module Datei zum Definieren, welche großen Code Module oder Bibliotheken von Angular hier verwendet werden

Im Prinzip ist Angular recht einfach:

Man legt Daten in der Code-Behind Datei .ts fest und bindet diese in der Ausgabe .html Datei mit zwei geschweiften Klammern {{Ausgabe}} an

1)   .html Datei

In der HTML Datei:

Die Eingabe über [(ngModul)]=“variable“

<input type="text" [(ngModel)]="title">

 

Und die Anzeige oder Ausgabe mit der {{Bindung}}

{{ title }}

 

Datei app.compontent.html

Test Angular Variablen

<br>

<br>

Input in Field

<br>

<input type="text" [(ngModel)]="title">

<br><br>

Output in HTML

<br>

{{ title }}

2)   .ts TypeScript Datei

In der .ts Typescript Datei:

Hier findet man die Variablen und Daten

import { Component } from '@angular/core';

@Component({

  selector: 'app-root',

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

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

})

export class AppComponent {

  

    title = 'Raimund 1222';

}

3)   Module Datei

In der dazugehörigen .module Datei werden alle Teile benannt, welche verwendet werden.

Hier findet man

NgModule zum handeln der Daten,

FormsModule ->zum verwenden eines Eingabefeldes mit Angular

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import {FormsModulefrom '@angular/forms'

import { AppComponent } from './app.component';

@NgModule({

  declarations: [

    AppComponent

  ],

  imports: [

    BrowserModule,

    FormsModule

  ],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule { }