ngx-mat-autocomplete-control

Install

You can install this package with npm.

npm install ngx-mat-autocomplete-control --save

USAGE

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

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

  imports: [
    NgxMatAutocompleteControlModule
  ],
  providers: [SampleService, SnackbarService, TodoService],
  bootstrap: [AppComponent]
})

2. Create a new component and use the below coding

HTML Coding

 <ngx-mat-autocomplete-control [control]="infoForm.controls['user']" [options]="userList" [refId]="'userId'" [showPlaceholder]="true"
        [refName]="'userName'" [label]="'users'" [disabled]="disabledValue" [required]="true"
         [appearance]="'outline" (propValueEvent)="eventFiredWhenTyping($event)"
            [value]="infoForm.controls['user'].value" 
                                            (selectionChange)="eventFiredWhenClickingOptions($event)">   
                                            </ngx-mat-autocomplete-control>
                                          

Typescript Coding

  userList = []
  infoForm: FormGroup;
  disabledValue = false;
 constructor(private formBuilder:FormBuilder){}
 ngOnInit() {
    this.userList = [{ userId: 10, userName: 'Subashini' }, { userId: 3, userName: 'Sriram' }]
    this.infoForm = this.formBuilder.group({
      user: ['', Validators.required],
    });
 }
 eventFiredWhenTyping(event){

    In event we get two properties
    1. event.propertyName
    2. event.value

 }
 eventFiredWhenClickingOptions(event){

    In event we get the selectd value 

 }

CSS

If you want to add Css for highlighting the entered text you may add the following line to css
  ::ng-deep .mat-option-text b {
    color: #3f51b5;
}

## 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                                    |
| disabled        | boolean (false)      | To disable the mat-field.                                                  |
| required        | boolean (false)      | To make your mat-field required                                            |
| appearance      | string ('')          | Appearance of your mat-field. Supported options: 'legacy' / 'standard' / 'fill' / 'outline'         |
|showPlaceholder  | boolean (true)       | Whether placeholder to be displayed or not  |

## Output Events

      1. propValueEvent - eventFiredWhenTyping (ie.happens when keyup)
      2. selectionChange - eventFiredWhenClickingOptions (ie. option changed)

ENJOY CODING :sunglasses: :computer: