ngx-mat-autocomplete-control

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 😎 💻