Menu
I know that [value] stores the selected Object (Offer in my case). According to materials documentation, optionSelected emits an event. I tried [optionSelected] = "fooFn" but it doesn't exist. I just want to access the Offer object. Thanks!
offer-search.component.html:
<h5 #offerP>option - autoComplete</h5> <mat-form-field id="form-field"> <input type="text" matInput [formControl]="myControl" [matAutocomplete]="auto"> <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn"> <mat-option *ngFor="let option of filteredOptions$ | async" [value]="option"> {{ option.foodItem.name }} </mat-option> </mat-autocomplete> </mat-form-field> 
648
2 Answers. Show activity on this post. Need to assign a FormControl object on the html input element as shown below. Then in the TS file you can call setValue on the FormControl object to set an initial value.
Simple autocompleteStart by creating the autocomplete panel and the options displayed inside it. Each option should be defined by a mat-option tag. Set each option's value property to whatever you'd like the value of the text input to be when that option is selected.
Answers 1 : of How to clear mat- autocomplete when no option is selected from autocomplete dropdown. You can remove the formControl-binding from your input and when you select an option you set that id to your form.
Default value?… well, if you have a default value, the autocomplete will bring you just one option if you set an object to the input value (the default value selected) or a list of possible objects if it is a string. I’m not sure I’m following you… I suppose you have something like this in your code:
If your use case requires for the first autocomplete option to be highlighted when the user opens the panel, you can do so by setting the autoActiveFirstOption input on the mat-autocomplete component. This behavior can be configured globally using the MAT_AUTOCOMPLETE_DEFAULT_OPTIONS injection token.
But if you consider the edit page there should be prefilled value. Which the user can remove and then use autocomplete. If the user doesn’t wants to change the value why empty such an input field. The example above should do it. There’s no need to recreate the input control everytime.
The autocomplete is a normal text input enhanced by a panel of suggested options. Start by adding a regular matInput to your template. Let's assume you're using the formControl directive from ReactiveFormsModule to track the value of the input.
You can use it like :
<mat-autocomplete #auto="matAutocomplete" (optionSelected)='getPosts($event.option.value)'> WORKING DEMO
177
It can be done in two ways
onSelectionChange which emits MatOptionSelectionChange from mat-option <mat-autocomplete #auto="matAutocomplete"> <mat-option *ngFor="let option of options" [value]="option" (onSelectionChange)="updateMySelection($event)" > {{ option }} </mat-option> </mat-autocomplete> optionSelected which emits MatAutocompleteSelectedEvent from mat-autocomplete <mat-autocomplete #auto="matAutocomplete" (optionSelected)="updateMySelection($event)"> <mat-option *ngFor="let option of options" [value]="option" > {{ option }} </mat-option> </mat-autocomplete> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
