angular-keyboard-nav v2.0.0

Angular Keyboard Nav

Angular directive to navigate elements with keyboard arrow keys.

Demo

https://justinlettau.github.io/angular-keyboard-nav/

Installation

npm install angular-keyboard-nav --save

Once installed you need to import the module and list the imported module in your application module:

import { KeyboardNavModule } from 'angular-keyboard-nav';

@NgModule({
  declarations: [
    AppComponent,
    ...
  ],
  imports: [
    KeyboardNavModule,
    ...
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Usage

Add the jlKeyboardNav directive to the container, and jlKeyboardNavItem to each item. Navigation is triggered only when focus is within the jlKeyboardNav element, so it works great with dropdown menus like ng-bootstrap dropdown.

<div class="list-group" jlKeyboardNav>
  <button type="button" class="list-group-item" jlKeyboardNavItem>
    Luke Skywalker
  </button>
  <button type="button" class="list-group-item" jlKeyboardNavItem>
    Darth Vadar
  </button>
  <button type="button" class="list-group-item" jlKeyboardNavItem>
    Obi-Wan Kenobi
  </button>
</div>