Input in Angular 2
Inputs
To
handle the user inputs on UX and associate some events like s clicking a link,
pushing a button, and entering text raise DOM events . Using the events we
perform some actions on Page. i.e. post back or change events for Save/Update
Types Of events
User Defined(Custom)
System Defined ($events)
Syntax and Code Snippet
@Component({
selector: 'myapp',
template: ‘<button (click)="ShowAlert()">Click me!</button>’
})
export class AppComponent
{
myInfo = '';
ShowAlert()
{
this.myInfo = 'Test Check!';
}
}
HTML Body
User Defined
import { Component } from '@angular/core';@Component({
selector: 'myapp',
template: ‘<button (click)="ShowAlert()">Click me!</button>’
})
export class AppComponent
{
myInfo = '';
ShowAlert()
{
this.myInfo = 'Test Check!';
}
}
<body>
<myapp>Loading Please wait ...</myapp>
</body>
Once clicking on UX for button associated function get called “ShowAlert()” which perform some actions . i.e shows the messages . Here “ShowAlert()” is user defined function we have created. Further we can handle the text and data to perform some actions.
System Defined
import { Component } from '@angular/core';
@Component({
selector: 'myapp',
template:'<input (keyup)="onKeyUpEvent($event)">'
<div>{{ enteredValues}}</div>
<button (click)="ShowAlert()">Click me!</button>’})
export class AppComponent
{
enteredValues = '';
onKeyUpEvent(event: KeyboardEvent)
{
this.enteredValues += event.target.value + ' | ';
}
}
$event.target.value
Access the event values (input entered )
Input in Angular 2
![]()
Reviewed by Rupesh
on
04:10
Rating:
No comments: