16

I have a simple angular material autocomplete function. Now i want to set the value / selected option of this autocomplete programmatically. This is my code:

hardware.component.html

<tr>
    <td class="desc pd7">Firmware</td>
    <td>
        <div class="form-group mb0">
            <mat-form-field class="example-full-width">
                <input type="text" placeholder="Select firmware" aria-label="Number" matInput [formControl]="myControlFirmware" [matAutocomplete]="auto1" (keydown.enter)="$event.preventDefault()">
                <mat-autocomplete #auto1="matAutocomplete" [displayWith]="displayFirmwares">
                    <mat-option *ngFor="let firmware of filteredFirmwares | async" [value]="firmware" (onSelectionChange)="getIdFromFirmware($event, firmware)">
                        {{ firmware.name }}
                    </mat-option>
                </mat-autocomplete>
            </mat-form-field>
        </div>
    </td>
</tr>

hardware.component.ts

this.miscellaneousTerminalService.getMiscellaneous('firmware').subscribe(data => {
    if(data.success) {
        this.availableFirmwares = data.data;
        this.filteredFirmwares = this.myControlFirmware.valueChanges
        .pipe(
            startWith(''),
            map(valFirmware => this.filterFirmwares(valFirmware))
        );
    }
});

filterFirmwares(valFirmware: any): any[] {
    return this.availableFirmwares.filter(firmware => {
        let name = valFirmware.name ? valFirmware.name : valFirmware;
        return firmware.name.toLowerCase().indexOf(name.toLowerCase()) > -1;
    });
}

displayFirmwares(firmware: any): string {
    return firmware ? firmware.name : firmware;
}

getIdFromFirmware(event, firmware) {
    if(event.isUserInput) {
        this.selectedFirmware = firmware._id;

    }
}

i tried to set my firmware model to the _id of the selected Firmware or the name, but nothing works. How can i set the value programmatically. I'm using Angular Material @V 7

2
  • 1
    So basically you want to set the value of the input to a specific option? Like a default value when the component is rendered? Commented Feb 14, 2019 at 11:21
  • when using a displayFunction for each value, the value you're trying to set programmatically will also be piped through your displayFunction. So, transform your value to fit or make sure the displayFunction can handle whatever value you set. Details in this answer: stackoverflow.com/a/63254063/504075
    – ccondrup
    Commented Mar 17, 2023 at 10:44

1 Answer 1

21
+100

You can do the following to accomplish this.

If you aren't sure of the options ahead of time, you retrieve them from API for example, you can get them from the MatAutocompleteTrigger like this.

import { MatAutocompleteTrigger } from '@angular/material'

@ViewChild(MatAutocompleteTrigger) _auto: MatAutocompleteTrigger;

let options = this._auto.autocomplete.options.toArray()

This stackblitz sets the value to two when the button is clicked. I retrieve the options from the trigger and use the array of options to set the value in the formControl... in your case it would be this.myControlFirmware.setValue(options[1].value)

 setValue() {
    let options = this._auto.autocomplete.options.toArray()
    this.myControl.setValue(options[1].value)
  }

Stackblitz

https://stackblitz.com/edit/angular-s3gn1w?embed=1&file=app/autocomplete-simple-example.ts

5
  • 4
    How can I set the value programmatically if this value is not contained in the options list? Commented Aug 13, 2020 at 11:02
  • I did, but the optionSelected event is not triggered. How can I trigger it?
    – Jack
    Commented Dec 12, 2020 at 11:20
  • This is setting the value via the underlying formControl, it will not trigger the component events this way. Because this is programmatically setting a value via the formControl just call the function the optionSelected event would call in the next line... no need to use the optionSelected event.
    – Marshal
    Commented Dec 12, 2020 at 16:04
  • Another answer if you are looking setValue with an object in mat-autocomplete stackoverflow.com/questions/56454350/…
    – Shubhjot
    Commented Sep 28, 2023 at 3:43
  • For anyone looking to also set the respective mat-option as selected : this._auto.autocomplete.options[whatever].select();
    – ktsangop
    Commented yesterday

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.