DEV Community

Cover image for How to set up hot keys in Angular
Adrian Matei
Adrian Matei

Posted on • Updated on • Originally published at codepedia.org

How to set up hot keys in 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 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

Source code for www.bookmarks.dev is available on Github

The whole magic happens in this piece of code:

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);
      }
    );
  }
}
Enter fullscreen mode Exit fullscreen mode

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

  @HostListener('window:keydown.control.p', ['$event'])
  showPinned(event: KeyboardEvent) {
    event.preventDefault();
    //...
    }
Enter fullscreen mode Exit fullscreen mode

The HostListener1 decorator declares a DOM event to listen for. Angular will invoke the showPinned() method when the host emits the key-press event - Ctrl + P.

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 with the pinned bookmarks.

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.

References


  1. https://angular.io/api/core/HostListener 

  2. https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault 

Discussion (0)