Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

301
Views
NgbTypeahead selectItem get clicked item ngBootstrap angular2

In this answer, it was explained to me to use selectItem to get the select event.

But at this point, the model I bound to the text box is still the original text the user typed, not the select item.

I use

(selectItem)="search(model)"

to get the event, and in TS

search(model) { 
this._service.search(model).subscribe(
  results => this.results = results,
  error => this.errorMessage = <any>error);

}

but as mentioned above, that calls my backend with the user-typed text, not the full text of the selected item of the typeahead.

My backend logs

2017/03/24 20:44:14 /api/typeahead/ok
2017/03/24 20:44:14 /api/search/ok

where the second should be /api/search/$actualSelectedItem.

about 4 years ago · Santiago Trujillo
1 answers
Answer question

0

You should be using $event to get the selected Items as below

<input type="text" class="form-control" (selectItem)="selectedItem($event)" [(ngModel)]="model" [ngbTypeahead]="search" [resultFormatter]="formatter" />
<hr>
<pre>Model: {{ model | json }}</pre>
clicked item {{clickedItem}}

Your method should be as

selectedItem(item){
    this.clickedItem=item.item;
    console.log(item);
  }

LIVE DEMO

about 4 years ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!