Initial value not displayed on mat-select component using async pipe

Question

I'm trying to use a material select component that gets its values through an Observable with async pipe.

template:

<mat-form-field>
  <mat-select
       value="selectedOption$ | async"
       (selectionChange)="onSelectionChange($event.value)">
     @for (option of (optionList$ | async) ?? []; track option) {
       <mat-option [value]="option">{{option.name}}</mat-option>
     }
  </mat-select>
</mat-form-field>

typescript:

...
export class SomeContainer {
  private readonly someService = inject(SomeService);

  readonly selectedOption$;

  readonly optionList$;

  constructor() {
    this.selectedOption$ = this.someService.fetchOption$(
      this.someService.getCurrentOptionId$(),
    );

    this.optionList$ = this.someService.getOptionList$();
  }

  onSelectionChange(option: Option): void {
    this.someService.setSavedOption(option.optionId);
  }
}

And in the service class, I just save the selected option into localstorage, as well as fetch the saved options from localstorage and fetch it. I'm able to see the list of options in the component as well as change select them, but the initial saved option doesn't display, and it's just an empty box. I've tried using behaviorsubject with a set initial value as well instead of simply an Observable, but the initial value is still not displayed.

I'm not sure what the issue is here, I'm expecting to see an initial option selected for the component, but it's not being shown. Any help would be appreciated.

Does selectedOption$ emit the full object or just the value? It should be just the value, not the full object. StackBlitz — BizzyBob
– BizzyBob, Commented Apr 13 at 21:10

Yong Shun · Accepted Answer · 2025-04-15 01:47:57Z

0

Currently the value binds selectedOption$ | async as string instead of actual value.

You should use [value] or [ngModel] (one-way binding).

Besides, as you are attempting to bind the value with object, you should also implement the [compareWith] to the <mat-select> to ensure the previous selected object is bind correctly.

<mat-form-field>
  <mat-select
    [value]="selectedOption$ | async"
    (selectionChange)="onSelectionChange($event.value)"
    [compareWith]="compare">
    @for (option of (optionList$ | async) ?? []; track option) {
      <mat-option [value]="option">{{option.name}}</mat-option>
    }
  </mat-select>
</mat-form-field>

compare(device1: any, device2: any) {
  return device1?.deviceId === device2?.deviceId;
}

Demo @ StackBlitz

edited Apr 15 at 1:47

answered Apr 11 at 1:24

Yong Shun

54.5k6 gold badges38 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Watttttt Apr 11 at 17:03

At first I was using [value] instead of just value, but what would happen is that it is still initially empty, and after selecting a different option, the display would still be empty, and I had to select that option again for the option to be actually displayed as selected.

Watttttt Apr 11 at 17:04

I wonder if it's something wrong with the way I set up the observables then.

Yong Shun Apr 12 at 1:36

Perhaps can you create a StackBlitz demo to reproduce it?

Watttttt Apr 14 at 19:22

stackblitz.com/edit/… Hmmm, this is very weird. In StackBlitz it is working as intended, but where I'm running this, I get the issue. If you have any ideas, feel free to mention. But I'll take a look at this and keep this post updated.

Watttttt Apr 15 at 16:43

Thanks! [compareWith] resolved the issue.

|

Collectives™ on Stack Overflow

Initial value not displayed on mat-select component using async pipe

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related