Angular Material Autocomplete Data Source Is Observable

I am wanting a drop-down menu that can be filtered. The autocomplete component seems ideal for this, but the example in the docs deals with the scenario where your list is a static array. My list comes from an observable. I have a store (see below) that allows the data to be filtered, but I can't see how to use with the example that is given.

import { Injectable } from '@angular/core';
import { BehaviorSubject, map, Observable, shareReplay } from 'rxjs';
import { HttpClient } from '@angular/common/http';
import { Asset } from '../interfaces/coin-api/asset';

@Injectable({
providedIn: 'root'
})
export class CoinApiStore {

private subject = new BehaviorSubject<Asset[]>([]);

private data$ : Observable<Asset[]> = this.subject.asObservable();

constructor(private http: HttpClient) {
this.data$ = this.getDataFromCoinApi();
}

public getData(): Observable<Asset[]> {
return this.data$.pipe(
map(assets => assets.sort(this.sortAssets).slice(0, 10))
);
}

public getFilteredData(value: string): Observable<Asset[]> {
return this.data$.pipe(
map(assets => assets.filter(asset => asset.name?.toLocaleUpperCase().includes(value)).sort(this.sortAssets).slice(0, 10))
);
}

private getDataFromCoinApi(): Observable<Asset[]> {
const key = process.env['API_KEY'];
const url = `https://rest.coinapi.io/v1/assets?apikey=${key}`;
return this.http.get<Asset[]>(url).pipe(shareReplay(1));
}

private sortAssets(a1: Asset, a2: Asset) {
return (a1.name ?? a1.asset_id).localeCompare((a2.name ?? a2.asset_id));
}

}

Continue reading...