Skip to main content

ng-keyboard-shortcuts-help

info
  1. Make sure to install @angular/animations ( npm install --save @angular/animations or yarn add @angular/animations
  2. Add BrowserAnimationsModule to your app.module imports

Can be used to show an help screen ( will be attached to body and be shown as a modal)

Should be placed in the root of your app, preferably in app.component.html

Inputs

NameTypedefaultdescription
keystringnoneThe key to show/hide the help modal
keyDescriptionstringnoneDescription to show in the menu shortcut list for the toggle shortcut
keyLabelstringnoneLabel that can be used to group shortcuts together in the help menu
closeKeystringnoneClose key to be used to close the modal
closeKeyDescriptionstringnoneDescription to show in the menu shortcut list for closing the modal shortcut
closeKeyLabelstringnoneLabel that can be used to group shortcuts together in the help menu
titlestring"Keyboard shortcuts"The title of the help screen
emptyMessagestring"No shortcuts available"What message to show when no commands are registered when help modal is opened.
disableScrollingbooleantrueWhether to disable body scrolling when modal help screen is opened.

Methods:

NameInputReturnDescription
hidevoidKeyboardShortcutsHelpComponentProgrammatically hide the modal
revealvoidKeyboardShortcutsHelpComponentProgrammatically hide the modal
visiblevoidbooleanCheck whether the modal is visible or not.
togglevoidKeyboardShortcutsHelpComponentProgrammatically toggle the modal visibility

Methods:

NameInputReturnDescription
selectstring - key to listen to events (example: 'cmd + e')Observable<ShortcutEventOutput>Listen to specific key events (will only work for registered keys)

app.component.ts

import { Component } from "@angular/core";

@Component({
selector: "app-root",
template: "./app.component.html",
styleUrls: ["./app.component.css"]
})
export class AppComponent {
title = "Hello";
}

app.component.html

<div style="text-align:center">
<h1>
Welcome to {{ title }}!
</h1>
<ng-keyboard-shortcuts-help [key]="'f1'" [closeKey]="'escape'" [title]="'Help'"></ng-keyboard-shortcuts-help>
</div>