ngx-mat-autocomplete-control v3.0.0

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

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: '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.

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: