Link to home
Create AccountLog in
Avatar of Cynthia Hill
Cynthia HillFlag 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.


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

ASKER CERTIFIED SOLUTION
Avatar of Cynthia Hill
Cynthia Hill
Flag of United States of America image

Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account