Angular 2 User Input

When users click links, press buttons, or type text, these 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 the click event:

&lt;button (click)="onClickMe()">Click me!</button>

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

  onClickMe() {
    this.clickMessage = 'tutorialpro.org!';
  }
}

Getting User Input from the $event Object

We can bind to events of all types.

Let's try binding to the keyup event of an input box and echo what the user types onto 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 = '';

  /*
  // Not 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 onKey() method of the component is used to extract the user input from the event object and accumulate it into 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 implemented by prefixing the identifier with a hash (#).

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 define a template reference variable named box on the <input> element. The box variable refers to the <input> element itself, meaning we can get the value of the input element and display it in the <p> tag using interpolation.

We can modify the previous keyup example using a template reference variable:

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

Key Event Filtering (Using key.enter)

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

The (keyup) event handler listens to every key press. We can filter the keys, such as every $event.keyCode, and only update the values property 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 event.

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 (Lose Focus) Event

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

The following example listens for both the Enter key and the blur event of the input box.

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 link, excluding the node_modules and typings directories.

Download Source Code