How to set up hot keys in Angular
Tags: angular, productivity, javascript
Published: 2020-06-22 19:57:04

---
title: How to set up hot keys in Angular
published: true
description: Setup of hot keys with Angular to access recent and pinned bookmarks on www.bookmarks.dev
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/ic678f39s22tt72kmkdo.png
tags: angular, productivity, javascript
canonical_url: https://www.codepedia.org/ama/keyboard-shortcuts-example-with-angular
---

You know how good ideas come out of the blue? Recently it hit me that I could access my bookmarks history and the pinned bookmarks on [www.bookmarks.dev](https://www.bookmarks.dev) more easily with hot keys. So I rolled up my sleeves and implemented this feature. This post details how.

 ![Hot Keys on Bookmarks.dev demo](https://dev-to-uploads.s3.amazonaws.com/i/y850tai6n49rklq6g0zu.gif)


> Source code for [www.bookmarks.dev](https://www.bookmarks.dev) is available on [Github](https://github.com/BookmarksDev/bookmarks.dev)


The whole magic happens in this piece of code:
```typescript
import { Component, HostListener } from '@angular/core';

import 'styles.scss';
import { UserDataHistoryStore } from './core/user/userdata.history.store';
import { MatDialog, MatDialogConfig } from '@angular/material/dialog';
import { HotKeysDialogComponent } from './shared/history-dialog/hot-keys-dialog.component';
import { UserDataPinnedStore } from './core/user/userdata.pinned.store';

export class AppComponent {

  url = 'https://www.bookmarks.dev';
  innerWidth: any;
  constructor(private userDataHistoryStore: UserDataHistoryStore,
              private userDataPinnedStore: UserDataPinnedStore,
              private historyDialog: MatDialog) {
    this.innerWidth = 100;
  }

  @HostListener('window:keydown.control.p', ['$event'])
  showPinned(event: KeyboardEvent) {
    event.preventDefault();
    const dialogConfig = new MatDialogConfig();

    dialogConfig.disableClose = false;
    dialogConfig.autoFocus = true;
    dialogConfig.width = this.getRelativeWidth();

    dialogConfig.data = {
      bookmarks$: this.userDataPinnedStore.getPinnedBookmarks$(1),
      title: '<i class="fas fa-thumbtack"></i> Pinned'
    };

    const dialogRef = this.historyDialog.open(HotKeysDialogComponent, dialogConfig);
    dialogRef.afterClosed().subscribe(
      data => {
        console.log('Dialog output:', data);
      }
    );
  }
}
```

and to be more precise in the following three lines of code:

```typescript
  @HostListener('window:keydown.control.p', ['$event'])
  showPinned(event: KeyboardEvent) {
    event.preventDefault();
    //...
    }
```

The `HostListener`[^1] decorator declares a DOM event to listen for. Angular will invoke the `showPinned()` method when the host emits the key-press event - **Ctrl + P**.

[^1]: <https://angular.io/api/core/HostListener>

The `event.preventDefault()`[^2] method stops the default action of an element from happening, which in this case on Windows would be print the page, and instead launches an [Angular dialog](https://www.codepedia.org/ama/how-to-embed-a-youtube-video-in-an-angular-material-dialog) with the pinned bookmarks.

[^2]: <https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault>

The same mechanism applies for the **Ctrl + H** shortcut to show the bookmarks from **History**.


## Conclusion
I've told you it wasn't much, but it's definetely a [piece of code I will bookmark for later](https://dev.to/ama/bookmarking-code-snippets-with-codelets-3d44).

## References