Typeahead In Angular Typescript

3 min readMay 2, 2023

This article is regarding how to use typeahead in angular13 (typescript). Given Below is the stackblitz link where you can find complete code.

Connect with me on LinkedIn.

Step 1: Go to app.module.ts

import NgxTypeaheadModule


import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; //add this
import { AppComponent } from './app.component';
import { NgxTypeaheadModule } from 'ngx-typeahead';
@NgModule({
  imports: [BrowserModule, FormsModule, ReactiveFormsModule, HttpClientModule, NgbModule],
  declarations: [AppComponent, NgxTypeaheadModule], //add here 
  bootstrap: [AppComponent]
})
export class AppModule {}

Step 2: Go to app.component.ts

Create a constant with key-value pair

const statesWithAbbreviations: { name: string; Abbreviation: string }[] = [
  { name: 'Alabama', Abbreviation: 'aa' },
  { name: 'Alaska', Abbreviation: 'ak' },
  { name: 'Arizona', Abbreviation: 'az' },
  { name: 'Arkansas', Abbreviation: 'ark' },
  { name: 'California', Abbreviation: 'cf' },
  { name: 'Colorado', Abbreviation: 'cl' },
  { name: 'Connecticut', Abbreviation: 'cot' },
  { name: 'Delaware', Abbreviation: 'del' },
  { name: 'Florida', Abbreviation: 'flr' },
];

Step 3 Write a function which will trigger on every input user provide.

Function explanation:

statesWithAbbreviations.filter() will filter data from list .

v.name.toLowerCase().indexOf(term.toLowerCase()) > -1 will search whether name contains the string user has provided or not ,in other words,

if user writes ‘ar’ in input box , this particular line will find the states name that includes ‘ar’ .

 search = (text$: Observable<string>) =>
    text$.pipe(
      debounceTime(200),
      map((term) =>
        term === ''
          ? []
          : statesWithAbbreviations
              .filter( 
                (v) =>
                  v.name.toLowerCase().indexOf(term.toLowerCase()) > -1 ||
                  v.Abbreviation.toLowerCase().indexOf(term.toLowerCase()) > -1
              )
              .slice(0, 10)
      )
    );

  formatter = (x: { name: string }) => x.name;
  onSelectOption(event){
    console.log(event)
  }

step 4. Introduce a variable to track what’s in the input box

  public model: any;

step 5. Go to app.component.html

Let’s have a look at some of the available parameters:

Typeahead has property (selectItem)=”onSelectOption($event)” which will trigger after user selects any option from dropdown
Typeahead has property [ngbTypeahead]=”search” ,which will trigger when user types something

<ng-template #rt let-r="result" let-t="term">
  <ngb-highlight [result]="r.name" [term]="t"></ngb-highlight>
</ng-template>

<label for="typeahead-template">Search for a state:</label>
<input
  id="typeahead-template"
  type="text"
  class="form-control"
  [(ngModel)]="model"
  #instance="ngbTypeahead"
  [ngbTypeahead]="search"
  [resultTemplate]="rt"
  [inputFormatter]="formatter"
  (selectItem)="onSelectOption($event)"
/>
<hr />
<pre>Model: {{ model | json }}</pre>