ngx-mat-autocomplete-control

Install

You can install this package with npm. This package is always up-to-date with current angular version (now supports upto Angular 19) and it is based on angular material design and support to reactive forms.

npm install ngx-mat-autocomplete-control --force

USAGE

1.After installing the package, you should import the NgxMatAutocompleteControl module in the required module / (eg. app.module.ts).

``typescript
import { NgxMatAutocompleteControlModule } from 'ngx-mat-autocomplete-control';
@NgModule({
declarations: [],

imports: [
NgxMatAutocompleteControlModule
],
providers: [],
bootstrap: [AppComponent]
})
`
2. Create a new component and use the below coding

HTML Coding
`html
[control]="'userId' | autocompleteControl: userForm:'':-1"
[options]="userList"
[required]="true"
[value]="'userId'"
[refId]="'userId'"
[refName]="'userName'"
[label]="'Users'"
[appearance]="'outline"
[highlightColor]="red"
(selectionChange)="captureSelectionChange($event)"
(propValueEvent)="captureKeyup($event)" >

`
Typescript Coding
`typescript
userList = [
{userId: 1, userName: 'Sriram M P' },
{userId: 2, userName: 'Balamurugan' },
{userId: 3, userName: 'Subashini' },
{userId: 4, userName:'Narmatha'}
];

userForm: FormGroup;

constructor(private formBuilder:FormBuilder){}

ngOnInit() {

this.userForm = this.formBuilder.group({
userId: ['', Validators.required],
});
}
captureKeyup(event){

Paramater event has two properties

1. event.propertyName
2. event.value

}
captureSelectionChange(event){

In event we get the selected value

}
``

Configuration Options

The following optional configuration items can be used.

| Options | Data type (Default) | Description |
| ----------- | -------------------- | ------------- |
| control | abstractControl | FormControl to which value has to be binded. |
| options | array of objects [] | Options object to be listed |
| refId | number | Value that has to be set on formControl |
| refName | string | Search term. Options are filtered based on refName |
| label | string | A placeholder value for your mat-select |
| required | boolean (false) | To make your mat-field required |
| highlightColor | string (black) | Color that highlights the search term in the list |
| appearance | string ('') | Appearance of your mat-field. Supported options: 'legacy' / 'standard' / 'fill' / 'outline' |

Output Events

1. propValueEvent - captureKeyup (ie.happens when keyup)
2. selectionChange - captureSelectionChange (ie. option changed)

Contribution

If you found this useful kindly donate thorugh the below UPI Id

sribala333@ybl

ENJOY CODING :sunglasses: :computer: