ng-remote-autocomplete v1.1.9

ng-remote-autocomplete

The package is a remote autocomplete.

Installation

The package requires Angular 5+ to run.

$ npm i ng-remote-autocomplete

Usage

In order to use the remote autocomplete you need to:

• add RemoteAutocompleteModule And FormsModule to the Module you want to use in.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from "@angular/forms";
import { AppComponent } from './app.component';
import { RemoteAutocompleteModule } from "ng-remote-autocomplete";

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

• implement get method of AutocompleteSourceService or ParameterizedAutocompleteSourceService which returns array of AutocompleteItem

import { Observable } from "rxjs/Rx";
import { } from "rxjs/Rx";

import { AutocompleteItem } from "ng-remote-autocomplete";
import { AutocompleteSourceService } from "ng-remote-autocomplete";

export class ItemService implements AutocompleteSourceService {
  get(searchParam: string): Observable<AutocompleteItem[]> {
    let fakeResult:AutocompleteItem[]  = [
        {value: "A", description: " - One letter", originalObject: {}},
     ];

    return Observable.of(fakeResult).delay(150);
  }
}

• provide the sevice to the remote-autocomplete component as a parameter

import { Component } from  '@angular/core';
import { ItemService } from  './services/itm-service';

@Component({
selector:  'app-root',
template:  `<remote-autocomplete [service]="itemService"></remote-autocomplete>`,
providers: [ ItemService ]
})
export  class  AppComponent {
constructor(public  itemService:  ItemService) {
}

Exceptions

If you don't provide the service then the module will throw and Exception that AutocompleteSourceService or ParameterizedAutocompleteSourceService must be provided. If you provide ParameterizedAutocompleteSourceService service and don't provide searchParameters then autocmplete component will throw Exception.

Api

Output events

Available classes

Available methods

The local reference of the remote-autocomplete component is a type of Autocomplete and provides the following methods:

import { Component } from  '@angular/core';
import { ItemService } from  './services/itm-service';

@Component({
selector:  'app-root',
template:  `<remote-autocomplete [service]="itemService" #autocomplete></remote-autocomplete>`,
providers: [ ItemService ]
})
export  class  AppComponent {

@ViewChild('autocomplete') autocompleteField:  Autocomplete;
constructor(public  itemService:  ItemService) {
}

focus(){
this.autocompleteField.focus();
}
}

Template

The basic template will be used as default:

 <ng-template #defaultOptionTemplate>
    <span class="autocomplete-option-value">{{item.value}}</span>
    <span *ngIf="item.description" class="autocomplete-option-description">{{item.description}}</span>
</ng-template>

If you want to use some custom template you need to put this custom template into the remote-autocomplete component with remote-autocomplete-option-tmpl directive where item is a type of AutocompleteItem.

<remote-autocomplete [service]="itemService">
	<div *remote-autocomplete-option-tmpl="let item">
		<span>{{item.value}}</span>
	</div>
</remote-autocomplete>

ngModel

You can bind the value to the remote-autocomplete component as in example. If the value is defined on the moment of the initialization of your component then the bind value will be set to the input field.

import { Component } from  '@angular/core';
import { ItemService } from  './services/itm-service';

@Component({
selector:  'app-root',
template:  `<remote-autocomplete [service]="itemService" [(ngModel)]="value"></remote-autocomplete>`,
providers: [ ItemService ]
})
export  class  AppComponent {
private value: string = 'test';

constructor(public  itemService:  ItemService) {
}

License

MIT