Ngx Autocomplete

An easy to use and flexible Autocomplete angular component.

Usage

Install npm module.

npm i ngx-autocomplete

Dependencies

This package relies on the following peer dependencies:

• @angular/cdk: ^12.0.0

Please make sure to install them in your project before using this package.

Now import the module in your angular module, e.g. app.module.ts:

import { AutocompleteModule } from 'ngx-autocomplete';

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

In your template file, add the ngx-autocomplete tag to use component, e.g.:

<ngx-autocomplete [searchMethod]="searchMethod" viewKey="email"></ngx-autocomplete>

Configuration

You can pass the following attributes values of supported types for further customizations:

Using custome templates

There are four directive for customising autocomplete appearance as follow.

<ngx-autocomplete [searchMethod]="searchMethod" viewKey="email">
  <!-- template shows in search result pop-up header -->
  <ng-template ngxSuggestionHeader>
      <h3>Employees</h3>
  </ng-template>

  <!-- template shows for every item in search result pop-up  -->
  <ng-template let-item ngxSuggestionContent>
      <span>Email Address {{item.emal}}</span>
  </ng-template>

  <!-- template shows empty search result pop-up  -->
    <ng-template ngxNoSuggestion>
      <span>search result is empty !!!</span>
  </ng-template>

  <!-- template shows for search result pop-up footer  -->
  <ng-template ngxSuggestionFooter>
      <span>Here is the footer</span>
  </ng-template>

</ngx-autocomplete>

License

@salmanian_hossein/ngx-autocomplete is free and licensed under the MIT License.