How to specify event to trigger only certain keystroke in Angular2

Question

All:

I am pretty new to Angular2, say I have a inputbox, I want to trigger a event only when certain character input, from Angular2 BASICS "User Input" section: there is an example like:

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

This code only respond to "enter" key stroke, I wonder how can I specify other key stroke like this which I mean is there something like keyup.a, keyup.b ... etcs

Thanks

Mark Rajcok · Accepted Answer · 2016-03-07 22:55:44Z

5

(keyup.a) should work. (I tested in Chrome and it worked).

I found the following "documentation" on github regarding this "feature": https://github.com/angular/angular/commit/8fa1539bacd454635d1f78ab056e2017929d0634

feat(keyEvents): support for <div (keyup.enter)="callback()">
This commit adds a plugin for the event manager, to allow a key name to
be appended to the event name (for keyup and keydown events), so that
the callback is only called for that key.

Here are some examples:
 (keydown.shift.enter)
 (keyup.space)
 (keydown.control.shift.a)
 (keyup.f1)

Key names mostly follow the DOM Level 3 event key values:
http://www.w3.org/TR/DOM-Level-3-Events-key/#key-value-tables
There are some limitations to be worked on (cf details
in #1136) but for now, this
implementation is reliable for the following keys (by "reliable" I mean
compatible with Chrome and Firefox and not depending on the keyboard
layout):
- alt, control, shift, meta (those keys can be combined with other keys)
- tab, enter, backspace, pause, scrolllock, capslock, numlock
- insert, delete, home, end, pageup, pagedown
- arrowup, arrowdown, arrowleft, arrowright
- latin letters (a-z), function keys (f1-f12)
- numbers on the numeric keypad (but those keys are not correctly simulated
by Chromedriver)

There is a sample to play with in examples/src/key_events/.

answered Mar 7, 2016 at 22:55

Mark Rajcok

365k114 gold badges501 silver badges494 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Kuan Over a year ago

Thanks, I will try that.

Collectives™ on Stack Overflow

How to specify event to trigger only certain keystroke in Angular2

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related