Create or add shortcuts dynamically to handle tasks in your angular application

Hello there, when we develop any application, it will be more convenient for a user if it has shortcut keys to perform a frequently used operation.

Nowadays almost every application has shortcut keys. so we, the angular application developer needs to add shortcut keys to our angular application as well. In this post we will see how to create shortcut keys for our angular application, even more, we are going to see how to create shortcut keys dynamically and use the same in our angular application and very important is we are not going to install any third-party plugin. Let’s do it.

(This is a basic demo for adding shortcut with combination two keys without installing any third-party plugin)

following is the HTML file of our angular component, in this, we have added two buttons and handled their click events with alert. After that, we have added two text box per button to create a shortcut key. two text box per button means we have a total of four text boxes, first two text boxes are to create a shortcut for button 1 and second two text boxes to create a shortcut for button 2.

<br>

<h4>Creating / adding shortcut for your Angular application</h4>

</div>

<p> This demo will allow you to create shortcut dynamically,

you can create and use shortcut dynamically.

by extending this demo further you can save your shortcut in databse also.

</p>

</div>

<hr>

<button class="btn btn-primary ml-5" (click)="button1Click()">Button 1</button>

<button class="btn btn-primary ml-5" (click)="button2Click()">Button 2</button>

</div>

<p>

To create shortcut,

at first please click in first textbox and press key (it should be ctrl/shift/alt),

after that click in second textbox and press any key.

once you give both keys Your shortcut is created.

</p>

</div>

Key 1

</label>

Key 2

</label>

<label class="form-control-sm"> Shortcut for button 1 event </label>

</div>

Key 1

</label>

Key 2

</label>

<label class="form-control-sm"> Shortcut for button 2 event </label>

</div>

<hr>

</div>

After HTML let’s see a type script file. Here we have declared two variable, to create two different shortcuts dynamically. To get Shift/Ctrl/Alt key in the first textbox we have handled key down events and has assigned to the key1 of their variables by checking which key is pressed.

One important thing is, we have accepted key(Ctrl/Alt/Shift) but while assigning to the key1, we have assigned it with a little different name like ‘shiftKey’ for ‘Shift’ and same for others, because after setting shortcut when we are going to check which shortcut is pressed we need to check which key is pressed in the key-down event object so we took the name of that key in event object and assigned to the key1, So it will be easy to check which key is pressed(by looking at code you can easily figure it out). Otherwise, we have to apply for loop and check for every key(Ctrl/Alt/Shift) or need to write multiple if-else conditions.

For the second key, it is simple data binding, the only max length is given.

import { Component, OnInit } from '@angular/core';

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.scss']

})

export class AppComponent implements OnInit {

shortcut1: { key1: string, key2: string };

shortcut2: { key1: string, key2: string };

constructor() { }

ngOnInit(): void {

this.shortcut1 = { key1: undefined, key2: undefined };

this.shortcut2 = { key1: undefined, key2: undefined };

}

button1Click() {

alert('button 1 clicked');

}

button2Click() {

alert('button 2 clicked');

}

text1KeyPress(event) {

switch (event.key) {

case 'Shift':

this.shortcut1.key1 = 'shiftKey';

break;

case 'Control':

this.shortcut1.key1 = 'ctrlKey';

break;

case 'Alt':

this.shortcut1.key1 = 'altKey';

break;

default:

this.shortcut1.key1 = undefined;

event.preventDefault();

alert('not allowed');

}

text2KeyPress(event) {

switch (event.key) {

case 'Shift':

this.shortcut2.key1 = 'shiftKey';

break;

case 'Control':

this.shortcut2.key1 = 'ctrlKey';

break;

case 'Alt':

this.shortcut2.key1 = 'altKey';

break;

default:

this.shortcut1.key1 = undefined;

event.preventDefault();

alert('not allowed');

}

isThisShortcut(event) {

if ((event.key + '').toLowerCase() == (this.shortcut1.key2 + '').toLowerCase() &&

event[this.shortcut1.key1] == true) {

this.button1Click();

}

if ((event.key + '').toLowerCase() == (this.shortcut2.key2 + '').toLowerCase() &&

event[this.shortcut2.key1] == true) {

this.button2Click();

}

After assigning keys, we have just compared which shortcut is pressed on key-down of hole page and called their function’s once condition is matched.

we made it dynamic to help you understand how keys are assigned and used, you can go for static programmatic way also you can save shortcuts in the database as well, it totally depends on your need.

We have not imported anything out of the angular library, here is the module file.

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { FormsModule } from '@angular/forms';

import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({

declarations: [

AppComponent

imports: [

BrowserModule,

AppRoutingModule,

BrowserAnimationsModule,

FormsModule

bootstrap: [AppComponent]

})

export class AppModule { }

Output

And that’s it,

Hope you like it.

Here you can download the project get me the project

When you download the project, at the very first run the command “npm install”.

Because of the size issue, we are not going to upload the node module folder onwards.

Angular Easily

Search This Blog

Create or add shortcuts dynamically to handle tasks in your angular application

Comments

Post a Comment