Hey there! I'm currently using the Angular Material Auto complete component in my Angular 7 app and I'm trying to find a way to bind a value from an API response to it. Can someone help me out with a solution for this?
HTML:
<mat-form-field>
<input type="text" [(ngModel)]="templateId" name="templateId" #templateId="ngModel" placeholder="Template" matInput
[matAutocomplete]="auto" aria-label="Number" (keyup)="filter($event)">
<mat-autocomplete #auto="matAutocomplete" (optionSelected)="onTemplateChange($event)">
<mat-option *ngFor="let temp of filtered" [value]="temp">
{{temp.name}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
Ts:
onTripTemplateChange($event) {
this.templateId = $event.temp.name;
}
- I want the value to be selected by default when I open the component
- When I change the option from the auto complete list, I need to update the selected value
If you have a solution, please share it with me!