Angular2 use `listen` method from `Renderer` class to bind keyboard event like `keydown`

angular, keyboard-events

Solution

For keyboard events to work, an element needs to have the focus, for an element that is not an input element to be able to get the focus, it needs to have a `tabindex` set

 <h2 tabindex="0">Hello World!</h2>

Plunker example

Problem

In my scenario, I want to bind `keydown` event to dynamically created elements. So I use `listen` from `Renderer` class to implement it. Here's my code snippet: ``` this.listenFunc = renderer.listen(elementRef.nativeElement, 'keydown', (event) => { console.log(event); console.log('Keypressed on element'); }); ``` Unfortunately, it can't work, I can bind mouse event like `click` and `dblclick`, but unlucky with a keyboard event. Any ideas would be appreciated. Here a Plunkr Demo for your refer.

Original source