1.6.1. Bind to user input event ¶

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

The following example binds the click event:

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

The click to the left of the equal sign indicates that the click event of the button is taken as the binding target. To the right of the equal sign, the text in the quotation marks is a template statement

The complete code is as follows:

import { Component } from '@angular/core';

@Component({
  selector: 'click-me',
  template: `
    <button (click)="onClickMe()">Click me!</button>
    {{clickMessage}}`
})
export class ClickMeComponent {
  clickMessage = '';

  onClickMe() {
    this.clickMessage = 'Rookie Tutorial!';
  }
}

1.6.2. Pass through $event object to get user input ¶

We can bind to all types of events.

Let’s try binding to an input box keyup event and echo what the user typed back to the screen.

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

1.6.3. Get user input from a template reference variable ¶

You can display user data by using local template variables, and template reference variables are achieved by adding a pound sign (#) before the identifier.

The following example shows how to use local template variables:

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

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

1.6.4. Keystroke event filtering (via key.enter ) ¶

We can get the value of the input box only when the user presses the enter (enter) key.

(keyup) the event handling statement hears every keystroke, and we can filter the keystroke, such as every keystroke $event.keyCode updated only when the enter key is pressed values property.

Angular can filter keyboard events for us by binding to Angular’s keyup.enter the pseudo event listens for the event of the enter key.

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

1.6.5. blur (loss of focus) event ¶

Next we can use the blur (lose focus) event, which can be updated afterthe element loses focus values property.

The following example listens for events that both the enter key and the input box lose focus.

@Component({
  selector: 'key-up4',
  template: `
    <input #box
      (keyup.enter)="values=box.value"
      (blur)="values=box.value">

    <p>{{values}}</p>
  `
})
export class KeyUpComponent_v4 {
  values = '';
}