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](https://material.angular.io/cdk/a11y/overview) options. ListKeyManager is exactly what you need. Here's a good introductory article: [https://netbasal.com/accessibility-made-easy-with-angular-cdk-1caaf3d98de2](https://netbasal.com/accessibility-made-easy-with-angular-cdk-1caaf3d98de2) — David Bulté, Jun 04 '19 at 18:29

Günter Zöchbauer · Accepted Answer · 2017-02-13T16:59:03.050

13

<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

edited Feb 13 '17 at 16:59

answered Feb 13 '17 at 16:36

Günter Zöchbauer

623,577
216
2,003
1,567

Thank you. onLeft($event) how can I iterate to the next item in the list and change its background color to gray so that its highlighted as selected. – test Feb 13 '17 at 16:48
I updated my answer. You now only need to maintain the field `selectedIndex` in your component. If it's value is `1` the 2nd item will be highlighted in yellow. – Günter Zöchbauer Feb 13 '17 at 16:59
Not sure what you mean. I assumed you write event handlers in your components class that handle that event - the same as with `onSelect(...)` – Günter Zöchbauer Feb 13 '17 at 17:14
I didn't look close enough into your question. You are using a `hero` instance to highlight the selected, I'd rather use an index, and then if you want the selected hero instance just use `this.heros[this.selectedIndex]` to get the instance. – Günter Zöchbauer Feb 13 '17 at 17:16
Can you please let me know what has to be written in the component class method onLeft(). – test Feb 13 '17 at 17:22
What exactly should happen in your application when you press arrowleft? The same as on up? – Günter Zöchbauer Feb 13 '17 at 17:27
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/135616/discussion-between-test-and-gunter-zochbauer). – test Feb 13 '17 at 17:29
You might need to set `tabindex="0"` for the element to be able to receive the focus and keyboard events https://plnkr.co/edit/uk3j2wzonaOBt3AePhzL?p=preview – Günter Zöchbauer Feb 13 '17 at 19:16
Thank you. How do we recognise tab press in keyboard? – test Feb 14 '17 at 18:53
I haven't found proper docs, but the names listed in the in my answer above should most work (I assume space is `Space` instead of ` `). For tab use `(keydown.Tab)="onTab($event)"` – Günter Zöchbauer Feb 14 '17 at 19:00
I am able to traverse the list now, but, whenever I click right or left arrow, although the highlighting of a text moves to next column in the table, but the first element is not getting focsed, due to which, if I have to traverse the list again in second column by arrow down and arrow up, I am not able to do. How to make any item in the list focused so that it will be taken as reference for any key press. – test Feb 15 '17 at 14:15
Perhaps something like http://stackoverflow.com/questions/40886012/how-to-navigate-focus-to-the-next-item-in-angular2/40886144#40886144 – Günter Zöchbauer Feb 15 '17 at 14:17

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

1 Answers1