Angular 2 Tutorial: Adding HotKeys (Keyboard shortcuts) to a Component

Arguably hotkeys can substantially increase the usability of an application, the less the users have to touch the mouse the better will be their experience with the application.

Luckily for us there is a very easy way of defining hotkeys on angular2, which is by adding a listener to the host component, we can accomplish this by just adding the element host to the @Component decorator.

Let’s take a look at an example:

import {Component } from '@angular/core';
 
@Component({
  selector: 'hotkeys-app',
  host: {'(window:keydown)': 'hotkeys($event)'},
  template: `
  	<button (click)=showMessage()>Hotkey Test</button>
  `,
})
export class AppComponent { 
 
   hotkeys(event){
      if (event.keyCode == 65){
         this.showMessage();
      }
   }
 
   showMessage(){
      alert('Hotkey Test');
   }
}

As you can see I’ve used the element host to add a listener to the window:keydown event, it will call the function hotkeys(event) every time this event occurs, all we have to do now on this function is to determine which key was pressed and take actions accordingly.

As an example I’ve placed a button on the template, let’s suppose we want the action of this button, which is the showMessage() funtion, to execute when the user presses the letter 'a' on the keyboard. On the hotkeys function we have the event parameter containing the keyCode, we have to check this value to see which key was pressed, in this case I’m calling showMessage() when the keycode is 65 (which is code for the letter 'a').

It’s also very common to use combinations as hotkeys, like for example ctrl+a. To do that we just have to change our condition a little bit:

if (event.keyCode == 65 && event.ctrlKey){

The only diference is that besides checking the keyCode I’m also using the event.ctrlKey to check if the ctrl key is pressed.

That’s it guys! Just leave a comment if you have any doubts.

Recommended for you

Tutorial: Angular 2 Datatable with Sorting, Filtering and Resizable Columns In this tutorial I'm going to show you one of the datatable solutions available for Angular 2, it's called ag-Grid and it's available not only for angular2, but also for other frameworks like Angular 1 and React. It's a really complete datatable, it has lots of features that I definitely want to exp...
Angular2: Uncaught (in promise): Error: Cannot match any routes: ” If you're specifying the routes on your project for the first time you may see the following error on the console when you run it: core.umd.js:3462 EXCEPTION: Uncaught (in promise): Error: Cannot match any routes: ''ErrorHandler.handleError @ core.umd.js:3462next @ core.umd.js:6924schedulerFn @...
Tutorial: Creating an Angular2 Autocomplete Angular 2 Autocomplete Before we begin I just want to say that I'm not going to use any third-party component for this tutorial, I'm going to create an autocomplete from scratch, my goal is to just make it show the suggestions and allow the user to select one, but if you need more advanced featu...
Tutorial: How to redirect in Angular2 In this tutorial I'm going to give you a very simple example of how to navigate between components on an Angular2 application, but before we begin there are some configurations we have to do. We're going to use 2 components in this example: Component1 and Component2, to be able to redirect and na...

3 comments on “Angular 2 Tutorial: Adding HotKeys (Keyboard shortcuts) to a Component

Leave a Reply

Your email address will not be published. Required fields are marked *

Obs: Use the tag <pre lang="LANGUAGE"> to include code blocks to your comment.
Example: <pre lang="javascript"> console.log('Test'); </pre>