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

Showing elements from an array after adding new items with Ionic and Angular 2 on click

md-select doesn't reflect changes in the model when using key-value parameters

Exploring Dependency Injection in Angular2: A Comparison of TypeScript Syntax and @Inject Approach

Error message: "ReferenceError occurred while trying to access the Data Service in

Issues with implementing Dark mode in TailwindCSS with Nuxt.js

Angular positions the <style> element following the custom stylesheet <link>

We are in the process of migrating Angular from version 7 to 16, however, we are facing an issue where one of the libraries is still stuck on version 5, causing a Module not found error related to 'rxjs-com

Customizing themes in Angular 4

Chrome fails the karma tests while phantomjs passes them

Enhance your Angular Material Table with split headers and sticky header capabilities

How to convert an attribute of an object within a list to a string separated by commas in TypeScript and Angular

Generate a type error if the string does not correspond to the key of the object

The width of Kendo Angular 2 grids pager and top header does not increase when scrolling

Which objects can be looped through in Aurelia templating?

Ways to eliminate the dynamically included angular files from the .net core web api project

Next.js API routes encountering 404 error

Display notification if the request exceeds the expected duration

Tips for verifying the auto complete feature within an angular stepper component

Automatically injecting dependencies in Aurelia using Typescript

Using Typescript, instances of a class can access its members from within methods without needing