ng-keyboard-shortcuts-help
info
- Make sure to install
@angular/animations
(npm install --save @angular/animations
oryarn add @angular/animations
- 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
Name | Type | default | description |
---|---|---|---|
key | string | none | The key to show/hide the help modal |
keyDescription | string | none | Description to show in the menu shortcut list for the toggle shortcut |
keyLabel | string | none | Label that can be used to group shortcuts together in the help menu |
closeKey | string | none | Close key to be used to close the modal |
closeKeyDescription | string | none | Description to show in the menu shortcut list for closing the modal shortcut |
closeKeyLabel | string | none | Label that can be used to group shortcuts together in the help menu |
title | string | "Keyboard shortcuts" | The title of the help screen |
emptyMessage | string | "No shortcuts available" | What message to show when no commands are registered when help modal is opened. |
disableScrolling | boolean | true | Whether to disable body scrolling when modal help screen is opened. |
Methods:
Name | Input | Return | Description |
---|---|---|---|
hide | void | KeyboardShortcutsHelpComponent | Programmatically hide the modal |
reveal | void | KeyboardShortcutsHelpComponent | Programmatically hide the modal |
visible | void | boolean | Check whether the modal is visible or not. |
toggle | void | KeyboardShortcutsHelpComponent | Programmatically toggle the modal visibility |
Methods:
Name | Input | Return | Description |
---|---|---|---|
select | string - 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>