How to customize Active result class in static list?

[radiance8888]

In static list

import {Component} from '@angular/core';

@Component({
  selector: 'static-list',
  template: `
  <h3>Using STATIC list</h3>
  <section class="col-sm-12">
    <div class="search-results style-3">
      <input type="text" ngxTypeahead [value]="query3" [taList]="staticList" (taSelected)="handleStaticResultSelected($event)">
    </div>
  </section>
  `
})
export class StaticListComponent {
  public query3 = '';
  public staticList = [
    'guitar',
    'drums',
    'bass',
    'keyboards',
    'mic',
    'trumpet',
    'horns',
    'pedals'
  ];

  public handleStaticResultSelected (result) {
    this.query = result;
  }

}

When we use keyUp or keyDown in the typeahead results, focus is moving properly, but when we reach end of the results, when we click keyDown , focus should come back to first option right? It is not coming. After two keyDowns focus is coming to first option.

How can i correct it?

Is there any simple way or i should loop through the results and add class according to the index?

And i want the typeahead to display from bottom to top because my input box is at the end of the screen. So how can i change the activeResult from bottom. Initially i dont want to highlight any option and if the user clicks keyUp , i want to highlight options from bottom to Top.

Quick answer will be much helpful!!

Thanks in advance!

[radiance8888]

https://stackoverflow.com/questions/48782235/how-to-customize-ngtypeahead-active-classnavigating-through-keyup-and-down Fo rmore information!!

[orizens]

hi. please view the demo http://plnkr.co/edit/gV6kMSRlogjBKnh3JHU3?p=preview

[radiance8888]

I saw the demo. If i change the number of results, it is not behaving in the expected way. Since bottomLimit is 9

[orizens]

@radiance8888 you can simply style the active classname, followed by the relevant selector as in:

custom-template-list .list-group-item.active {
  background-color: red;
}

[orizens]

@radiance8888 regarding your comment about 9 results - that's a feature request. please post a new issue for it.
did the the suggested solution solved the issue (above comment with css snippet)?