ArcGIS custom search input for Geocoding

In a (JHipster generated) Angular project I want to use the ArcGIS geocode REST API to Geocode an address string with typeahead selection on the results.

ArcGIS have already implemented address search with a Javascript/Angular library. It has a search widget that looks like this:

However my projects forms are using ng-bootstrap inputs. To have a consistent look and feel I want to use a ng-bootstrap typeahead input with my own implementation of Geocoding with typeahead. (Unless there is a way to style the widget - per this answer)

In stackblitz I achieved getting the typeahead input to work with a array of sample addresses, but can not understand how to connect it to the ArcGIS REST API results.

export class AppComponent {
  private static ROOT_URL = "https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/suggest";

  readonly name = "Angular";
  readonly locations$: Observable<ReadonlyArray<Location>>;

  constructor(private readonly httpClient: HttpClient) {
    this.locations$ = this.getLocations();
  }

  private getLocations(): Observable<ReadonlyArray<Location>> {
    const searchString = "23 Queen";
    const httpParams = new HttpParams()
      .set('countryCode', 'AUS')
      .set('f', 'pjson')
      .set('text', searchString);
    return this.httpClient
      .get<{ suggestions: ReadonlyArray<Location> }>(AppComponent.ROOT_URL, {params: httpParams})
      .pipe(
        pluck('suggestions')
      )
    ;
  }
}

My attempt at the stackblitz is here.

A sample response from the REST API is here.

How do I get the string from the input to the REST API and the results back into the typeahead dropdown?