Auto Complete

Reusable Auto Complete that extends Mat Auto Complete component

Technologies

1. Angular 12+
2. Angular Material 12+

Demo

https://stackblitz.com/edit/ngxsmart-autocomplete-demo

Usage

The library has 3 autocomplete components

1. autocomplete
2. object-autocomplete
3. string-autocomplete

To use the Auto Complete components, add the following code to the HTML page

app.component.html

<!-- Generic Auto Complete -->

<form [formGroup] = "inputFormGroup" >
<autocomplete [data] = "cities" [inputFormGroup] = "inputFormGroup" [required] = "true"
bindLabel = "location"
bindValue = "id"
label = "City"
placeHolder = "Select City" > </autocomplete>
  < /form>

app.component.ts

Then define form group instances and object array (cities) and names (for string array)

// Define objects  
cities = [{id: 1001, location: 'New York'}, {id: 1002, location: 'Boston'}, {id: 1001, location: 'Washington DC'}];

// Define Form Groups 
inputFormGroup = this.fb.group({
  autocomplete: ['']
})

For object-autocomplete and string-autocomplete usage see the examples

API

List of selectors that can be used to select the component(s)

AutoComplete Selector
autocomplete, lib-autocomplete

Object AutoComplete Selector
object-autocomplete, lib-object-autocomplete

String AutoComplete Selector
string-autocomplete, lib-string-autocomplete

Properties

Property	Description	Type	Default Value
inputFormGroup	Input Form Group	FormGroup
label	Label of the AutoComplete	string
placeHolder	PlaceHolder of the AutoComplete	string
appearance	Appearance of the AutoComplete, defaults to fill	string	fill
classes	List of CSS classes that need to applied to autocomplete	string
bindLabel	Applies only to Generic AutoComplete and Object AutoComplete. Attribute of the Object whose value would be shown when searching for data	string	id
bindValue	Applies only to Generic AutoComplete and Object AutoComplete. Attribute of the Object whose value would be used for search. Defaults to ID	string	id
required	Is AutoComplete	boolean	false
data	List of Objects or String values that need to be bind and searched for	any[] or string[]	false

Publish the library to NPM(applies to maintainers)

1. Build the library

ng build --configuration production --project=@ngxsmart/autocomplete

2. Publish the library to NPM

npm publish dist/autocomplete --access public