Typeahead support
In buildForm
, we set a listener on address.state
to support a typeahead filtering drop-down experience:
src/app/user/profile/profile.component.ts
const state = this.formGroup.get('address.state')
if (state != null) {
this.states$ = state.valueChanges.pipe(
startWith(''),
map((value) => USStateFilter(value))
)
}
On the template, implement mat-autocomplete
, bound to the filtered states array with an async
pipe:
src/app/user/profile/profile.component.html
...
<mat-form-field appearance="outline" fxFlex="30%">
<mat-label>State</mat-label>
<input type="text" aria-label="State" matInput formControlName="state"
[matAutocomplete]="stateAuto" #state />
<mat-autocomplete #stateAuto="matAutocomplete">
@for (state of states$ | async; track state) {
<mat-option [value]="state.name">
{{ state...