In buildUserForm, we set a listener on address.state to support a type ahead filtering drop-down experience:
src/app/user/profile/profile.component.ts...this.states = this.userForm .get('address') .get('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 fxFlex="30%"> <input type="text" placeholder="State" aria-label="State" matInput formControlName="state" [matAutocomplete]="stateAuto"> <mat-autocomplete #stateAuto="matAutocomplete"> <mat-option *ngFor="let state of states | async" [value]="state.name"> {{ state.name }} </mat-option> ...
