Press "Enter" to skip to content

Angular ng Material Autocomplete Validation Plugin Library

Angular AutoComplete is a simple, flexible, and accessible autocomplete component with client/server filtering support.

autocomplete angular example, angular autocomplete stackblitz, angular material autocomplete, angular material autocomplete validation, ng autocomplete

Features

  • Flexible autocomplete with client/server filtering.
  • Variable properties and correlations of events.
  • date of selection.
  • Custom Item and Templates ‘Not Found’.
  • Infinite gradient.
  • Compatible with Angular Forms API (both interactive forms and templates).
  • Navigation using the keyboard.
  • Accessibility.

Angular Material Component For Mat-Select With Autocomplete

How to make use of it:

Install

npm i angular-ng-autocomplete

Import the AutocompleteLibModule

import {AutocompleteLibModule} from 'angular-ng-autocomplete';

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

Usage

<div class="ng-autocomplete">
<ng-autocomplete 
  [data]="data"
  [searchKeyword]="keyword"
  placeholder="Select country"
  (selected)='selectEvent($event)'
  (inputChanged)='onChangeSearch($event)'
  (inputFocused)='onFocused($event)'
  [itemTemplate]="itemTemplate"
  [notFoundTemplate]="notFoundTemplate">                                 
</ng-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>

Angular Autocomplete Plugin/Github, angular material autocomplete server side


See Demo And Download

Official Website(gmerabishvili): Click Here

This superior jQuery/javascript plugin is developed by gmerabishvili. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *