CODEWITHSUNDEEP
javascripthtmlangularhtml-lists
Edon
Edon

Reputation: 1216

html list item selection with arrow keys in Angular 2

I am trying to select li's via arrow keys, but am running into issues.

I tried following the answer here, but my li's never become selected.

For the following code, I'm just trying to get (keydown) to work.

Here is my:

landingpage.component.html

<div class="searchArea">
  <input type="text" autoComplete="off" (keydown)="keyDown($event)" placeholder={{backgroundPlaceholder.info.placeholderText}} [(ngModel)]="keystroke"
    (ngModelChange)="getKey($event)">
  <div class="results-list">
    <li *ngFor="let list of shows; let i = index" [class.active]="i == {{arrowkeyLocation}}">
      <span class="result">{{list.show}}</span>
    </li>
  </div>
</div>

landingpage.component.ts

arrowkeyLocation = 0;

 keyDown(event) {
   return this.arrowkeyLocation++; 
 }

As-is, nothing is selected when I press the downkey. I'm pretty sure the problem lied within my html [class.active], but I'm not sure how to resolve it.

How can I select li elements via the arrow keys?

Upvotes: 2

Views: 10788

Answers (3)

imran
imran

Reputation: 1

Thanks all. I have implemented this to take care of scrolling it.

arrowkeyLocation = 0;
  keyDown(event: any) {
  
    if(event.keyCode=== 13){
     let valueEnterKey =this.serviceDropdown[this.arrowkeyLocation];

     console.log("valueEnterKey",valueEnterKey);
     this.dropDefaultVal1=valueEnterKey;
     this.boolval1 = !this.boolval1;
    }
   
    var listOfDropDownItemsService = document.getElementsByTagName('ul')[6];

    if (event.keyCode === 40 && this.arrowkeyLocation < this.serviceDropdown.length - 1) {
      // Arrow Down
      this.arrowkeyLocation++;
      listOfDropDownItemsService.scrollTop = listOfDropDownItemsService.scrollTop + 15;
    }
     else if (event.keyCode === 38 && this.arrowkeyLocation > 0) {
      // Arrow Up
      this.arrowkeyLocation--;
      listOfDropDownItemsService.scrollTop = listOfDropDownItemsService.scrollTop - 15;
    }

   
  }

Upvotes: 0

Dhyey
Dhyey

Reputation: 4335

I agree with what @samAlvin has to say in his answer and I also recommend using an if condition which checks if we haven't exceeded the li list otherwise the selection would just disappear if user presses the down arrow key and same in case of up arrow key:

if (event.keyCode === 40 && this.selectedLiValue < this.shows.length - 1) {
    // Arrow Down
    this.selectedLiValue++;
} else if (event.keyCode === 38 && this.selectedLiValue > 0) {
    // Arrow Up
    this.selectedLiValue--;
}

Upvotes: 4

samAlvin
samAlvin

Reputation: 1678

If you want to only select the list using arrow key, I think you need to change your landingpage.component.ts to something like this:

arrowkeyLocation = 0;

keyDown(event: KeyboardEvent) {
    switch (event.keyCode) {
        case 38: // this is the ascii of arrow up
                 this.arrowkeyLocation--;
                 break;
        case 40: // this is the ascii of arrow down
                 this.arrowkeyLocation++;
                 break;
    }
}

And in your html you need to change [class.active]="i == {{arrowkeyLocation}}" to [class.active]="i == arrowkeyLocation".. No need to use {{ and }} there.

Upvotes: 7

Related Questions