navigate a list using keyup.arrowDown and keyup.arrowUp

  angular, html, javascript, typescript

I am trying to navigate a list in my angular component using keyup.arrowDown and keyup.arrowUp. I am not sure how to used the index to be able to do that , here is what I got to do so far.

public nextActiveMatch(): void {
        this.activeIndex = this.activeIndex < this.list.length - 1 ? ++this.activeIndex : this.activeIndex;
    }
    public prevActiveMatch(): void {
        this.activeIndex = this.activeIndex > 0 ? --this.activeIndex : 0;
    }
  <div class="selection-list-standard" *ngIf="showList">
    <div class="selection-list">
      <div
        class="select-row"
        *ngFor="let item of list | appFilter: searchText; let i = index"
        (click)="itemClicked(item)"
      >
        <span
          [ngClass]="{ displayAnEllipsis: shouldDisplayAnEllipsis() }"
          (keyup.arrowUp)="prevActiveMatch()"
          (keyup.arrowDown)="nextActiveMatch()"
          )
        >
          {{ item }}</span
        >
      </div>
    </div>
  </div>

I am new to this any help will be really appreciated. thanks

Source: Ask Javascript Questions

LEAVE A COMMENT