Install

You can install this package with npm. This package is always up-to-date with current angular version and it is based on angular material design

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).

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

 <ngx-mat-autocomplete-control
            [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)" >   
  </ngx-mat-autocomplete-control>

Typescript Coding

  userList = [
    {userId: 1, userName: 'Sriram M P' },
    {userId: 2, userName: 'Bala' },
    {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: