[AngularJS] Re: [Angular2] navigation through arrow keys

Tue, 11 Oct 2016 01:25:12 -0700


it is a long time since I implemented that (angular2 beta2 or something), 
so maybe I am missing something in the snippets I am giving you right now:

In my html template I have a table with a binding to the keydown event and 
the tablerow with a css only highlighting the row, if the corresponding 
element is equal to selectedItem in the component:

<table (keydown)="scroll($event)"[...]>
<tr [class.selected]="isSelected(item)" [...]>

In the component I have a variable called selectedItem (so the entry which 
should be highlighted), a variable selectedIndex for remembering the 
highlighted row, a list of items with the itemList for the table and a 
scroll method, which looks like this:

items: Item[];
selectedItem: Item;
selectedIndex = 0;

scroll(event: KeyboardEvent) {
    //up 38 down 40
    if (event.keyCode === 40) {
        this.selectedItem = this.items[++this.selectedIndex];
    } else if (event.keyCode === 38) {
        this.selectedItem = this.items[--this.selectedIndex];
    } else return;

isSelected(item: Item) {
    return this.selectedItem ?
       this.selectedItem.id === item.id : false;

If you are using pipes, you don't use the selectedIndex directly on 
items[], but on the pipe result (which then was achieved with a workaround 
pipe, which saves the result of the previos pipes). Hope this helps :)

Am Montag, 10. Oktober 2016 22:24:52 UTC+2 schrieb vvvttt:
> I am new to angular 2. Can you please provide an example of how you 
> achieved the navigation?
> Thanks.

You received this message because you are subscribed to the Google Groups 
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

Reply via email to