How to bind the selected value of angular dropdown to an Observable of scalar value?

Question

I have an angular material select component and I would like to bind the selected value of the dropdown to an Observable of scalar from firebase. I would like to do this without unwrapping the observable in component. It looks I cannot bind the value using async pipe. The code below throws an exception because the value of mat-select cannot be bound to "uiStateSvc.currentClient$ | async".

<mat-form-field *ngIf="(store.authorizedClients$ | async)?.length > 0">
  <mat-select [(value)]="uiStateSvc.currentClient$ | async" [compareWith]="compareFn">
    <mat-option *ngFor="let client of store.authorizedClients$ | async" [value]="client"
    (onSelectionChange)="changeCurrentClient($event, client)">
      {{ client.name}}
    </mat-option>
  </mat-select>
</mat-form-field>

I am pulling the current selected value of the dropdown from firebase like so:

this.selectedClient$ = this.authSvc.currentUser$.pipe(
      switchMap((x: firebase.User) => {
        if (x != null) {
          return this.afs.doc(`uistate/${x.uid}`).valueChanges().map((y: any) => y.selectedclient);
        } else {
          return Observable.of(null);
        }
      })
    );

Mario Petrovic · Accepted Answer · 2020-12-14 00:14:05Z

5

+25

You are using double binding, you can not do that with the pipe async it only works with a variable in the component, the code bellow should work, notice I changed the [(value)] to [value] so it will read from the observable | async the default value for the select, and to store the changes I see you already have in the mat-option (onSelectionChange)="changeCurrentClient($event, client), that should be enough

<mat-form-field *ngIf="(store.authorizedClients$ | async)?.length > 0">
  <mat-select
    [value]="uiStateSvc.currentClient$ | async"
    [compareWith]="compareFn"
  >
    <mat-option
      *ngFor="let client of store.authorizedClients$ | async"
      [value]="client"
      (onSelectionChange)="changeCurrentClient($event, client)"
    >
      {{client.name}}
    </mat-option>
  </mat-select>
</mat-form-field>

Hope it helps

edited Dec 14, 2020 at 0:14

Mario Petrovic

8,44516 gold badges45 silver badges66 bronze badges

answered Jun 5, 2018 at 20:50

Gabriel Guerrero

5164 silver badges7 bronze badges

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

Collectives™ on Stack Overflow

How to bind the selected value of angular dropdown to an Observable of scalar value?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related