Angular 2 User Input

When users click links, press buttons, or enter text, these user interactions trigger DOM events.

In this chapter, we will learn how to use Angular event binding syntax to bind these events.

The following GIF demonstrates the operation of this example:

The source code can be downloaded at the end of the article.

Binding to User Input Events

We can use Angular's event binding mechanism to respond to any DOM event.

The following example binds a click event:

<button (click)="onClickMe()">点我!</button>

The (click) on the left side of the equals sign indicates that the button's click event is the binding target. On the right side, the text in quotes 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()">Click me!</button> {{clickMessage}}` }) export class ClickMeComponent { clickMessage = ''; onClickMe() { this.clickMessage = 'Example!'; } }

Getting user input through the $event object

We can bind to all types of events.

Let's try binding to the keyup event of an input box and echo the user's input back to the screen.

app/keyup.component.ts (v1) file:

@Component({ selector: 'key-up1', template: ` <input (keyup)="onKey($event)"> <p>{{values}}</p> ` }) export class KeyUpComponent_v1 { values = ''; /*// Non-strongly typed onKey(event:any) { this.values += event.target.value + ' | '; }*/ //Strongly typed onKey(event: KeyboardEvent) { this.values += (<HTMLInputElement>event.target).value + ' | '; } }

In the above code, we listen to an event and capture user input. Angular stores the event object in the $event variable.

The component's onKey() method is used to extract user input from the event object, and then add the entered value to the values property.

Getting user input from a template reference variable

You can display user data by using a local template variable. A template reference variable is created by adding a hash symbol (#) before an identifier.

The following example demonstrates how to use a local template variable:

app/loop-back.component.ts file:

@Component({ selector: 'loop-back', template: ` <input #box (keyup)="0"> <p>{{box.value}}</p> ` }) export class LoopbackComponent { }

We<input>on the element, defined a namedboxtemplate reference variable.boxThe variable references<input>the element itself, which means we can get the input element'svaluevalue, and display it via interpolation expression in the<p>tag.

We can use template reference variables to modify the above keyup example:

app/keyup.components.ts (v2) file:

@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 + ' | '; } }

Keyboard event filtering (via key.enter)

We can get the value of the input box only when the user presses the Enter key.

The (keyup) event handler listens to every key press. We can filter key presses, for example by checking each $event.keyCode, and update the values property only when the Enter key is pressed.

Angular can filter keyboard events for us by binding to Angular's keyup.enter pseudo-event to listen for the Enter key.

app/keyup.components.ts (v3)：

@Component({ selector: 'key-up3', template: ` <input #box (keyup.enter)="values=box.value"> <p>{{values}}</p> ` }) export class KeyUpComponent_v3 { values = ''; }

blur (loss of focus) event

Next, we can use the blur (loss of focus) event, which updates the values property after the element loses focus.

The following example listens to both the Enter key press and the input box losing focus events.

app/keyup.components.ts (v4)：

@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 via the following methods, excluding the node_modules and typings directories.

Source code download

Other extensions