Angular event in Eingabe
Angular Events erstellt man, indem man in der html Seite den Event in das Input Feld einfügt wie hier mit
(input)="onChangeInput($event)" |
und in der Code-Behind Seite den Event empfängt
onChangeInput(event: any){ console.log(event); //this.ListName=event.target.value;
}
|
Hinweis: beim Input Feld gibt es nur den Angular (input) und nicht das javascript oninput oder onclick
.html Seite
Einfügen des (input)=”onInputEvent($event)“
Code src\app\components\liste\liste.component.html
<p>Eingabe ngModel 2Way:<br> <input type="text" class="forms-control" [(ngModel)]="ListName" ></p>
Ausgabe={{ ListName }}
<p>Eingabe event Binding: <input type="text" class="forms-control" (input)="onChangeInput($event)" ></p>
Ausgabe={{ ListName }}
|
In der Code-Behind Seite
Code in der Datei 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 { }
onChangeInput(event: any){ console.log(event); //this.ListName=event.target.value;
}
}
|