Angular Typeahead Component

This is an extract of the typeahead component from the open source Echoes Player.
Its built with JSONP support by default.
Additional remote sources are soon to come.

Angular Support

Supports Angular > 4
AOT compatible

Angular Consulting Services

I'm a Senior Javascript Engineer & A Front End Consultant at Orizens. My services include:

• consulting on how to approach code in projects and keep it maintainable.
• I provide project bootstrapping and development - while afterwards, I integrate it on site and guide the team on it.

Contact Me Here

Installation

npm install ngx-typeahead --save-dev

Supported API

Inputs

• taUrl<string> - (required) - the url of a remote server that supports jsonp calls.
• taParams<{ key: string, value: any}> - (optional, default: {}) - a {key,value} (json) object to include as params for the json call. Each api supports different structure.
• taQueryParam<query> - (optional, default: 'q') - a string member which is set with the query value for search.
• taCallbackParamValue<query> - (optional, default: 'JSONP_CALLBACK') - a string value for the callback query parameter.
• taItemTpl<TemplateRef> - (optional) - a template reference to be used for each result item.
• taApi<string> - (optional, default: 'jsonp') - the utility to make a request with - 'jsonp', 'http'.
• toApiMethod<string> - (optional, default: 'get') - the method to be used in either 'jsonp' or 'http'.
• taResponseTransform<Function> - (optional) - a transformation function which is applied to an http request's "results" array (expected).

Outputs

• taSelected<string> - (required) - emits an event once the item is selected.

DEMO

Demo with all parameters

Usage

First, import the NgxTypeaheadModule to your module:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgxTypeaheadModule } from 'ngx-typeahead';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppComponent } from './app';

@NgModule({
  imports:[ BrowserModule, NgxTypeaheadModule ],
  declarations: [ AppComponent, ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

platformBrowserDynamic().bootstrapModule(AppModule);

Then, in app component:

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

@Component({
  selector: 'app',
  template: `
    <div class="search-results">
      <input [value]="search"
        ngxTypeahead
        [taUrl]="url"
        [taParams]="params"
        (taSelected)="handleResultSelected($event)"
      >
    </div>
  `
})
export class AppComponent {
  public url = 'http://suggestqueries.google.com/complete/search';
  public params = {
    hl: 'en',
    ds: 'yt',
    xhr: 't',
    client: 'youtube',
    q: query,
  };
  public search = '';

  handleResultSelected (result) {
    this.search = result;
  }
}

Custom Template For Item

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

@Component({
  selector: 'app',
  template: `
    <div class="search-results">
      <input [value]="search"
        ngxTypeahead
        [taUrl]="url"
        [taParams]="params"
        [taItemTpl]="itemTpl"
        (taSelected)="handleResultSelected($event)"
      >
      <ng-template #itemTpl let-result>
        <strong>MY {{ result.result }}</strong>
      </ng-template>
    </div>
  `
})
export class AppComponent {
  public url = 'http://suggestqueries.google.com/complete/search';
  public params = {
    hl: 'en',
    ds: 'yt',
    xhr: 't',
    client: 'youtube',
    q: query,
  };
  public search = '';

  handleResultSelected (result) {
    this.search = result;
  }
}

Showcase Examples

• Echoes Player - Developed with Angular, angular-cli and ngrx (github repo for echoes player)