ngx-hotkeys

An Angular module providing hotkey support.

Feel free to take a look at the DEMO.

• Introduction
• Installation
• Usage
• API

Introduction

This module started as an updated port of angular2-hotkeys which originates from a personal need of a full Angular 6 compatible version. The original library was the last dependency forcing us to use the rxjs-compat.

Installation

Install via npm:

npm install @balticcode/ngx-hotkeys --save

Install using schematics:

ng add @balticcode/ngx-hotkeys

This command will:

• Add @balticcode/ngx-hotkeys into package.json.
• Run npm install.
• Import NgxHotkeysModule.forRoot() into the root module of your default application (or defining a project by using the --project <PROJECT_NAME> and/or --module <MODULE_PATH> CLI parameters).

Usage

Import NgxHotkeysModule

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {NgxHotkeysModule} from '@balticcode/ngx-hotkeys';

@NgModule({
    imports: [
        BrowserModule,
        NgxHotkeysModule.forRoot()
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

Configuration (NgxHotkeysModule.forRoot(options?: HotkeyOptions))

• disableCheatSheet
  • Type: boolean?
  • Disable the cheat sheet popover dialog.
  • Default: false
• cheatSheetTitle
  • Type: string?
  • Specify the cheat sheets title.
  • Default: 'Keyboard Shortcuts:'
• cheatSheetHotkey
  • Type: string?
  • Key combination to trigger the cheat sheet.
  • Default: '?'
• cheatSheetHotkeyDescription
  • Type: string?
  • Description for the cheat sheet hot key in the cheat sheet.
  • Default: 'Show / hide this help menu'
• cheatSheetCloseEsc
  • Type: boolean?
  • Use also ESC for closing the cheat sheet
  • Default: false
• cheatSheetCloseEscDescription
  • Type: string?
  • Description for the ESC key for closing the cheat sheet (if enabled).
  • Default: 'Hide this help menu'

API

NgxHotkeysService

Methods

• register(hotkey: Hotkey | Hotkey[], unpausing = false): void: Registers a new hotkey/new hotkeys with it's/their handler(s).
• unregister(hotkey: Hotkey | Hotkey[], pausing = false): void: Removes a/the registered hotkey(s).
• get(combo?: string): Hotkey | Hotkey[]: Returns all hotkeys matching the passed combo(s).
• pause(hotkey?: Hotkey | Hotkey[]): void: Stops listening for the specified hotkeys.
• unpause(hotkey?: Hotkey | Hotkey[]): void: Resumes listening for the specified hotkeys.
• reset(): void: Resets all hotkeys.

Properties

• hotkeys (Hotkey[]): Returns the registered hotkeys as array.
• cheatSheetToggled (Observable<boolean>): Returns an Observable stream indicating the cheatsheets visibility was toggled.
• options (HotkeyOptions): Returns the options used to configure the service.

Example

import {Hotkey, NgxHotkeysService} from '@balticcode/ngx-hotkeys';

constructor(private _hotkeysService: NgxHotkeysService) {
  this._hotkeysService.register({
    combo: 'shift+g',
    handler: event => {
      console.log('Typed hotkey');
    },
    description: 'Sends a secret message to the console.'
  });
}

NgxCheatsheetComponent

Properties

• title (string): Determines the Cheatsheet title.