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>
  </mat-autocomplete>
  <mat-error *ngIf="userForm.get('address').get('state').hasError('required')">
    State is required
  </mat-error>
</mat-form-field>
...

Here's how it looks when a user enters the V character: