@ngxsmart/autocomplete v13.0.1

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)

Properties

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