Displaying default value in mat-select without [(ngModel)]

Question

I have an Angular material form field that has a mat-select that I'm trying to have set to the default value of whats already in my angularFire database (FireStore). The important takeaway is that I have an observable with some data from the database that I am trying to put in the select when the page loads. The problem is, I have to do something a bit hackish to get this to work (currently using an ngIf so that I can use the "| async" on the observable). The reason I am doing this is because I cannot use the "| async" syntax with [(ngModel)].

Basically I need one of the following:

1. a solution that angular material allows to get my value from my observable.

2. a solution of how to get the the equivalent of "| async" from my template and do that same thing in typescript in the component (from there I can use ngModel to bind to the value)

3. some other solution I'm not thinking of as long as it is not hackish

Below is the working code that i am using with the *ngIf in order to display the correct default data:

Component:

constructor(private db: AngularFirestore) {
  }
  ngOnInit() {
    this.food$ = this.db.doc('user/123/foods/321').valueChanges() as Observable<Food>;
}

Template (working but using ngIf hack):

  <mat-form-field *ngIf="(food$ | async)?.fiber as fiberValue">
    <mat-select placeholder="Fiber" (selectionChange)="fiberSelect($event.value)" [(ngModel)]="fiberValue">
      <mat-option [value]="0">Unkown</mat-option>
      <mat-option *ngFor="let fib of fiberOptions " [value]="fib">{{fib}}</mat-option>
    </mat-select>
  </mat-form-field>

Desired template (syntactically incorrect):

  <mat-form-field>
    <mat-select placeholder="Fiber" (selectionChange)="fiberSelect($event.value)" [(ngModel)]="(food$|async)?.fiber">
      <mat-option [value]="0">Unkown</mat-option>
      <mat-option *ngFor="let fib of fiberOptions " [value]="fib">{{fib}}</mat-option>
    </mat-select>
  </mat-form-field>

Answer 1

[(ngModel)] is a combined form of [ngModel] and (ngModelChange). If you separate them it should work

[ngModel]="(food$|async)?.fiber" (ngModelChange)="changeValue($event)"

and in changeValue

changeValue(val) {
    this.food$ = val;
}