[Angular2] <table> navigation through arrow keys

[HansMeise]

I have a normal <table> with <tr> filled by *ngFor with data from an array that is filtered and ordered by two pipes. How can I use the arrow keys to scroll through the table rows? It should highlight the current selected row and the object from the array should be available for further processing.

Thanks for your input :)

[Günter Zöchbauer]

You could add a template variable to the created rows and filter for these elements using `@ViewChildren('myVar') rows;` and then set focus on the previous/next item in the list on arrow up/down.

[HansMeise]

Thanks, didn't even know you could refer inside of the component to a template variable. So this hint will also help in many others situations :-)

[vvvttt]

I am new to angular 2. Can you please provide an example of how you achieved the navigation?

Thanks.

[HansMeise]

Hi,

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
    event.preventDefault();
    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 :)

[arthi verma]

On Wednesday, 27 January 2016 15:14:18 UTC+5:30, HansMeise wrote:

I have a normal <table> with <tr> filled by *ngFor with data from an array that is filtered and ordered by two pipes. How can I use the arrow keys to scroll through the table rows? It should highlight the current selected row and the object from the array should be available for further processing.

Thanks for your input :)

Hello Team,

I wanted to implement arrowup and down in list. below is my html tag, anyone help me to implement arrowup and down in angular6

<ul class="filter-select" >

<li *ngFor="let result of suggestions trackBy: trackByName let i = index"[class.active]="i == arrowkeyLocation" (click)="onQuerySuggestionSelect(result)" class="filter-select__item">

{{result.itemName}}

</li>

</ul> 

import { Component, EventEmitter, Output, Input, HostListener, OnChanges } from '@angular/core';

import { Router, ActivatedRoute } from '@angular/router';

import { AppConfig } from '../../app.config';

import { SuggestBoxService } from '../suggestbox/suggestbox.service';

import { SuggestionService } from '../suggestbox/suggestionsearch.service';

import { QuerySuggestionItem } from '../suggestionmodels/suggestionItems';

@Component({

selector: 'app-querysuggestion',

templateUrl: './querysuggestion.component.html',

styleUrls: ['./querysuggestion.component.css'],

providers: [SuggestBoxService, SuggestionService]

})

export class QuerysuggestionComponent {

protected configSettings = AppConfig.settings;

@Input() suggestions: QuerySuggestionItem[];

@Output() queryRequestparam = new EventEmitter<any>();

q = '';

constructor(

public router: Router,

private activeRoute: ActivatedRoute,

private suggestBoxService: SuggestBoxService

) {

}

onQuerySubmit() {

this.suggestBoxService.generateSuggestionQueryParams('q', this.q);

}

trackByName(index: number, item: QuerySuggestionItem) {

return item.itemName;

}

@HostListener('document : click')

clickOutside() {

this.dropdownDestroy();

}

dropdownDestroy() {

this.suggestions = [];

}

onQuerySuggestionSelect(item) {

this.dropdownDestroy()

this.queryRequestparam.emit(item);

}

}