Shortcut key add Into Your Angular Website

Are you Anxious about the use of a mouse? Do you want to add your own shortcut key to your web application? They can help you save a lot of time, right? .Let's start to learn how to add a short key to your website. It would greatly improve your site’s accessibility and navigation.

 

Keyboard shortcuts are a very convenient feature for users. It allows them to do things without many clicks, increasing productivity. Keyboard shortcut handling can easily be added to Angular apps with the hotkeys library.

Features:

• Define hotkeys on an entire route, automatically binding and unbinding them as you navigate
• Automatic listing of shortcuts when users hit the ? key
• Super duper unit tests                                                                                                                                                                    

1)Create New Project:

2)Install hotkey.js Globally

 

3)Add code in app.componet.html

4)Import in app.component.ts  and export enum

39 is which code of right arraow and 37 is left arrow 

5)Add in an export class of component  

 6)output:

By using left an arrow you can decrement the value and  by right side an arrow you can increment the value 

Which code of keys:

A-65                                  B-66                                 C-67

D-68                                  E-69                                 F-70

G-71                                   H-72                                 I-73

J-74                                   K-75                                  L-76

M-78                                 N-79                                 O-80

P-81                                  Q-82                                  R-83

S-84                                  T-85                                  U-86

V-87                                  W-88                                 X-89

Y-90                                   Z-91     

F1-112                           F2-113                                   F3-114

F4-115                           F5-116                                  F6-117

F7-118                           F8-119                                  F9-120

F10-121                         F11-122                                F12-123

shift-16                           ctrl-17                                  alt-18

Right arrow-37         upper arrow-38         left arrow-38        lower arrow-39

conclusion:

   With the help of this, you can open a dialogue box or a component, accessibility, and navigation on your fingertips.