Set value of angular material select autocomplete programmatically

Question

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

So basically you want to set the value of the input to a specific option? Like a default value when the component is rendered? — Fabian Küng
– Fabian Küng, 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
– ccondrup, Commented Mar 17, 2023 at 10:44

Marshal · Accepted Answer · 2019-04-12 20:23:39Z

22

+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

answered Apr 12, 2019 at 20:23

Marshal

11.2k3 gold badges40 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Ricardo Magalhães Over a year ago

How can I set the value programmatically if this value is not contained in the options list?

Jack Over a year ago

I did, but the optionSelected event is not triggered. How can I trigger it?

Marshal Over a year ago

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.

Shubhjot Over a year ago

Another answer if you are looking setValue with an object in mat-autocomplete stackoverflow.com/questions/56454350/…

ktsangop Over a year ago

For anyone looking to also set the respective mat-option as selected : this._auto.autocomplete.options[whatever].select();

Collectives™ on Stack Overflow

Set value of angular material select autocomplete programmatically

1 Answer 1

5 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Linked

Related