Home Angular Angular ng Material Autocomplete Validation Plugin Library

Angular ng Material Autocomplete Validation Plugin Library

Angular webcodeflow · September 1, 2022 · 0 Comment

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