Angular 2 Keyboard Events 10+ Examples

Here are about Angular 2 Keyboard Events to help you get started when creating your new single page web application. These 10+ examples and templates will show you how to create your own angular components that have key listeners (using events such as keydown and keyup) that trigger specific events on your app controller.

What is a keyboard event?

A keyboard event is essentially a trigger than executes a bit of JavaScript code when a user presses a keyboard key. For example, you might  have a submit button on a form which you want to be triggered when a user presses the enter key.

 

1. Angular 2 & 4 Key Events Example

Angular 2 & 4 Key Events Example

To listen to the window for events we will use the HostListener API. This API allows us to register a special listener for events in the browser and then call methods in our components to react to them. In our example we have a simple counter component that can increment and decrement a value on the view. Our counter component will have two buttons. We will listen to the keyup event to be able to use the keyboard arrow keys for the component.

View Example Demo

2. Angular 2 Typescript Keyboard Event Demo

Angular 2 Typescript Keyboard Event Demo
Angular 2 Typescript Keyboard Event Demo

A simple plunker demonstrating Angular2 usage: Uses SystemJS + TypeScript to compile on the fly and includes binding, directives, http, pipes, and DI usage.

View Example

3. Angular 4 Event Binding

Angular 4 Event Binding
Angular 4 Event Binding

When a user interacts with your app, it’s sometimes necessary to know when this happens. A click, hover, or a keyboard action are all events that you can use to call component logic within Angular. That’s what Angular event binding is all about. It’s one-way data binding, in that it sends information from the view to the component class. This is opposite from property binding, where data is sent from the component class to the view.

View Example

4. Angular 2 Click Event Example

Angular 2 Click Event Example
Angular 2 Click Event Example

You can use Angular event bindings to respond to any DOM event. Many DOM events are triggered by user input. Binding to these events provides a way to get input from the user. To bind to a DOM event, surround the DOM event name in parentheses and assign a quoted template statement to it. This example shows an event binding that implements a click handler.

View Example

5. Angular 2 Double Click Event

Angular 2 Double Click Event
Angular 2 Double Click Event

Angular 2 Double Click (dblclick) event using the EventEmitter, a mother component receives the double click (dblclick) event from the child component when a user clicks twice on an element.

View Example

6. Angular 2 Tutorial: Adding HotKeys (Keyboard shortcuts) to a Component

Angular 2 Tutorial- Adding HotKeys (Keyboard shortcuts) to a Component
Angular 2 Tutorial: Adding HotKeys (Keyboard shortcuts) to a Component

Arguably hotkeys can substantially increase the usability of an application, the less the users have to touch the mouse the better will be their experience with the application. Luckily for us there is a very easy way of defining hotkeys on angular2, which is by adding a listener to the host component, we can accomplish this by just adding the element host to the @Component decorator.

View Example

7. Keyboard Events Library in Angular 2x/4x

Keyboard Events Library in Angular 2x/4x
Keyboard Events Library in Angular 2x/4x

Library to capture key-events. Compatible with Angular 2.x and 4.x. To install this library with github reference, run: $ npm install https://github.com/mugan86/key-events-in-angular-2-library.git#v0.4.0 –save

Code Demo

8. Detect CTRL+C in Angular 2

Detect CTRL+C in Angular 2
Detect CTRL+C in Angular 2

Angular keyboard event event comes with ctrlKey property. If user clicks button along with Ctrl key, event.ctrlKey will true. By using this behaviour we detect Ctrl + C, Ctrl + V and Ctrl + S combination.

Article View Example

9. Angular 2 Copy & Paste Example

Angular 2 Copy & Paste Example
Angular 2 Copy & Paste Example

Angular 2 scheduling application that allows creating events from existing events using copy&paste.

View Example

10. Angular 2 Create Shortcut Keys with Window Keydown

Angular 2 Create Shortcut Keys with Window Keydown
Angular 2 Create Shortcut Keys with Window Keydown

he actual possible key combinations vary greatly between browsers, as most browsers have a number of built-in shortcut keys, which can not be used in web applications.

Video Tutorial

Sam Deering

Sam Deering

Sam is a web developer, online entrepreneur and investor. In his spare time he enjoys coding, playing chess and sharing what he learns with others.

Leave a Reply

Your email address will not be published. Required fields are marked *