Avatar of Cynthia Hill
Cynthia Hill
Flag for United States of America asked on

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.


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

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

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

Open in new window


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

  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

HTML* Angular4

Avatar of undefined
Last Comment
Cynthia Hill

8/22/2022 - Mon
Cynthia Hill

View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.
I started with Experts Exchange in 2004 and it's been a mainstay of my professional computing life since. It helped me launch a career as a programmer / Oracle data analyst
William Peck