Building a typeahead style filter (similar to AngularJS) with Angular 2

Hello - I am very new to Angular 2 and am trying to figure out some things about input boxes/filters, etc.

I'm not seeing a lot of good examples online regarding how to build a custom search filter/dropdown in Angular 2...similar to a typeahead style filter in AngularJS.

....Where when a user starts entering text into an input box...a drop-down appears and shows all values in an array/table that match the text that has been entered.

I did find an example on GitHub...but it is marked as depreciated.

With me being so new to Angular in general...I am not sure I am searching for the correct terms either(?).

How would I modify the input box in the code below to include that functionality? So instead of the table itself starting to limit things as text is entered into the filter...the search box would dropdown so values that match what is being typed would be displayed...and the user can select the value from the drop-down list if they want...to have it then populate the table? Any assistance you can provide is greatly appreciated.


app.component.html

<div style="text-align:center">
  <h1>
    Welcome to {{title}}!
  </h1>
</div>
<div>

  <div>
<input placeholder="Enter Search Value" [(ngModel)]="searchText" />

   </div>
<hr>
  <table class="table">
  <ng-container *ngFor="let user of users | search:searchText">
      <tr>
        <th>First Name</th><td>{{user.firstName}}</td>
        <th>Last Name</th><td>{{user.lastName}}</td>
      </tr>
      <tr>
        <th>Job</th><td>{{user.job}}</td>
        <th>ID</th><td>{{user.id}}</td>
      </tr>
    </ng-container>
</table>
</div>

Open in new window



app.component.ts

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


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'CH Table play';

  users = [
    {
        "firstName": "Clark",
        "lastName": "Kent",
        "job": "Reporter",
        "id": 20
    },
    {
        "firstName": "Bruce",
        "lastName": "Wayne",
        "job": "Business Owner",
        "id": 30
    },
    {
        "firstName": "Peter",
        "lastName": "Parker",
        "job": "Photographer",
        "id": 40
    },
    {
        "firstName": "Tony",
        "lastName": "Stark",
        "job": "Business Owner",
        "id": 25
    }
]
}

Open in new window

Cynthia HillLead ConsultantAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Cynthia HillLead ConsultantAuthor Commented:
Hummm...tried a few additional search terms and found the github sample at the link below.

https://github.com/oferh/ng2-completer

I will play with that code later tonight to see if I can get it to work for me.

Wish me luck :)
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.