Utilize object-based autocomplete instead of using arrays

Question

Utilize object-based autocomplete instead of using arrays

I am currently exploring the usage of Autocomplete from Angular Material.

Instead of having their predefined data as

options: string[] = ['One', 'Two', 'Three'];

, I have my own object.

This is how I retrieve the data from my object, which is stored in a file called currencies.json:

list(): Observable<Currencies> {
  return this._http.get('./assets/currencies.json') as unknown as Observable<Currencies>;
}

public currencies$ = this.getAllCurrencies();

getAllCurrencies(): Observable<Currencies> {
  return this._currencyService.list();
}

Now, here's my approach to bind the autocomplete functionality:

<ng-container *ngIf="currencies$ | async">
  <mat-form-field appearance="fill">
    <mat-label>Currency</mat-label>
      <input id="currency" type="text" matInput placeholder="Select a currency. E.g. USD" [matAutocomplete]="auto" formControlName="currency">
      <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete">
        <mat-option *ngFor="let currency of currencies$ | keyvalue" [value]="currency.key">
          {{currency.key}}
        </mat-option>
      </mat-autocomplete>
  </mat-form-field>
</ng-container>

this.currencies$ = this.formMain.valueChanges.pipe(
  startWith(''),
  map(value => this.currencies$.subscribe(data => data.currency.includes((value.toString().toUpperCase() || '')))),
);

However, encountering the following error:

TS2322: Type 'Observable' is not assignable to type 'Observable'. Property 'currency' is missing in type 'Subscription' but required in type 'Currencies'.

Any suggestions on how to rectify this issue?

Another attempt was made with the following code:

currencies?: Observable<string[]>;

this.currencies = this.formMain.valueChanges.pipe(
  startWith(''),
  map(value => this.currencies$.subscribe(data => data.currency.includes((value.toString().toUpperCase() || '')))),
);

But faced the subsequent error:

TS2322: Type 'Observable' is not assignable to type 'Observable'. Type 'Subscription' is missing the properties from type 'string[]': length, pop, push, concat, and more.

Attempting it without using subscribe():

this.formMain.valueChanges.pipe(
  startWith(''),
  map(value => [this.currencies$].filter(currency => currency.includes(value)))
);

And receiving this error:

TS2339: Property 'includes' does not exist on type 'Observable'.

You can check out my StackBlitz code along with the official Angular Material code on StackBlitz. My objective is to replicate the official code behavior using my custom data.

angular typescript angular-material

Answer 1

Answer №1

To start with, ensure you are using the correct interface for your object.

Consider the following code snippet:

export interface Currencies {
  currency: string;
}

This code indicates that your data should follow this format:

{
  currency: 'some string'
}

If your object differs, you can utilize:

export type Currencies = Record<string, string>;

Secondly, avoid casting your http call unnecessarily:

this._http.get('./assets/currencies.json') as unknown as Observable<Currencies>;

Instead, simply use the generic version of http.get<T> method:

this._http.get<Currencies>('./assets/currencies.json')
               ^^^^^^^^^^

Thirdly, make sure to utilize [formControl] binding in your stackblitz when a wrapper with formGroup is absent:

formControlName="currency" => [formControl]="myControl"

Lastly, when constructing the currencies$ observable, remember to work with Observable by using switchMap instead of the map rxjs operator:

currencies$ = this._currencyService.list().pipe(
  switchMap((currencies) => {
    return this.myControl.valueChanges.pipe(
      startWith(''),
      map((query) =>
        Object.fromEntries(
          Object.entries(currencies).filter(([key]) =>
            key.includes(query.toUpperCase())
          )
        )
      )
    );
  })
);

Take a look at the Forked Stackblitz

Answer 2

To start with, ensure you are using the correct interface for your object.

Consider the following code snippet:

export interface Currencies {
  currency: string;
}

This code indicates that your data should follow this format:

{
  currency: 'some string'
}

If your object differs, you can utilize:

export type Currencies = Record<string, string>;

Secondly, avoid casting your http call unnecessarily:

this._http.get('./assets/currencies.json') as unknown as Observable<Currencies>;

Instead, simply use the generic version of http.get<T> method:

this._http.get<Currencies>('./assets/currencies.json')
               ^^^^^^^^^^

Thirdly, make sure to utilize [formControl] binding in your stackblitz when a wrapper with formGroup is absent:

formControlName="currency" => [formControl]="myControl"

Lastly, when constructing the currencies$ observable, remember to work with Observable by using switchMap instead of the map rxjs operator:

currencies$ = this._currencyService.list().pipe(
  switchMap((currencies) => {
    return this.myControl.valueChanges.pipe(
      startWith(''),
      map((query) =>
        Object.fromEntries(
          Object.entries(currencies).filter(([key]) =>
            key.includes(query.toUpperCase())
          )
        )
      )
    );
  })
);

Take a look at the Forked Stackblitz

Utilize object-based autocomplete instead of using arrays

Answer №1

Similar questions

Struggling to render the template inside a .vue file in a Vue.js + TypeScript project?

Angular 5 Service Unit Testing for UPDATE Function

What steps do I need to take in order to develop a custom component for FormControls?

Deploying an NX micro front-end using docker and Nginx individually for every micro front-end

Managing several instances of NgbPagination on a single webpage

node-ts displays an error message stating, "Unable to locate the name 'DEV' (TS2304)."

Guidelines for transmitting form information to a web API using Angular

What advantages does NgRx offer that Signal does not provide?

The debate between using a Class and an Object Literal comes down to the immut

Executing service calls in a for loop in Angular 2 using the Http module

There seems to be an issue with the React Native FlatList: It appears that there is no overload matching this call and some

Difficulty rendering images and CSS during preloading in a Node.js environment

Having difficulty retrieving an angular file from a location outside of the asset folder

Issues with loading Angular 6 project in Internet Explorer 11

Bringing in additional types with the primary import using import/require

The radio button in Angular 6 is not selected

Unable to install a specific commit of an angular library from GitHub using npm

Guide on transferring information obtained from a service to an Angular datatable

What is the correct way to set up Typescript for usage with Angular 2 in Visual Studio 2015?

Trouble with Typescript in VSCode made easy

Utilize object-based autocomplete instead of using arrays

Answer №1

Similar questions

Struggling to render the template inside a .vue file in a Vue.js + TypeScript project?

Angular 5 Service Unit Testing for UPDATE Function

What steps do I need to take in order to develop a custom component for FormControls?

Deploying an NX micro front-end using docker and Nginx individually for every micro front-end

Managing several instances of NgbPagination on a single webpage

node-ts displays an error message stating, "Unable to locate the name '__DEV__' (TS2304)."

Guidelines for transmitting form information to a web API using Angular

What advantages does NgRx offer that Signal does not provide?

The debate between using a Class and an Object Literal comes down to the immut

Executing service calls in a for loop in Angular 2 using the Http module

There seems to be an issue with the React Native FlatList: It appears that there is no overload matching this call and some

Difficulty rendering images and CSS during preloading in a Node.js environment

Having difficulty retrieving an angular file from a location outside of the asset folder

Issues with loading Angular 6 project in Internet Explorer 11

Bringing in additional types with the primary import using import/require

The radio button in Angular 6 is not selected

Unable to install a specific commit of an angular library from GitHub using npm

Guide on transferring information obtained from a service to an Angular datatable

What is the correct way to set up Typescript for usage with Angular 2 in Visual Studio 2015?

Trouble with Typescript in VSCode made easy

node-ts displays an error message stating, "Unable to locate the name 'DEV' (TS2304)."