@mentax/lazy-autocomplete-input v0.0.4

Lazy Autocomplete Input

Package provides an Angular Material Autocomplete control with lazy loading and infinite scroll.

Usage

In your module add

import {LazyAutocompleteInputModule} from '@mentax/lazy-autocomplete-input';

@NgModule({
  imports: [LazyAutocompleteInputModule]
})
export class MyModule()

Then in your component provide LazyAutocomplete service

import {LazyAutocompleteInputService, LazyAutocompleteInputModel} from 'lazy-autocomplete-input';
@Component({
  providers: [LazyAutocompleteInputService]
})

Next step is to create a dataProvider function

private dataProvider(offset: number, inputValue: string): Observable<LazyAutocompleteInputModel[]> {
  const sampleItem: LazyAutocompleteInputModel = {
    id: 0,
    name: 'test'
  };
  return of([sampleItem])
}

NOTE

LazyAutocompleteInputModel interface

{
 id: number;
 name: string;
}

Next step is to set provider function in LazyAutocomplete LazyAutocompleteInputService

constructor(private lazyAutocompleteService: LazyAutocompleteInputService) {
   this.lazyAutocompleteService.setProvider(this.dataProvider);
}

Finally inside component html file insert

<mtx-lazy-autocomplete-input
  matAppearance="outline"
  matLabel="Hello"
  minLetters=3
  startPage=0
  (selectedItem)="selectedItem($event)">
</mtx-lazy-autocomplete-input>

Available Attributes

Input

• matLabel: string
• matAppearance: MatFormFieldAppearance
• minLetters: number
• startPage: number
• maxPage: number

Output

• selectedItem: LazyAutocompleteInputModel;

Available Service variables and methods

• startPage: number
• maxPage: number
• setProvider(providerFunction: IAutocompleteDataProvider)

NOTE

IAutocompleteDataProvider

(offset: number, inputValue: string) => Observable<LazyAutocompleteInputModel[]>