Implementing ng2-completer

Question

I am currently using ng2-completer (https://github.com/oferh/ng2-completer) for angular 2 and struggling to add in the suggestions to have the full response instead of just having one value.

Also, when the suggestion is selected, how is the method assigned to handle this?

The code I've got so far is:

import { Component } from '@angular/core';
import { AutoComplete } from './autocomplete';
import { CompleterService, CompleterData, RemoteData } from 'ng2-completer';
import { SearchComponent } from './search.component';
import { QueryService } from './query.service';


@Component({
  selector: 'app-home',
  template: `<ng2-completer [(ngModel)]="searchStr" [dataService]="dataService" [minSearchLength]="0" [inputClass]="['form-control input-list']" [autofocus]="['true']" [selected]="selected()"></ng2-completer>`,
  //directives: [ AutoComplete ]
})

export class HomeComponent {

  public searchStr: string;
  private dataService: CompleterData;

  constructor(private completerService: CompleterService, private queryService: QueryService) {
    //this.dataService = completerService.local(this.searchData, 'color', 'color');
    this.dataService = completerService.remote('http://localhost:61227/machine/?query=','ComputerHostname, AssetID', 'ComputerHostname').descriptionField('ComputerType');

//this.dataService = this.queryService.search(searchStr).then(items => this.items = items);  

}

selected () {

console.log("test");

}
 }

However it shows the following error:

Can't bind to 'selected' since it isn't a known property of 'ng2-completer'.

Answer 1

selected is an event and not a property and therefor the syntax for it (as described in Angular template syntax) should be (selected)="selected($event)"

autofocus expects a boolean value (see in ng2-completer doc) not an array so you should use [autofocus]="true"