Automatically select the unique item from the list with Angular Material AutoComplete

Question

Automatically select the unique item from the list with Angular Material AutoComplete

Our list of document numbers is completely unique, with no duplicates included.

I am attempting to implement a feature in Angular Material that automatically selects the unique entry when it is copied and pasted.

https://i.stack.imgur.com/70thi.png

Currently, our method involves using OptionSelected for mouse selection, OptionActivated for keyboard selection, and OnBlur for triggering selection when clicking out of the textbox.

I'm wondering if there might be a cleaner solution in Angular Material, or if this approach with three lines of code is the most efficient.

<mat-form-field>
  <mat-label>Document Number</mat-label>
  <input type="text"
        matInput
        formControlName="documentNumber"
        (blur)="documentNumberChangeEvent($event)"
        [matAutocomplete]="auto"
  >
  <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete" 
    (optionActivated) = "documentNumberChangeEvent($event)"
    (optionSelected)="documentNumberChangeEvent($event)"
  >

angular typescript autocomplete angular-material angular8

Answer 1

Answer №1

One possible improvement could be to utilize the FormControl valueChanges property:

...
@Component(...)
export class AutocompleteSimpleExample {
  readonly documentNumber = new FormControl();
  readonly options: string[] = ['One', 'Two', 'Three'];

  constructor() {
    this.documentNumber.valueChanges.subscribe(value => {
      console.log(value);
    });
  }
}

Check it out on StackBlitz

Answer 2

One possible improvement could be to utilize the FormControl valueChanges property:

...
@Component(...)
export class AutocompleteSimpleExample {
  readonly documentNumber = new FormControl();
  readonly options: string[] = ['One', 'Two', 'Three'];

  constructor() {
    this.documentNumber.valueChanges.subscribe(value => {
      console.log(value);
    });
  }
}

Check it out on StackBlitz

Automatically select the unique item from the list with Angular Material AutoComplete

Answer №1

Similar questions

There are occasional instances of phone skipping functions within a loop in Ionic 4

Utilize only the necessary components from firebase-admin in Cloud Functions with Typescript

Ensuring that environment variables are properly set is essential for effective error handling

The unexpected behavior of rxjs withLatestFrom

Showing Firebase messages in a NativeScript ListView in an asynchronous manner

Looping through an array of nested objects using Vue

The Typescript decorator is unable to access the property type within its own scope

Modifying the value upon saving in Adonis JS model

Is Angular mat-icon undergoing a "transformation"?

In Angular 2, property binding will not function properly when attempting to bind to an object

Using @ViewChildren in Angular 2 for creating recursive components

Securing Your Next.js Web App with Session Authentication

passing data through URL in Angular 7

Ways to access the value of the parent observable?

The Art of Typing in TypeScript Classes

Utilizing nested observables for advanced data handling

Troubleshooting the issue with the AWS CodeBuild SAM esbuild integration not functioning

Encountering Error TS2411 when upgrading from Typescript version 1.0.0 to 1.1.0-1

Strategies for eliminating nested subscriptions in the search for names

replace the tsconfig.json file with the one provided in the package