I am currently working on implementing a MATERIAL autocomplete feature for my angular project, taking inspiration from this Stackblitz demo: https://stackblitz.com/run?file=src%2Fapp%2Fautocomplete-overview-example.ts
In the demo, they have created an array of 5 states. However, I need to retrieve an array of accounts from a service instead.
The implementation in the demo is quite clear - there's an observable that tracks changes in the text input value and filters the array accordingly based on what has been typed so far.
My challenge lies in the fact that I don't have a complete array of accounts like the example. Instead, I have an observable of the complete array.
private _filterStates(value: string): State[] {
const filterValue = value.toLowerCase();
return this.states.filter(state => state.name.toLowerCase().includes(filterValue));
}
private _filterAccount(value: string): COA_Account[] {
const filterValue = value.toLowerCase();
// The issue here is that Accounts$ is not an array but an observable
// How do I work with an observable instead?
return this.Accounts$.filter(acct => acct.name.toLowerCase().includes(filterValue));
}
My main question is regarding accessing the content of the observable within the class. While I know how to handle it in the HTML, I believe I may be overlooking something fundamental.
My current approach involves defining an array and populating it when the observable completes:
ngOnInit(): void {
this.Accounts$ = this.myAcctSvc.getCOAByProjectId(4200).pipe(
switchMap((data : COA_Header) =>{
// This works, but I'm unsure if it's the best practice
this.myAccounts = data.Accounts;
return of(this.myAccounts);
}));
}
MY QUERY IS: Is there a more efficient way to access the Account[] array through the Accounts$ observable?