how to add event for key left and right in angular2?

Question

I have written my code as mentioned below. As of now, the list item is selected only on mouse click. I want to traverse the list even when I press up and down arrow in keyboard. How to achieve this using angular2?

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

export class Hero {
name: string;
}

const HEROES: Hero[] = [
{ name: 'STWX1' },
{ name: 'STWX2' },
{ name: 'STWX3' },
{ name: 'STWX4' }
];

@Component({
selector: 'my-app',
template: `
    <div style="display: inline-block; width = 200px; ">
        <ul class="heroes">
            <li *ngFor="let hero of heroes" (click)="onSelect(hero)"
                [class.selected]="hero === selectedHero">
                 <p>{{hero.name}}</p>
            </li>
       </ul>
   </div>'

, styles: [...] })

export class AppComponent  {
name = 'Angular1';
testRequestId = '3224';
heroes = HEROES;
selectedHero: Hero;

goToDivClick() {
    return HEROES;
}

onSelect(hero: Hero): void {
    this.selectedHero = hero;
}

}

Have a look at angular cdk's a11y options. ListKeyManager is exactly what you need. Here's a good introductory article: https://netbasal.com/accessibility-made-easy-with-angular-cdk-1caaf3d98de2 — David Bulté

Günter Zöchbauer Günter Zöchbauer · Accepted Answer · 2017-02-13T16:36:01

<li *ngFor="let hero of heroes;let index=index" 
  [style.background-color]="index === selectedIndex ? 'yellow' : null"
  (click)="onSelect(hero)" 
  (keydown.ArrowLeft)="onLeft($event)" (keydown.ArrowRight)="onRight($event)"
  (keydown.ArrowUp)="onUp($event)" (keydown.ArrowDown)="onDown($event)"

See also https://github.com/angular/angular/blob/630d93150a58581a0d474ebf1befb5d09b6813c5/modules/angular2/src/platform/browser/browser_adapter.dart

how to add event for key left and right in angular2?

1 Answers