How to display the highlighted typeahead value in the inputbox in ngxTypeahead?

Question

This is official ngxTypeahead plunker

http://embed.plnkr.co/gV6kMSRlogjBKnh3JHU3/

Here in this, when we press keyUp or keyDown ,the i need to display the highlighted(which is blue in color) typeahead option's innerHTML in the input box similar to firefox search box typeahead. How can i do that?

So i have this issue in implementing the above

Using jquery i can get my target element like this

var target= $(this).siblings().find("li.active");

Now i'm getting like this

This is my onKeyUp function

onKeyUp($event.key){
     if( $event.keyCode== '38'|| $event.keyCode == '40'){
     var target= $event.srcElement.nextElementSibling.children[4].children[0].innerText;
     }
}

So if i keep debugger inside Onkey($event.key) function

and type this $event.srcElement.nextElementSibling.children

0:div.typeahead-backdrop

1:button.list-group-item

2:button.list-group-item

3:button.list-group-item

4:button.list-group-item.active

5:button.list-group-item

I get like above. So i need to get the active button innerText. Inside the button it has a span and i need it's innerHTML. Is there any specific simple way to access above target using angular2?

Answer 1

EDIT :

Add a reference on the input #ngxTypeahead and create a viewchild in app.ts code (import from angular core)

  @ViewChild("ngxTypeahead") ngxTypeahead: any;
   // then simply access the values using this.ngxTypeahead;

See my screenshot with console log in the select function :) https://ibb.co/ehnfgS