AngularJS2 user input
When users click on a link, press the button or enter the text, the interaction of these users will trigger the DOM event.
In this chapter, we will learn how to use the Angular event binding syntax to bind these events.
The following Gif diagram illustrates the operation of the instance:
The source code can be downloaded at the end of the article.
Bind to user input event
We can use the Angular event binding mechanism to respond to any DOM event.
The following example will bind the click event:
<Button (click) = "onClickMe ()"> point me! </ Button>
The click on the left indicates that the button's click event is used as the binding target. To the right of the equal sign, the text in quotation marks is a template statement
The complete code is as follows:
App / click-me.component.ts file:
Import { Component } from ' @ angular / core ' ; @ Component ( { selector : ' click-me ' ,
template : `< button ( click ) = " onClickMe () " > point me! </ Button >
{ { clickMessage } } `
} ) Export class ClickMeComponent { clickMessage = ' ' ;
OnClickMe ( ) { this . ClickMessage = ' rookie tutorial! ' ;
} }
Get user input via the $ event object
We can bind to all types of events.
Let's try to bind the keyup event to an input box and echo the user input to the screen.
App / keyup.component.ts (v1) File:
@ The Component ( { Selector : ' Key-UP1 ' ,
Template : `< INPUT ( keyUp ) = " onKey ($ Event) " > < P > { { values } } </ P >`
} ) Export class KeyUpComponent_v1 { values = ' ' ;
/ *
// non-strongly typed onKey (Event: the any) = {this.values event.target.value + + '|';}
* / // strongly typed
OnKey ( event : KeyboardEvent ) { this . Values + = ( < HTMLInputElement > event . Target ) . Value + ' | ' ;
} }
In the above code, we listened to an event and captured the user input. Angular stores the event object in the $ event variable.
The onKey () method of the component is used to extract the input from the event object and add the value of the input to values.
Obtain user input from a template reference variable
You can display user data by using local template variables, which are referenced by adding a pound sign (#) to the identifier.
The following example demonstrates how to use local template variables:
App / loop-back.component.ts file:
@ The Component ( { Selector : ' Loop-Back ' ,
Template : `< INPUT # Box ( keyUp ) = " 0 " > < P > { { Box . Value } } </ P >`
} ) Export class LoopbackComponent { }
We
<input>define a named element on boxthe template reference variables. boxVariable references is the <input>element itself, which means we can get input element valuevalues and by interpolation expression to display it in <p>the label.
We can use the template reference variable to modify the above example of keyup:
App / keyup.components.ts (v2) File:
@ The Component ( { Selector : ' Key-UP2 ' ,
Template : `< INPUT # Box ( keyUp ) = " onKey (box.value) " > < P > { { values } } </ P >`
} ) Export class KeyUpComponent_v2 { Values = ' ' ;
onKey ( value : string ) { this .Values + = value + ' | ' ;
} }
Key event filtering (via key.enter)
We can only enter the value of the input box when the user presses the Enter key.
(Keyup) event handling statement will hear every button, we can filter keys, such as every $ event.keyCode, only by pressing the Enter key to update the values attribute.
Angular can filter the keyboard events for us by binding to the Angup's keyup.enter pseudo event to listen for the Enter key event.
App / keyup.components.ts (v3):
@ The Component ( { Selector : ' Key-UP3 ' ,
Template : `< INPUT # Box ( keyUp . Enter ) = " values = box.value " > < P > { { values } } </ P >`
} ) Export class KeyUpComponent_v3 { values = ' ' ;
}
Blur (lost focus) event
Next we can use the blur (lost focus) event, which can then update the values attribute after the element has lost focus.
The following examples also listen to the input carriage return key and the input box to lose focus on the event.
App / keyup.components.ts (v4):
@ The Component ( { Selector : ' Key-UP4 ' ,
Template : `< INPUT # Box ( keyUp . Enter ) = " values = box.value " ( Blur ) = " values = box.value " > < P > { { values } } </ P > `
} ) export class KeyUpComponent_v4 { values = ' ';
}
The source code used in this article can be downloaded in the following way, excluding the node_modules and typings directories.
EmoticonEmoticon