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
input
to a specific option? Like a default value when the component is rendered?