80233

Angular 6: how to access ALL option values in mat-autocomplete dropdown?

Question:

Given the example in the Angular docs <a href="https://material.angular.io/components/autocomplete/overview#setting-separate-control-and-display-values" rel="nofollow">you can see here</a> and also repeated below, how can I access the rest of the object data in options?

If for example, the object was more than just a simple list of names in key:value format, but something more complex such as data coming in from an API:

dataObject = { name: 'someName', nameID: 'someId', foo: 'bar' }

The example in the docs is too simple and isn't telling me how to get the name to display in the input field, and to also get the corresponding nameId in the ts file needed to return a PUT request via the API.

<form class="example-form"> <mat-form-field class="example-full-width"> <input type="text" placeholder="Assignee" aria-label="Assignee" matInput [formControl]="myControl" [matAutocomplete]="auto"> <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn"> <mat-option *ngFor="let option of filteredOptions | async" [value]="option"> {{option.name}} </mat-option> </mat-autocomplete> </mat-form-field> </form>

component.ts:

export class AutocompleteDisplayExample implements OnInit { myControl = new FormControl(); options: User[] = [ {name: 'Mary'}, {name: 'Shelley'}, {name: 'Igor'} ]; filteredOptions: Observable<User[]>; ngOnInit() { this.filteredOptions = this.myControl.valueChanges .pipe( startWith<string | User>(''), map(value => typeof value === 'string' ? value : value.name), map(name => name ? this._filter(name) : this.options.slice()) ); } displayFn(user?: User): string | undefined { return user ? user.name : undefined; } private _filter(name: string): User[] { const filterValue = name.toLowerCase(); return this.options.filter(option => option.name.toLowerCase().indexOf(filterValue) === 0); } }

Answer1:

I think you're looking for the onSelectionChange option:

You can simple add, to the mat-option:

(onSelectionChange)="setID(option.nameID)"

Everytime when you select a value this will be triggered.

Recommend

  • Angular2 & SystemJS : Cannot find module while building a moduleLoader
  • What does the TypeScript “lib” option really do?
  • php script is parsing content from RTE (tt_news) but internal links are not appearing as speaking ur
  • CERN ROOT exporting data to plain text
  • Reading a file into a multidimensional array
  • Object and struct member access and address offset calculation
  • Hardware Accelerated Image Scaling in windows using C++
  • Magento Fatal error: Maximum execution error solution, on WAMP
  • Java: can you cast Class into a specific interface?
  • Java Scanner input dilemma. Automatically inputs without allowing user to type
  • Retrieving value from sql ExecuteScalar()
  • AES padding and writing the ciphertext to a disk file
  • How to redirect a user to a different server and include HTTP basic authentication credentials?
  • Updating server-side rendering client-side
  • How to extract text from Word files using C#?
  • Symfony2: How to get request parameter
  • ActionScript 2 vs ActionScript 3 performance
  • what is the difference between the asp.net mvc application and asp.net web application
  • To display the title for the current loaction in map in iphone
  • Run Powershell script from inside other Powershell script with dynamic redirection to file
  • Traverse Array and Display in markup
  • Matrix multiplication with MKL
  • KeystoneJS: Relationships in Admin UI not updating
  • log4net write single file for each call to log.info
  • Load html files in TinyMce
  • How can I get HTML syntax highlighting in my editor for CakePHP?
  • Getting error when using KSoap library to consume .NET web services
  • How to set the response of a form post action to a iframe source?
  • Hits per day in Google Big Query
  • coudnt use logback because of log4j
  • Checking variable from a different class in C#
  • Django query for large number of relationships
  • costura.fody for a dll that references another dll
  • Why is Django giving me: 'first_name' is an invalid keyword argument for this function?
  • Binding checkboxes to object values in AngularJs
  • Observable and ngFor in Angular 2
  • How can I use `wmic` in a Windows PE script?
  • UserPrincipal.Current returns apppool on IIS
  • java string with new operator and a literal
  • How to push additional view controllers onto NavigationController but keep the TabBar?