Angular keyboard navigation through DOM elements

Hi everyone, in this article we will look into a library named ngx-dom-navigator.

This library is a simple tool for navigation through dom elements. Provides useful features to make your application better.

Demo

You can see the demo here

First things first

Lets create a angular application.

ng new dom-navigation-example

Build an example page.

component.ts

component.html

Add some styling

The app should look like this.

Install the library

npm install ngx-dom-navigator

The ngx-dom-navigator library has simple usage. We need to import required things first, and then we just create a new DomNavigator instance.

In order to select our container element we need Document to select it.

Lets inject it to our component.

Then create a function named “initNavigator” and create a new instance of DomNavigator in it.

Now we can call the initNavigator() function in our ngOnInit or somewhere else.

Our component should look like this

Final result

You can find the library repository in GitHub here.

Example app: GitHub

Thank you for reading.