import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from "@angular/forms";
import { AppComponent } from './app.component';
import { NgxCompleterModule } from "angular-completer";

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

import { Component } from '@angular/core';
import { CompleterService, DataService } from 'angular-completer';

@Component({
  selector: 'my-component',
  template: `<h1>Search color</h1>
            <ngx-completer [(ngModel)]="searchStr" [datasource]="dataService" [minSearchLength]="0"></ngx-completer>
            <h1>Search captain</h1>
            <ngx-completer [(ngModel)]="captain" [datasource]="captains" [minSearchLength]="0"></ngx-completer>`
})
export class MyComponent {

  protected searchStr: string;
  protected captain: string;
  protected dataService: DataService;
  protected searchData = [
    { color: 'red', value: '#f00' },
    { color: 'green', value: '#0f0' },
    { color: 'blue', value: '#00f' },
    { color: 'cyan', value: '#0ff' },
    { color: 'magenta', value: '#f0f' },
    { color: 'yellow', value: '#ff0' },
    { color: 'black', value: '#000' }
  ];
  protected captains = ['James T. Kirk', 'Benjamin Sisko', 'Jean-Luc Picard', 'Spock', 'Jonathan Archer', 'Hikaru Sulu', 'Christopher Pike', 'Rachel Garrett' ];

  constructor(private completerService: CompleterService) {
    this.dataService = completerService.local(this.searchData, 'color', 'color');
  }
}