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>

Select all 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
    }
]
}

Select all Open in new window