angular-ngx-autocomplete v2.1.2

Angular Autocomplete

angular-ngx-autocomplete is a library of Angular for implementing lookups into your angular application.

Table of contents

• Features
• Getting started
• Usage
• API
• Styles

Features

• Flexible autocomplete with client/server filtering.
• Variable properties and event bindings.
• Selection history.
• Custom item and 'not found' templates.
• Infinite scroll.
• Compatible with Angular forms API (Both Reactive and Template-driven forms).
• Keyboard navigation.
• Accessibility.

Getting started

Step 1: Install angular-ngx-autocomplete:

NPM

npm i angular-ngx-autocomplete

Step 2: Import the AutoCompleteModule:

import {AutoCompleteModule} from 'angular-ngx-autocomplete';

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

Usage sample

<div class="ngx-autocomplete">
<ngx-autocomplete 
  [data]="data"
  [searchOnProperty]="keyword"
  (selected)='selectEvent($event)'
  (inputChanged)='onChangeSearch($event)'
  (inputFocused)='onFocused($event)'
  [itemTemplate]="itemTemplate"
  [notFoundTemplate]="notFoundTemplate">                                 
</ngx-autocomplete>

<ng-template #itemTemplate let-item>
<a [innerHTML]="item.name"></a>
</ng-template>

<ng-template #notFoundTemplate let-notFound>
<div [innerHTML]="notFound"></div>
</ng-template>
</div>

class TestComponent {
  keyword = 'name';
  data = [
     {
       id: 1,
       name: 'Usa'
     },
     {
       id: 2,
       name: 'England'
     }
  ];


  selectEvent(item) {
    // do something with selected item
  }

  onChangeSearch(val: string) {
    // fetch remote data from here
    // And reassign the 'data' which is binded to 'data' property.
  }
  
  onFocused(e){
    // do something when input is focused
  }
}

API

Inputs

Outputs

Methods (controls)

To access the control methods of the component you should use @ViewChild decorator. See the example below:

<ngx-autocomplete #auto></ngx-autocomplete>

class TestComponent {
  @ViewChild('auto') auto;

  openPanel(e): void {
    e.stopPropagation();
    this.auto.open();
  }
  
  closePanel(e): void {
    e.stopPropagation();
    this.auto.close();
    }
    
  focus(e): void {
    e.stopPropagation();
    this.auto.focus();
  }  
}

Styles

If you are not happy with default styles you can easily override them:

<div class="ngx-autocomplete">
<ngx-autocomplete></ngx-autocomplete>
</div>

.ngx-autocomplete {
    width: 400px;
}

Author

• Sam Arora

License

MIT