Angular 2 Keyboard Events

Question

Trying to monitor keyboard events with Angular 2 using TypeScript and What is Angular2 way of creating global keyboard shortcuts (a.k.a. hotkeys)? was helpful but tslint (codelyzer) objects with the message

In the "@Component" class decorator you are using the "host" property, this is considered bad practice. Use "@HostBindings", "@HostListeners" property decorator instead.

How do I use the recommended decorators? I'm not sure how the examples in Angular 2: Host binding and Host listening apply to my use case as I am not binding to any DOM elements.

Here is my demo

@Component({   selector: 'my-app',  template: `     <div>       <h2>Keyboard Event demo</h2>       Start typing to see KeyboardEvent values     </div>     <hr />     KeyboardEvent     <ul>       <li>altKey: {{altKey}}</li>       <li>charCode: {{charCode}}</li>       <li>code: {{code}}</li>       <li>ctrlKey: {{ctrlKey}}</li>       <li>keyCode: {{keyCode}}</li>       <li>keyIdentifier: {{keyIdentifier}}</li>       <li>metaKey: {{metaKey}}</li>       <li>shiftKey: {{shiftKey}}</li>       <li>timeStamp: {{timeStamp}}</li>       <li>type: {{type}}</li>       <li>which: {{which}}</li>     </ul>       `,   host: { '(window:keydown)': 'keyboardInput($event)' }   /*   In the "@Component" class decorator you are using the "host" property, this is considered bad practice.    Use "@HostBindings", "@HostListeners" property decorator instead.   */  }) export class App {    /* a few examples */   keyboardEvent: any;   altKey: boolean;   charCode: number;   code: string;   ctrlKey: boolean;   keyCode: number;   keyIdentifier: string;   metaKey: boolean;   shiftKey: boolean;   timeStamp: number;   type: string;   which: number;    keyboardInput(event: any) {     event.preventDefault();     event.stopPropagation();      this.keyboardEvent = event;     this.altKey = event.altKey;     this.charCode = event.charCode;     this.code = event.code;     this.ctrlKey = event.ctrlKey;     this.keyCode = event.keyCode;     this.keyIdentifier = event.keyIdentifier;     this.metaKey = event.metaKey;     this.shiftKey = event.shiftKey;     this.timeStamp = event.timeStamp;     this.type = event.type;     this.which = event.which;   }  } 

https://plnkr.co/edit/Aubybjbkp7p8FPxqM0zx

Answer 1

import {HostListener} from '@angular/core';  @HostListener('window:keydown', ['$event']) handleKeyDown(event: KeyboardEvent) {   // event.key === 'ArrowUp' } 

• @HostBindings('attr.foo') foo = 'bar' is to bind values from your component instance to the host element like class, attributes, properties or styles.